DCloud_UNI_HDX
DCloud_UNI_HDX
  • 发布:2020-04-08 11:45
  • 更新:2022-04-30 13:55
  • 阅读:11890

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

分类:uni-app

快应用为原生渲染和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
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-nativehello 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.pemprivate.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

1 关注 分享
Warn

要回复文章请先登录注册

1***@sina.com

1***@sina.com

app.js:162: ReferenceError: Vue is not defined
ReferenceError: Vue is not defined

pages/index/index.js:736: ReferenceError: uni is not defined
ReferenceError: uni is not defined
2022-04-30 13:55
C1oudust

C1oudust

官方这个例子我点击按钮根本没反应。离谱
2021-06-28 18:11
黄化腾

黄化腾

回复 b***@foxmail.com :
可以解决吗
2021-04-12 13:43
b***@foxmail.com

b***@foxmail.com

回复 DCloud_UNI_HDX :
目前这个native能用到正式项目吗?急需$app_require$直接调用快应用的API,如果无法调,那就不得不放弃了,因为涉及到推广什么的,太重要了
2020-11-05 10:57
DCloud_UNI_HDX

DCloud_UNI_HDX (作者)

回复 8***@qq.com :
有时可能没看到,多问几次
2020-08-28 17:11
8***@qq.com

8***@qq.com

QQ交流群根本没啥用,还不如建个微信群,全都是潜水的,没人用QQ了吧
2020-08-20 10:37