Uniapp生成快应用webview版

快应用 Sep 30, 2020

uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(快应用/微信/支付宝/百度/头条/QQ/钉钉/淘宝)等多个平台。

快应用webview版

快应用特点之一在于:它基于前端技术栈,相比于原生,拥有更高的开发效率,为了方便拥有小程序的开发者更加便捷的进入快应用生态,提高开发快应用的效率, vivo、oppo、华为等厂商,采用相同的技术标准,推出了微信小程序转快应用工具。它同小程序一样,采取 Webview 渲染方式,使得开发者没有额外学习成本(有 Web、小程序开发经验即可),同时它能够使用 Web 上各种能力,令用户有良好应用访问体验。进一步提高了开发者的效率,大幅降低拥有小程序的开发者进入快应用生态的成本。

开发流程

用uniapp开发的详细具体流程可以查看其官网的流程,本文无需赘述。总结起来从头搭建一个uniapp项目的流程为:

  • 1.下载HBuilderX开发者工具和快应用开发工具
  • 2.新建项目,选择uni-app项目
    uniapp1
  • 3.生成项目之后,只需要选择运行->运行到小程序模拟器->快应用联盟开发工具
    uniapp
  • 4.编译完成后在项目目录下将生成一个unpackage目录
    uniapp2
  • 5.正常情况在第3步完成之后会自动打开快应用开发工具,并且打开对应的项目,如果没自动打开也不要紧,手动用快应用开发工具打开unpackage->dev->your-project-name-union目录,开发工具会在打开项目之后自动编译,并且打开相应的预览界面如下
    uniapp3

当然大部分同学一定不是从头开发的,应该都是从已有的项目直接生成快应用并进行打包上传的,那么你只需要在下载快应用开发工具之后之后从第3步开始就可以。

真机上测试

完成开发流程之后,除了在开发工具上进行测试之外,更建议在真机上进行测试,因为真机引擎上的实际效果和开发工具上的效果还是有些差异的,在真机上运行项目的流程可以具体查看快应用官网流程,简单来说分为以下几步:

  • 1.下载快应用调试器并安装
  • 2.下载快应用引擎并安装(调试器会自动读取该下载的引擎)
  • 3.安装webview(如果你测试机上的版本小于62)
  • 4.之后只需要用手机扫开发工具上生成的二维码,或者直接将项目下.quickapp/dist/your-project-name.rpk推入手机,在调试器中选择本地安装选择推入的rpk。
    uniapp4

发布快应用

当调试完成之后,需要发布快应用,这个步骤在开发工具中也十分简单。

  • 1.生成签名并生成release版本rpk包
    uniapp5
  • 2.填入信息生成签名文件
    uniapp6
  • 3.最终生成的签名文件
  • 4.如果此时dist目录下没有生成your-project-name.release.rpk,需要再次点击步骤1中的打包按钮,等待编译之后会生成相应的release版本rpk包。
    uniapp7
    注意⚠️!
    当你决定上传生成的release版本rpk包的时候,切记要将此时.quickapp/sign/release下的certificate.pemprivate.pem文件进行备份到项目之外的地方,因为当你在更改uniapp源码之后,HBuilderX会将快应用项目清空,重新生成整个项目,导致签名丢失,而当你之后上传更新的rpk的时候需要与上个版本的签名一致
  • 5.剩下需要做的就是上传了,请联系我们的vivo技术弟,给您开通VIP通道进行快应用webiew版本的上传路径~
    uniapp8

问题反馈

因为uniapp是通过将vue.js语法通过自己的转换器生成快应用webview版本的语法,可能会出现部分行为或者样式有所不同,如果有任何问题可以及时反馈给vivo技术弟。

Tags

super_haochen

Peace && love