使用mpvue開發(fā)微信小程序

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

mpvue

設(shè)計(jì)

• vue.js
• 能通過 vue-cli 提供 quick start 示例代碼

• 組件機(jī)制

  • 小程序邏輯和視圖層代碼彼此分離，公共組件提取后無法聚合為單文件入口，組件需分別在視圖層和邏輯層引入，維護(hù)性差；
  • 組件無命名空間機(jī)制，事件回調(diào)必須設(shè)置為全局函數(shù)，組件設(shè)計(jì)有命名沖突的風(fēng)險，數(shù)據(jù)封裝不強(qiáng)。
  • 開發(fā)者需要友好的代碼組織方式，通過 ES 模塊一次性導(dǎo)入；
  • 組件數(shù)據(jù)有良好的封裝

• 多端復(fù)用

  常見業(yè)務(wù)類型：

  • 通過已有 H5 產(chǎn)品改造為小程序應(yīng)用
  • 反之

  小程序

  • 小程序開發(fā)框架無法做到多端復(fù)用
• 配套設(shè)施
• mpvue-loader 提供 webpack 版本的加載器
• mpvue-webpack-target webpack 構(gòu)建目標(biāo)
• postcss-mpvue-wxss 樣式代碼轉(zhuǎn)換預(yù)處理工具
• px2rpx-loader 樣式轉(zhuǎn)化插件
• mpvue-quickstart mpvue-quickstart
• mpvue-simple 輔助 mpvue 快速開發(fā) Page / Component 級小程序頁面的工具
• 其它

設(shè)計(jì)思路

• 小程序 & vue.js 都是邏輯視圖層框架

  • 數(shù)據(jù) -> 驅(qū)動 -> 視圖變更
  • 事件 -> 響應(yīng) -> 視圖變更

• 參照 vue 編寫小程序代碼
• 小程序負(fù)責(zé)視圖層展示
• vue.js 集中業(yè)務(wù)邏輯
• vue 數(shù)據(jù)變更后同步到小程序

生命周期

不同：onReady 后觸發(fā) vue mounted

注意

限制

• 不支持 v-html
• 模板中不支持復(fù)雜的js 表達(dá)式——可使用computed

• 不支持過濾器

• 控制臺提示較少

  很多情況下不提示出錯原因

• 模板語法中不支持methods 中的方法

  • 使用 computed
  • 傳遞更改后的數(shù)據(jù)

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

  可調(diào)整為獲取數(shù)據(jù)時直接更改

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

• 所有頁面 created 生命周期函數(shù)，加載時一次執(zhí)行
  • 用 mounted 或者 onLoad 或者 onReady 代替

代碼結(jié)構(gòu)

• pages

  小程序的各個頁面

• utils

  公用的工具代碼