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

发布于 1周前 作者 sinazl 来自 Uni-App

uni-app欢迎大家参与快应用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

  • 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
  1. 编译快应用 rpk
npm run dev:quickapp-native
  1. 开启debug在线更新服务
npm run serve:quickapp-native
  1. 打开快应用调试器，扫码安装或右上角设置服务器地址(注意带上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`
  1. 编译 (输出目录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

Harmonyos Next教程
1 回复

针对uni-app参与快应用vue原生渲染模式的适配共研，以下是一个基础的代码案例，展示如何在uni-app项目中初步配置和适配快应用的vue原生渲染模式。请注意，这只是一个简单的示例，实际项目中可能需要根据具体需求进行更多的配置和优化。

1. 创建uni-app项目

首先，确保你已经安装了HBuilderX或者其他支持uni-app开发的IDE。然后创建一个新的uni-app项目。

# 使用HBuilderX创建项目，或者在命令行中使用uni-app CLI
vue create -p dcloudio/uni-preset-vue my-uni-app
cd my-uni-app

2. 配置manifest.json

在manifest.json文件中，配置快应用的相关信息，并开启vue原生渲染模式。

{
  "mp-weixin": {},
  "quickapp": {
    "appid": "__UNI__XXXXXXX", // 替换为你的快应用ID
    "usingComponents": true,
    "vueMode": "native" // 开启vue原生渲染模式
  }
}

3. 编写页面代码

在pages/index/index.vue中，编写一个简单的页面，以验证vue原生渲染模式的适配。

<template>
  <view class="content">
    <text>{{ message }}</text>
    <button @click="changeMessage">点击我</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app with QuickApp native vue mode!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed!';
    }
  }
};
</script>

<style scoped>
.content {
  padding: 20px;
}
button {
  margin-top: 20px;
}
</style>

4. 编译和运行

在HBuilderX中，选择“发行” -> “小程序-快应用”，然后点击“运行到快应用模拟器”或者“上传”。确保你已经安装了快应用开发工具，并配置了快应用模拟器。

注意事项

  • 兼容性：vue原生渲染模式在快应用中可能有一些兼容性问题，需要特别注意组件和API的使用。
  • 性能优化：在原生渲染模式下，可能需要针对性能进行更多的优化，比如减少不必要的DOM操作、使用高效的渲染算法等。
  • 调试和测试：在开发过程中，充分利用快应用提供的调试工具和日志输出，以便及时发现和解决问题。

以上就是一个简单的uni-app参与快应用vue原生渲染模式适配的基础代码案例。希望对你有所帮助！

回到顶部