乐趣区

关于uni-app:uniapp混合开发以微信小程序为例

官网文档
uni-app 全局变量的几种实现形式:http://ask.dcloud.net.cn/arti…
uni-app 反对混合开发。详见:https://uniapp.dcloud.io/hybrid
重点中央

次要应用计划三:原生开发的小程序仍保留,局部新性能应用 uni-app 开发。

新建 uni-app 我的项目

我的项目全局变量引入 vuex

  1. vue create -p dcloudio/uni-preset-vue my-project
    
  2. 装置 vuex
    npm i install vuex --save
  3. 页面引入 vuex,和惯例 vue 我的项目统一
  4. 新建页面,page.json 写门路
  5. 混合开发打包

    npm run build:mp-weixin -- --subpackage=sub1

    6.dist 文件夹内找到打包后的 sub1 的文件夹

新建一个小程序

  1. 新建一个文件夹,放入刚刚 sub1 的文件夹的文件
  2. app.json 写入 subpackages, 补充完 sub1 的页面门路

全局变量通信

uni-app 我的项目是用的 vuex,无奈应用微信小程序的全局变量
要在 App.vue 里定义和小程序同样的变量名,就能够读取到主程序的全局变量
App.vue

index.vue

 setText () {getApp().globalData.text++
    this.text = getApp().globalData.text}

此处的 getApp().globalData.text 会读取到主程序的全局变量,进行操作

全局办法通信

uni-app 我的项目调用微信小程序 app.js 定义的办法
在小程序里

uni-app

 useMainFun () {getApp().globalData.useMainFun()}

uni.app 的页面就能够调用小程序主包的办法了

退出移动版