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

  • Z时代
  • 2024-01-10
  • 分类：综合

uni-app的简单介绍

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app 使用 vue 的语法 + 小程序的标签和 API。

开发规范
为了实现多端兼容，综合考虑编译速度，运行性能等因素，uni-app 约定了如下开发规范：

  1. 页面文件向导 Vue单文件组件（SFC）规范
  2. 组件标签靠近小程序规范，详见 uni-app 组件规范
  3. 互连能力（JS API）靠近微信小程序规范，但需要将 wx替换为 uni，详见 uni-app 接口规范
    数据绑定及事件处理同 Vue.js 规范，同时补充了 App 和页面的生命周期
  4. 为兼容多端运行，建议使用 flex 布局进行开发

目录结构

一个 uni-app 工程，默认包含如下目录及文件：

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─wxcomponents          存放小程序组件的目录，详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

目前我是采用vuex做全局变量管理，沿用小程序原生的路由跳转

---------以下是混合开发的分割线---------

混合开发

官方文档
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，无法使用微信小程序的全局变量

  1. 微信主程序 app.js
  // 定义全局变量text
  globalData: {
    text: 6
  }
  1. uni-app项目 App.vue
// 定义同名全局变量text,这一步可省略
<script>
    export default {
      globalData: {
        text: 0
      }
    }
</script>
  1. uni-app项目 index.vue (或任意一个功能页面)
<template>
  <view>
    <view>改变小程序主包全局变量 <button @click="setText">text ：{{text}}</button> </view>
  </view>

</template>

 setText () {
    getApp().globalData.text++ // 全局变量递增
    this.text = getApp().globalData.text // 全局变量的值在页面显示
  }

此处的getApp().globalData.text会读取到主程序的全局变量值，进行操作，text变量从6开始递增

全局方法通信

要解决的问题：uni-app项目调用微信小程序app.js 定义的方法

  1. 微信主程序 app.js
// app.js
App({
  useMainFun () {
    console.log('useMainFun主包') // 这个方法不会被执行
  },
  globalData: {
    useMainFun () {
      console.log('真正的主包') // 执行这个方法
    }
  }
})

  1. uni-app项目 App.vue

    <script>
     export default {
       globalData: {
         useMainFun() {
           // 使用主包的方法,如果微信小程序有同名方法，这个会被覆盖
           console.log('使用主包的方法uni-app')
         }
       }
     }
    </script>
  2. uni-app项目 index.vue (或任意一个功能页面)
<button @click="useMainFun">使用主包的方法</button>
 useMainFun () {
    getApp().globalData.useMainFun()
  }

uni.app 的页面就可以调用小程序主包的方法了

以上是 uni-app混合开发---以微信小程序为例 的全部内容， 来源链接： utcz.com/z/267804.html

回到顶部