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技术弟。

super_haochen

Peace && love

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.