admin管理员组文章数量:1597400
HTML5 Plus应用概述
HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。
HTML5 Plus规范
通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus组织,推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下,相关标准已经成为行业标准。
HTML5+规范是一个开放规范,隶属于工信部,允许三方浏览器厂商或其他手机runtime制造商实现。
HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。
除了功能外,HTML5+很重要的特点是提供了原生的渲染能力,通过plus.webview、plus.nativeObj、plus.nativeUI,让开发者可以使用js来调用原生渲染能力,实现体验的大幅提升。
原生的api多达40万,HTML5+的封装并非把40万api都封装了一遍,而是分成了2个层面:
- HTML5Plus规范:常用的扩展能力,比如二维码、语音输入,都封装到了规范中,同时实现了Android和iOS的解析引擎,使得开发者的代码编写一次,可跨平台运行。
- Native.js是另一项创新技术。手机OS的原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象,通过js可以直接调ios和android的原生API。这部分就不再跨平台,写法分别是plus.ios和plus.android,比如调ios game center,或在android手机桌面创建快捷方式,这些都是平台专有的api。
Native.js的用法示例,var obj= plus.android.import("android.content.Intent");,将一个原生对象android.content.Intent映射为js对象obj,然后在js里操作obj对象的方法属性就可以了。
Native.js的详细教程可以参考:5+ App开发Native.js入门指南
在5+App里,同时包含了HTML5Plus规范和Native.js的实现,开发者可以在5+App里自由使用相关技术。
5+ App概念解析
首先开发者需要清楚你要做什么,是一个mobile web项目,运行在浏览器里?还是要做一个app,安装和运行在手机上?或者要把一个mobile web项目打包成app?
- 做一个mobile web项目
在这个模式下,开发者用不到HTML5Plus,使用标准的HTML5语法,运行在浏览器里。这不算5+ App。
此时开发者仍然可以使用HBuilder这个开发工具,新建项目时选择web项目。
开发者也仍然可以使用DCloud提供的mui开源框架,来简化ui的开发。
但这就是一个普通的web项目,b/s方式,不可脱线运行,不能调用HTML5Plus的增加api。 - 做一个正统的app
传统意义上的app,是c/s方式的,它的程序要安装和运行在手机上,不通过浏览器在线下载。
此时开发者在HBuilder里新建项目时,选择“移动App”。(HBuilderX里选择5+App)
在App项目下编写的HTML、js等文件,是会被打包到原生的安装包(Android是apk包、iOS是ipa包)里的。
此时本地的js和服务器通过ajax交互,由服务器按接口方式给出数据(一般是json),然后客户端的js文件解析json,并根据本地的业务逻辑来渲染页面和执行功能。
所以请不要在App项目中放置运行在服务器端的php等文件。 - 使用wap2app打包mobile web项目为app
如果开发者想把一个做好的mobile web站,方便快速的打包成app,那么要使用DCloud的wap2app框架。
在HBuilder中新建项目时,选wap2app项目,把mobile web站的url输入进去,参考框架的教程来配置。
wap2app不同于普通的web打包技术,wap2app可真正做达到原生应用的功能和性能体验。
具体教程另见:文档中心-wap2app,http://ask.dcloud/docs/#//ask.dcloud/article/1244
wap2app属于5+app,它底层也是强大的HTML5Plus规范和Native.js在支撑。
wap2app项目下的所有文件,也都是打包在本机运行的。 - 如果你想开发一次,全端覆盖,那么需要使用DCloud的另一个产品uni-app
HTML5+ 应用架构
HTML5+ 规范 API 及demo示例
最新规范请参考http://www.html5plus/#specification
手机端体验各个API的实现效果,ios手机在Appstore搜索Hello H5+,Android手机下载地址。
在HBuilder中新建移动App,选Hello H5+,即可看到这个demo的源代码。
开发环境HBuilder
HBuilder内置HTML5+ APP开发环境,提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示,提高开发效率;集成真机运行环境,方便开发后即时在真机上查看运行效果;集成应用云端打包系统,不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
下载地址:http://www.dcloud.io/
平台支持
- iOS 5.0及以上
- Android 2.3及以上
手把手教你开发HelloWorld(重点,重点,重点,必须说三遍)
创建HelloWorld应用
- 启动HBuilder(下载地址:http://www.dcloud.io/);
- 在菜单栏中选择“文件”-> “新建”->“移动App”(快捷键Ctrl+N A),打开“创建移动App”对话框,在应用名称中输入“HelloWorld”;
- 如果是HBuilderX,则新建项目时选5+App。
注意新建移动App需要联网分配一个appid,在真机联调、打包发行时都需要这个ID,所以不联网无法创建移动App。 - 创建完成后,会在项目管理器中显示新建的“HelloWorld”项目
manifest.json(超级重要的配置文件)
在项目管理器中双击“manifest.json”文件,打开应用配置页面:
对于要打包的原生应用而言,其各种配置均在此处。具体配置教程见:Manifest.json文件配置,或者点击配置页面上的“manifest文件配置指南”链接。
配置链接:https://ask.dcloud/article/94
配置如下:
概述
manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称、图标、入口页面等信息。用户可通过HBuilder|HBuilderX的可视化界面视图进行配置,也可在源码视图中根据以下规范直接修改。
manifest.json文件根据w3c的webapp规范制定,plus节点下内容为HTML5 Plus扩展规范,其下包括iOS和Android子节点,内容来源分别为iOS和Android原生打包所要求的参数,用于对5+移动App打包为ipa或apk安装包进行配置。
uni-app项目的manifest.json规范参考:https://uniapp.dcloud.io/collocation/manifest
链接:https://uniapp.dcloud.io/collocation/manifest
属性 | 类型 | 描述 |
---|---|---|
android | Object | Android 应用配置,详见: 完整 manifest.json |
ios | Object | iOS 应用配置,详见: 完整 manifest.json |
sdkConfigs | Object | SDK配置,仅打包生效 详见 |
orientation | Array | 重力感应、横竖屏配置,可取值:"portrait-primary":竖屏正方向;"portrait-secondary":竖屏反方向;"landscape-primary":横屏正方向;"landscape-secondary":横屏反方向。 |
App SdkConfigs
三方原生SDK配置。三方SDK的使用需要向这些SDK提供商申请,并配置参数到此处。可在HBuilderX可视化界面(App SDK配置)输入配置,此配置仅云打包后生效,本地打包需自行在原生工程中配置。
属性 | 类型 | 描述 |
---|---|---|
oauth | Object | 授权登录,配置后可调用 uni.login 进行登录操作,目前支持的授权登录平台有:QQ、微信、新浪微博。 |
share | Object | 分享,配置后可调用 uni.share 进行分享,目前支持QQ、微信、新浪微博等分享, 具体配置 详见。 |
push | Object | push配置,使用方式 详见,目前支持:uniPush、个推、小米推送,注意App仅支持一种 push 方式,配置多个 push 无效,建议使用 uniPush,支持多厂商推送。 |
payment | Object | 三方支付配置,配置后可调用 uni.payment 进行支付,目前支持微信支付、支付宝支付、苹果内购, 具体配置 详见。 |
statics | Object | 统计配置,目前仅支付友盟统计,详见,在uni-app中只用 plus.statistic 进行调用。 |
speech | Object | 语音识别配置,支持讯飞语音、百度语音,详见,在uni-app中只用 plus.speech 进行调用。 |
maps | Object | 原生地图配置,目前仅支持 高德地图,申请方式可参考:地图插件配置。 |
nvue
nvue
页面布局初始设置
属性 | 类型 | 描述 |
---|---|---|
flex-direction | String | flex 成员项的排列方向,支持项,row:从左到右; row-reverse:从右到左;column:从上到下;column-reverse:与 column 相反,默认值 column。 |
h5
属性 | 类型 | 说明 |
---|---|---|
title | String | 页面标题,默认使用 manifest.json 的 name |
template | String | index.html模板路径,相对于应用根目录,可定制生成的 html 代码。参考:自定义模板 |
router | Object | 参考:router |
async | Object | 参考:async |
devServer | Object | 开发环境 server 配置,参考:devServer |
publicPath | String | 引用资源的地址前缀,仅发布时生效。参考:publicPath |
sdkConfigs | String | SDK配置,例如地图... 参考:sdkConfigs |
optimization | Object | 打包优化配置(HBuilderX 2.1.5 以上支持),参考optimization |
自定义模板
需要使用自定义模板的场景,通常有以下几种情况:
- 调整页面 head 中的 meta 配置
- 补充 SEO 相关的一些配置(仅首页)
- 加入百度统计等三方js
使用自定义模板时,1. 工程根目录下新建一个html文件;2. 复制下面的基本模板内容,到这个html文件,在此基础上修改meta和引入js;3. 在 manifest.json->h5->template
节点中关联这个html文件的路径。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div ></div>
<!-- built files will be auto injected -->
</body>
</html>
在hello uni-app示例中有一个template.h5.html
文件,即是此用途。
关于SEO的补充说明
H5平台是SPA单页应用,普通的SEO信息即加meta字段只能在,自定义的模板html里配置首页。
但SEO的时代在变,现在更有效的方式,是用uni-app同时发布一版百度小程序,这个搜索权重更高。DCloud的ask社区的H5版也是uni-app做的,同时发布了百度小程序,权重更高,每天来自百度的搜索量非常多。是一个可现身说法的好案例。
router
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
mode | String | hash | 路由跳转模式,支持 hash、history |
base | String | / | 应用基础路径,例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/" |
注意:history
模式发行需要后台配置支持,详见:history 模式的后端配置
async
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
loading | String | AsyncLoading | 页面 js 加载时使用的组件(需注册为全局组件) |
error | String | AsyncError | 页面 js 加载失败时使用的组件(需注册为全局组件) |
delay | Number | 200 | 展示 loading 加载组件的延时时间(页面 js 若在 delay 时间内加载完成,则不会显示 loading 组件) |
timeout | Number | 3000 | 页面 js 加载超时时间(超时后展示 error 对应的组件) |
devServer
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
https | Boolean | false | 启用 https 协议 |
disableHostCheck | Boolean | false | 禁用 Host 检查 |
Tips:uni-app
中 manifest.json->h5->devServer
实际上对应 webpack
的 devServer,鉴于 manifest 为 json 文件,故 webpack.config.js->devServer
配置项下的简单类型属性均可在manifest.json->h5->devServer
节点下配置,funciton 等复杂类型暂不支持。
publicPath
配置 publicPath 为 cdn 资源地址前缀,这样编译出来的 html 文件,引用的 js,css 路径会自动变成 cdn 上的地址。
示例
以 hello-uniapp 发布 H5 时为例
未配置 publicPath 时,发布时 index.html 中的结果:
<script src=/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=/h5/static/js/index.34e8497d.js>
配置 publicPath 为 https://www.cdn/h5/
(无效地址仅用作示例) 后,发布时 index.html 中的结果:
<script src=https://www.cdn/h5/static/js/chunk-vendors.803ce52d.js></script>
<script src=https://www.cdn/h5/static/js/index.34e8497d.js>
注意
-
打包部署后,在服务器上开启 gzip 可以进一步压缩文件。具体的配置,可以参考网上的分享:https://juejin.im/post/5af003286fb9a07aac24611b
sdkconfig
示例
"h5": {
"sdkConfigs": {
"maps": {
"qqmap": {
//腾讯地图秘钥(key)
"key": "XVXBZ-NDMC4-JOGUS-XGIEE-QVHDZ-AMFV2"
}
}
}
}
optimization
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
prefetch | Boolean | false | 资源预取 |
preload | Boolean | false | 资源预加载 |
treeShaking | Object | 摇树优化,根据项目需求,动态打包框架所需的组件及API,保持框架代码最精简化,参考treeShaking |
treeShaking
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
enable | Boolean | false | 是否启用摇树优化 |
示例:
"h5": {
"optimization": {
"treeShaking": {
"enable": true
}
}
}
Tips:关于摇树优化(treeShaking)原理及优化结果,参考:https://ask.dcloud/article/36279
mp-weixin
属性 | 类型 | 说明 |
---|---|---|
appid | String | 微信小程序的AppID,登录 https://mp.weixin.qq 申请 |
usingComponents | Boolean | 是否启用自定义组件模式,v1.8.0+ ,默认为false,编译模式区别详情 |
setting | Object | 微信小程序项目设置,参考setting |
functionalPages | Boolean | 微信小程序是否启用插件功能页,默认关闭 |
requiredBackgroundModes | Array | 微信小程序需要在后台使用的能力,详见 |
plugins | Object | 使用到的插件,详见 |
resizable | Boolean | 在iPad上小程序是否支持屏幕旋转,默认关闭 |
navigateToMiniProgramAppIdList | Array | 需要跳转的小程序列表,详见 |
permission | Object | 微信小程序接口权限相关设置,比如申请位置权限必须填此处详见 |
workers | String | Worker 代码放置的目录。 详见 |
setting
编译到微信小程序平台下的项目设置。
属性 | 类型 | 说明 |
---|---|---|
urlCheck | Boolean | 是否检查安全域名和 TLS 版本 |
es6 | Boolean | ES6 转 ES5 |
postcss | Boolean | 上传代码时样式是否自动补全 |
minified | Boolean | 上传代码时是否自动压缩 |
mp-alipay
属性 | 类型 | 说明 |
---|---|---|
usingComponents | Boolean | 是否启用自定义组件模式,v2.0+ ,默认为false,编译模式区别详情 |
mp-baidu
属性 | 类型 | 说明 |
---|---|---|
appid | String | 百度小程序的 AppID,登录 |
版权声明:本文标题:20191107 关于mui的app打包 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1728280832a1151790.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论