使用mpvue开发微信小程序

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

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)
        })
    }

• 所有页面 created 生命周期函数，加载时一次执行
  • 用 mounted 或者 onLoad 或者 onReady 代替

代码结构

• pages

  小程序的各个页面

• utils

  公用的工具代码