HTML5+规范是一个开放规范,隶属于工信部,允许三方浏览器厂商或其他手机runtime制造商实现。HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。除了功能外,HTML5+很重要的特点是提供了原生的渲染能力,通过plus.webview、plus.nativeObj、plus.nativeUI,让开发者可以使用js来调用原生渲染能力,实现体验的大幅提升。
mHeader 生成标题
mbody 生成主体
mlist 快速生成列表
,生成的是ul_li无序列表。
折叠面板,是在主体里创建一套ul和li列表,在ul标签的class里加入mui-table-view,在li标签的class加入mui-table-view-cell。在li标签里加入一对a标签,在a标签的class里加入mui-navigate-right(生成一个向右的箭头),在a标签下面加入隐藏列表,隐藏列表用div标签表示,在div标签的class里加入mui-collapse-content,在li的class里加入mui-collapse。
操作列表
,需要在主体外面添加一个新的列表,这个新的列表需要用id选择器来和主体里的按钮关联。显示和隐藏列表用到js。
mnbutton 快速生成按钮
在Mui里按钮分为两种:一种是有底色按钮,另一种是无底色按钮。按钮有六种颜色,分别是默认的白色按钮、绿色按钮、红色按钮、蓝色按钮、黄色按钮、紫色按钮。
mbadge 快速生成数字角标
数字角标分为有底色角标和无底色角标。
对话框
在Mui中对话框有四种:
普通对话框 mui.alert();
参数: 提示对话框上显示的内容;提示对话框上显示标题;提示对话框上按钮显示信息;提示对话框点击结束所回调的函数(重新执行方法)
选择对话框 mui.confirm();
参数: 提示对话框上显示的内容;提示对话框上显示标题;、提示对话框上按钮显示信息,按钮的内容存储在数组里(Array);提示对话框点击结束所回调的函数(重新执行方法);是否使用H5绘制对话框
输入对话框 mui.prompt();
参数: 提示对话框上显示的内容;编辑框显示的提示文字;提示对话框上首先的标题;提示对话框的按钮内容;提示对话框点击结束所回调的函数(重新执行方法);是否使用H5绘制对话框
消息提示框 mui.toast();
自动消失提示框
mslider 快速生成轮播组件
在轮播组件里面的图片的高度和宽度是需要一致的。轮播图片的尺寸(宽度和高度)要一致。
在Mui中如果想要图片实现轮播的效果,则需要在.mui-slider-group节点上增加.mui-slider-loop类,同时需要重复增加2张图片。mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期。
mform 快速生成表单
快速删除:只需要在input控件上添加.mui-input-clear类,当input 控件中有内容时,右侧会有一个删除图标,点击会清空当前input的内容;搜索框:在.mui-input-row同级添加.mui-input-search 类,就可以使用search控件;语音输入*5+ only:为了方便快速输入,mui集成了 HTML5+的语音输入,只需要在对应input控件上添加.mui-input-speech 类,就可以在5+环境下使用语音输入;mui在mui.init()中会自动初始化基本控件,但是 动态添加的Input组件需要重新进行初始化;密码框:给input元素添加.mui-input-password类即可使用。
mtab
底部
可以在浏览器或者内置浏览器运行,也可以在模拟器运行,还可以真机运行。
完成应用页面的编辑后,需要正式打包为原生的apk或ipa安装包。
首先明确一下,有人说HTML5做的应用无法通过苹果Appstore审核,这是错误的说法。苹果只是拒绝开发者把web站点直接打包上Appstore,不优化任何体验,它认为这是给Appstore制造垃圾应用,如果是原生体验的App,虽然使用HTML5技术,苹果也不会拒绝上架。事实上Appstore上使用HTML5技术的App超过40w。
HBuilderX提供的打包有云打包和本地打包两种。
HBuilderX提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。
云打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。
无论云打包还是本地打包,在HBuilderX的菜单“发行”菜单中有链接。
5+App入门笔记前言1. 5+ App概念2. HBuilderX开发环境3. Mui框架3.1 新建项目3.2 快速生成组件前言HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus.org组织,推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下,相关标准已经成为
开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
就是一套代码能编译出多个平台的原生源码。
例如我想要 andorid 和小程序
能编译出 android的代码和小程序的代码。
2. Wap2
App
就是打包成一个
app
例如:我有一个手机网站 http://a.b.com,想打包成andorid
app
上架应用市场。可以用这个
打包的苹果
app
好像好难上...
开发一款
APP
产品需要在安卓和苹果2大平台发布,同时开发团队也需要有安卓和IOS。
HTML5
Plus移动
App
,简称5+
App
,是一种基于HTML、JS、
CSS
编写的运行于手机端的
App
,这种
App
可以通过扩展的JS API任意调用手机的原生能力,实现与原生
App
同样强大的功能和性能。
通过5+
App
可以降低
APP
开发的门槛,让一般的
前端
开发人员也可以进行
APP
的开发,同时能为公司节约很大...
一文看懂h5+
app
打包一、npm打包h5+
app
项目二、在hbuilder中创建一个新的5+
app
项目模板三、将之前打包好的dist文件夹下的两个文件放入新创建的项目中,如下图所示四、在新项目的manifest.json中配置相应的图标及参数五、云端打包六、打包成功的临时下载路径
一、npm打包h5+
app
项目
首先将写好的h5+
app
进行本地打包
npm run build 或者 yarn build 都可以
二、在hbuilder中创建一个新的5+
app
项目模板
三、将之前打包好的dist文件夹下
抛开uni-
app
可以开发多端,而5+
App
只能开发
App
不谈。本文只谈仅做
App
的情况下,uni-
app
的
App
和5+
App
有什么区别。
5+
App
是DCloud上一代产品,基于webview扩展的混合开发技术。
它的每个页面都是一个webview加载一个html页面,调用原生扩展能力时通过webview的桥通信实现。
5+
App
可以满足常规
App
的开发,并且基于html开发比较简答。但距离第一流互联网体验要求的
App
而言,5+
App
难以满足这种要求。
于是DCloud新出了uni-
app
。
uni-ap
Uni
app
是一个基于Vue.js开发的跨平台应用框架,可以用于开发小程序、H5、
App
等多个平台的应用。在Uni
app
中,实现底部导航栏可以通过
使用
uni-tabbar组件来实现。
首先,在uni-
app
项目的pages.json文件中配置底部导航栏的页面路径和图标,示例代码如下:
```json
"pages": [
"path": "pages/