DCloud_uniAD_HDX
DCloud_uniAD_HDX
  • 发布:2020-04-16 12:30
  • 更新:2024-03-15 16:21
  • 阅读:33696

uni-app支持快应用-webview版,欢迎体验

分类:uni-app

快应用是基于手机硬件平台的新型应用形态,标准由国内主流手机厂商联合制定。

快应用可以认为是手机硬件厂商的小程序,但和微信、支付宝等小程序又有较大不同:

  • 微信、支付宝、百度、字节跳动等各家小程序架构设计接近,开发规范接近,都是基于webview渲染,布局方式一致,开发者开发不同小程序时,学习成本较低,且可借助跨端框架或转换器快速实现多平台发行。
  • 快应用是单独的架构设计,单独的开发规范,基于 Native 原生渲染(相比web,布局上有更多限制),有额外的学习成本,且项目代码不易与 Web、小程序等相互复用

这些差异,严重制约了快应用生态的发展,参与的开发者少,提交的快应用的数量也很少,不过几千款,与微信的百万级应用数差距很大。

为此,vivo、华为等厂积极探索,推出快应用(webview 版)(为叙述方便,下文统称为「快应用」),它同小程序一样,采取 Webview 渲染方式,使得开发者没有额外学习成本(有 Web、小程序开发经验即可),能够使用 Web 上各种能力,同时令用户有良好应用访问体验。

uni-app在第一时间跟进了快应用新引擎适配,目前已在 uni-app 的 vue-cli 版中,和HBuilderX 2.7.12+版本,发布了对快应用-webview版的适配。

创建项目

  1. 在HBuilderX 2.7.12+中新建uni-app项目,可以直接运行到快应用。需先按照快应用的开发工具,分快应用联盟版和快应用华为版,需要分别安装。

  2. cli方式创建项目

# npm script  
# 全局安装vue-cli  
$ npm install -g @vue/cli  
# 创建uni-app项目,会提示选择项目模板,初次接触建议选择 hello uni-app 模板  
$ vue create -p dcloudio/uni-preset-vue#alpha my-project  
# 进入项目目录  
$ cd my-project
# dev 模式,编译预览/联盟(仅vivo oppo支持)  
$ npm run dev:quickapp-webview-union  
# build 模式,发行打包  
$ npm run build:quickapp-webview-union
# dev 模式,编译预览/华为  
$ npm run dev:quickapp-webview-huawei  
# build 模式,发行打包  
$ npm run build:quickapp-webview-huawei

编译目录为: dist\(dev|build)\quickapp-webview-union

预览测试

  1. 下载开发者工具
  1. 启动开发者工具,打开编译后的项目目录:dist\(dev|build)\quickapp-webview
  2. 在pc模拟器上,可直接看到开发效果。
  3. 手机真机预览方式:将手机与电脑成功连接,并打开“开发者调试”模式。点击顶部菜单的运行按钮,开发者工具会通过USB自动安装调试 apk 到手机上,并自动启动基座进行测试

发布

vivo
https://dev.vivo.com.cn/distribute/quickApp

华为
https://developer.huawei.com/consumer/cn/console

manifest.json 配置

// vivo / oppo  
"quickapp-webview-union": {  
	"icon": "/static/logo.png",  
	"package": "com.example.demo",  
	"minPlatformVersion": 1062, //最小平台支持 vivo/oppo >= 1062  
	"versionName": "1.0.0",  
	"versionCode": 1,  
},  
// 华为  
"quickapp-webview-huawei" : {  
    "icon" : "/static/logo.png",  
    "package" : "com.example.demo",  
    "minPlatformVersion" : 1070,//最小平台支持 >= 1070  
    "versionName" : "1.0.0",  
    "versionCode" : 1  
}

sign 证书配置

sign放到项目根目录,编译后自动拷贝到 .quickapp/sign,每次编译完成时会删除.quickapp,避免证书丢失

快应用平台文档(平台独有api使用条件编译调用)

华为:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-frame-overview
vivo/oppo:https://qapp-chimera.vivo.com.cn/framework/index.html

欢迎共研

所有快应用适配代码,均已开源在github,欢迎star鼓励!也欢迎加入QQ群交流:148203425。

如果你对原生渲染的快应用适配感兴趣,也欢迎参与社区共研,详见 https://ask.dcloud.net.cn/article/37145

1 关注 分享
2***@qq.com

要回复文章请先登录注册

DCloud_uniAD_HDX

DCloud_uniAD_HDX (作者)

回复 linnian :
这个项目是native渲染,目前处于共研阶段,功能尚未适配完毕,webview渲染方式,可以使用条件编译调用独有代码,例如华为推送通知:https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/webview-api-hwpush
2020-10-10 11:23
DCloud_uniAD_HDX

DCloud_uniAD_HDX (作者)

回复 vickyyiyi :
在手机端打开快应用调试器,开启USB调试,PC会启动一个浏览器,和调试H5一样
2020-10-10 11:09
linnian

linnian

回复 DCloud_uniAD_HDX :
这个项目好像是原生形式(只能cli版本使用),我的项目准备多端发布,直接在hx中编写,条件只有webview,不能调用快应用独有代码是吗?比如通知
2020-10-09 22:02
DCloud_uniAD_HDX

DCloud_uniAD_HDX (作者)

回复 linnian :
var barcode = $app_require$("@app-module/system.barcode");
参考 https://github.com/dcloudio/hello-quickapp-native/blob/master/src/pages/quickapp-api/scan-code/scan-code.vue
2020-09-28 18:11
linnian

linnian

请问uniapp该如何写快应用的代码,因为快应用的代码,它的模块需要先导入再使用。
`import notification from '@system.notification'`
导入必然编译的时间报错找不到文件。快应用是像h5+一样有一个类似于plus的对象吗?
2020-09-24 20:22
guotanghang

guotanghang

回复 刺客89 :
是1072还是1070,"quickapp-webview-huawei" : {
"icon" : "/static/logo.png",
"package" : "com.example.demo",
"minPlatformVersion" : 1070,//最小平台支持 >= 1070
"versionName" : "1.0.0",
"versionCode" : 1
2020-09-18 11:00
guotanghang

guotanghang

回复 刺客89 :
还是不行,能留你qq吗,指导我们下
2020-09-18 09:58
TD小宇宙

TD小宇宙

快应用开发工具调试正常,真机调试白屏是怎么回事?
2020-09-18 09:53
刺客89

刺客89

回复 vickyyiyi :
可以看下miniplatformversion字段值是多少,1072以上双方编译差异才开始对齐,或者使用华为IDE华为IDE编译后在华为真机运行
2020-09-15 11:31
刺客89

刺客89

回复 vickyyiyi :
拉起华为IDE后等待连接
2020-09-15 11:11