小程序以離線包方式下載到本地，通過微信客戶端載入和啟動

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

  公用的工具代碼