使用mpvue开发微信小程序

2022-04-21 管理员

小程序以离线包方式下载到本地，通过微信客户端载入和启动

mpvue

设计

vue.js
能通过 vue-cli 提供 quick start 示例代码
组件机制
- 小程序逻辑和视图层代码彼此分离，公共组件提取后无法聚合为单文件入口，组件需分别在视图层和逻辑层引入，维护性差；
- 组件无命名空间机制，事件回调必须设置为全局函数，组件设计有命名冲突的风险，数据封装不强。
- 开发者需要友好的代码组织方式，通过 ES 模块一次性导入；
- 组件数据有良好的封装
多端复用

常见业务类型：
- 通过已有 H5 产品改造为小程序应用
- 反之
小程序
- 小程序开发框架无法做到多端复用
配套设施
mpvue-loader 提供 webpack 版本的加载器
mpvue-webpack-target webpack 构建目标
postcss-mpvue-wxss 样式代码转换预处理工具
px2rpx-loader 样式转化插件
mpvue-quickstart mpvue-quickstart
mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具
其它

设计思路

小程序 & vue.js 都是逻辑视图层框架
- 数据 -> 驱动 -> 视图变更
- 事件 -> 响应 -> 视图变更

参照 vue 编写小程序代码
小程序负责视图层展示
vue.js 集中业务逻辑
vue 数据变更后同步到小程序

生命周期

不同：onReady 后触发 vue mounted

注意

限制

不支持 v-html
模板中不支持复杂的js 表达式——可使用computed
不支持过滤器
控制台提示较少

很多情况下不提示出错原因

模板语法中不支持methods 中的方法

使用 computed
传递更改后的数据

<template>
      <view v-for="item in costList" >
            
      </view>
  </template>

  <script>
  export default {
  data(){
      return{
          costList:[]
      }
  },
  methods: {
      formatCost(item){
          return item.toFixed(2)
      },
      getData(){
          let arr = [3.255,4.1,5,15]
          this.costList = arr
      }
  }
  </script>

可调整为获取数据时直接更改

getData(){
      let arr = [3.255,4.1,5,15]
      // 遍历数组里面的元素,然后格式化一下,添加到 costList里去
      arr.map(item => {
          this.costList.push = this.formatCost(item)
      })
  }