Uniapp生成快应用webview版

super_haochen -

uni-app

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

快应用webview版

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

开发流程

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

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

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

真机上测试

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

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

发布快应用

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

  • 1.生成签名并生成release版本rpk包
  • 2.填入信息生成签名文件
  • 3.最终生成的签名文件
  • 4.如果此时dist目录下没有生成your-project-name.release.rpk，需要再次点击步骤1中的打包按钮，等待编译之后会生成相应的release版本rpk包。

    注意⚠️！
    当你决定上传生成的release版本rpk包的时候，切记要将此时.quickapp/sign/release下的certificate.pem和private.pem文件进行备份到项目之外的地方，因为当你在更改uniapp源码之后，HBuilderX会将快应用项目清空，重新生成整个项目，导致签名丢失，而当你之后上传更新的rpk的时候需要与上个版本的签名一致。
  • 5.剩下需要做的就是上传了，请联系我们的vivo技术弟，给您开通VIP通道进行快应用webiew版本的上传路径～

问题反馈

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