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

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

  公用的工具代码