怎么使用mpvue開發微信小程序

本篇內容介紹了“怎么使用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 中的方法

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

• 使用 computed

• 傳遞更改后的數據

• 所有頁面 created 生命周期函數，加載時一次執行

• 用 mounted 或者 onLoad 或者 onReady 代替

代碼結構

• pages

  小程序的各個頁面

• utils

  公用的工具代碼

“怎么使用mpvue開發微信小程序”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！