uni-app混合开发---以微信小程序为例

官方文档
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 的页面就可以调用小程序主包的方法了