欢迎大家参与快应用vue原生渲染模式的适配共研

快应用为原生渲染和webview渲染两种模式。

webview渲染模式类似小程序，这种模式uni-app已经直接支持了。
但原生渲染模式，uni-app虽然也支持，但仍然需使用快应用的组件和api而不是uni-app的组件和api。也就是需要写div而不是写view。

uni-app对原生渲染模式快应用的适配，现状如下：

1. 在uni-app的cli版本中，提供了快应用的条件编译，在条件编译里，使用快应用的组件和api，可以直接运行和发布快应用。
2. 如果想使用uni-app的组件和api，在快应用里运行，需要一个中间适配层。这层目前DCloud官方完成一部分组件和api的适配，其余组件和api，计划交给社区开发者解决。

欢迎各位开发者一起参与完善，让uni-app的更多组件和api，可以直接发布到快应用。

本文档为开发者参与适配更多uni组件和API的教程。

参考文档

• uni-app文档 https://uniapp.dcloud.io/
• 快应用官网，使用 Vue开发快应用

仓库介绍

uni-app
uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。

hello quickapp
测试uni-app快应用组件及 API，已包含 button 组件、剪切板、及平台调用示例

快速体验

1. 安装 快应用调试器

2. 打开快应用调试器，下载平台（快应用预览版：版本号1060）

3. 拉取 hello quickapp

   git clone https://github.com/dcloudio/hello-quickapp-native.git
   cd ./hello-quickapp-native
   yarn install

4. 编译快应用 rpk

   npm run dev:quickapp-native

5. 开启debug在线更新服务

   npm run serve:quickapp-native

6. 打开快应用调试器，扫码安装或右上角设置服务器地址(注意带上http://，关闭USB调试可看到扫码)

   • 修改代码后，会主动通知调试器更新，或者手动点击在线更新（调试可以点击右下角开始调试）

开发

1. Fork 仓库 uni-app https://github.com/dcloudio/uni-app，切换到 dev-quickapp 分支

2. 源码中有2个例子，分别是 Button 组件适配示例及 clipboard API适配示例

   - button `src/platforms/quickapp-native/view/components/button`
   - clipboard `src/platforms/quickapp-native/service/api/device/clipboard`

3. 编译 (输出目录packages/uni-quickapp-native)

   npm run build:quickapp-native

手动替换 uni-app 编译输出目录 packages/uni-quickapp-native 到 hello quickapp 工程 node_modules/@dcloudio/uni-quickapp-native, 可以考虑 npm link

uni-app 目录说明

packages
├─uni-quickapp-native
│  └─lib
│      ├─compiler-module (编译阶段标签转换之类逻辑)
│      ├─polyfill.css (全局样式差异代码)
│      └─manifest (manifest.json的生成逻辑)
src
├─platforms
│  └─quickapp-native
│      ├─...
│      ├─service
│      │   └─api 平台的接口实现（方案同h5，app-plus）
│      └─view
│          └─components 平台的组件实现（easycom格式，目录名与文件名一致）
│              └─button

提交代码

使用 pull request 提交代码

组件条件编译

<template>
<view>
<!-- #ifdef QUICKAPP-NATIVE -->
<button>Button</button>
<!-- #endif -->
</view>
</template>

调用快应用平台 API

<script>
// 剪切板，注意模块配置
var clipboard = $app_require$("@app-module/system.clipboard");
</script>

模块配置

src/manifest.json
"quickapp-native": {
"icon": "static/logo.png",
"package": "com.example.demo",
"features": [{ "name": "system.clipboard" }] //剪切板
}

生成证书 certificate.pem 和 private.pem

安装 openssl(windows系统)

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem

• 发布快应用时需要使用自己的证书，开发期间为debug证书

vivo 和 华为版可直接发布，见: https://ask.dcloud.net.cn/article/37182

QQ交流群：148203425

回答