mpvue的入門

奔三路學習網移動版

• 首頁
• vue面試通
• 前端面試通
• 大前端知識
• 挨踢職場
• 找前端工作

 搜索

主頁 > vue面試通 > 開源框架 >

mpvue菜鳥踩坑吃雞篇一

時間:2018-04-25 11:46  來源:未知   作者:admin   點擊:2811次

這個mpvue大大安裝大家肯定都沒問題的。

但安裝預覽的時候，不是用瀏覽器打開輸入：localhost:8080。

而是打開微信開發者工具，把項目根目錄導入進去。

坑一：不支持ElmentUI和Vue-router

不支持ElmentUI和諸如類似框架，窮開心的少年們，以爲是把之前vue項目直接移入即可，同步生成小程序。

哦買噶，不惜這樣啊！

包括Vue-Router我滴個神呀，也是要改爲a標籤然後寫熟悉的微信小程序路徑。

不過呢，就是可以寫基礎的vue和腳本比直接寫view要來的爽。

讓我先吹吹風外面涼快一會。

坑二：eslint連vue和js後綴文件都有嚴格校驗

二話不說，直接找到build目錄的webpack.base.conf.js把器rule註釋掉。

 // {

      //   test: /\.(js|vue)$/,

      //   loader: 'eslint-loader',

      //   enforce: 'pre',

      //   include: [resolve('src'), resolve('test')],

      //   options: {

      //     formatter: require('eslint-friendly-formatter')

      //   }

      // },

註釋我吧，否則你沒中飯吃

哈哈，坑終歸是要填的，誰叫我寫vue兩三年了呢。

因爲發ajax請求需要使用微信小程序裏的wx.request這種api，不兼容得改一下。

4，css有一些hack報錯得改一下。

5，腳手架目錄結構不一樣，需要手工調整一下。

6，初始化組件的方式不一致，需要簡單的修改下，入口必須放到page裏，之前我們的入口也是components。

7，最坑的是有這麼一個bug，搞了我好久：components引用大小寫導致組件失效 · Issue #9 · Meituan-Dianping/mpvue

8，靜態資源的限制，屬於小程序的，所以這裏需要對靜態資源，比如圖片，font字體做一些特殊的webpack配置，這不屬於mpvue的問題，自己配置下解決就好了。

9，項目是ts寫的，自己加個loader就好。

其他的不涉及DOM，BOM的，該刪的也要刪一會，整體轉了有3，4個小時吧，以上這些問題。最後效果還是不錯的，幫team的趟一下坑。

總結一下，mpvue對組件的轉換支持真的很棒，只要注意了文檔和我上面說的幾點，稍加改造一個vue應用轉小程序就實現了。

大坑三.Cannot assign to read only property 'exports' of object '#<Object>' 編譯報錯

這是因爲引用第三方插件的時候,帶入了module.exports的寫法,webpack可以使用require和export ，但是不能混合使用import 和module.exports,你需要做的是更新根目錄下的.babelrc文件配置

vue引入插件Cannot assign to read only property 'exports' of object

{
    "presets": [
        ["env", {
            "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ],
    "plugins": [
        ["transform-runtime", {
            "polyfill": false,
            "regenerator": true
        }]
    ],
    "env": {
        "test": {
            "presets": ["env", "stage-2"],
            "plugins": ["istanbul"]
        }
    }
}

大坑四.掛載在Vue.prototype上的屬性，在模板語法裏面是undefined，必須經過computed計算過一下才能用。via@noahlam

import config from './config'
Vue.prototype.$serverPath = config.serverPath

在頁面中這樣使用

<img :src="$serverPath + 'logo.png'" />

編譯之後會變成這樣的情況

<image src="undefinedlogo.png" ></image>

你需要做的是,在每個使用的頁面computed裏面返回this.$serverPath

大坑五.相對路徑的圖片不顯示,比如

<img src="../../images/LOGO.png">

解決是:把路徑import進來,或者是把圖片放在static目錄下引用,然而作爲css background-image引用時,只能選擇引用遠程圖片,或者相對目錄小於8k(webpck配置有關)的圖片,不然編譯器會報錯

<template>
    <div>
        <div class="test"></div>
        <img :src="imgUrl">
    </div>
</template>

<style>
.test{
    width: 48rpx;
    height: 48rpx;
    background-image: url("../../img/a.png");
}
</style>

<script>
import imgUrl from '@/img/a.png'

export default {
    data() {
        return {
            imgUrl
    }
}
</script>

大坑六.子組件數據檢測的問題

比如我在某個頁面引用了這樣的一個組件,綁定數據myOrderList,同時我引入了vuex來做狀態管理,管理myOrderList對象

### A頁面中
 <order :isEnd="isEnd" :orderList="myOrderList"></order>
 
### B頁面中更新"myOrderList"對象

this.$store.commit('updateList', {data: this.orderList});

當A頁面再次顯示的時候,子組件的數據流沒有更新,打印myOrderList對象都有更新.我的解決辦法是,先把myOrderList賦值爲空,然後再次賦值store.state中的對象,問題就解決了.估計是mpvue的數據檢測機制有問題,說得不對的地方希望大佬們斧正.

大坑七.原生組件引入的問題,參考在mpvue 使用 echarts 小程序組件,官方的文檔已經很詳細了,我這邊說幾個要點:

• ready 爲異步獲取數據。
• 爲 init 添加接收 options 傳參
• page目錄下main.js需要添加 usingComponents: {'ec-canvas': '../../../static/ec-canvas/ec-canvas'}
• 需要放在static目錄下

第一條和第二條尤爲重要,大家切記

常見問題

如果這篇文檔沒找到您想要的內容，請到 mpvue/issues 進行查找。

vue-router 支持嗎？

路由是不能支持的，因爲小程序無法動態的插入和控制節點，幾乎無法實現。而且小程序對頁面的切換性能做了很多優化，頁面切換體驗也好了很多，所以使用 vue-router 也不那麼必要

爲什麼我新增了頁面，沒有反應？

因爲 webpack 編譯的文件使用配置的 entry 決定的，新增的頁面並沒用添加進 entry，所以需要手動 npm run dev 一下，考慮不是高頻操作，所以還可以忍受

能不能引用第三方的 UI 庫？

原理上是可以的，但是要去掉 Dom 和 Bom 相關的 API 操作，還要去掉 mpvue 不支持的一些 vue 特性，小程序不支持的 css 選擇器等，去掉這些就可以使用了，歡迎大家貢獻 mpvue 的 UI 組件庫。

能否使用 echarts 等小程序原生組件？

可以，可以看下demo

如何獲取小程序在 page onLoad 時候傳遞的 options

在所有 頁面 的組件內可以通過 this.$root.$mp.query 進行獲取。

如何獲取小程序在 app onLaunch/onShow 時候傳遞的 options

在所有的組件內可以通過 this.$root.$mp.appOptions 進行獲取。

如何捕獲 app 的 onError

由於 onError 並不是完整意義的生命週期，所以只提供一個捕獲錯誤的方法，在 app 的根組件上添加名爲 onError 的回調函數即可。如下：

export default {
   // 只有 app 纔會有 onLaunch 的生命週期
   onLaunch () {
       // ...
   },

   // 捕獲 app error
   onError (err) {
       console.log(err)
   }
}

(責任編輯：admin)

• 上一篇：記一次mpvue-loader源碼探究
• 下一篇：vue瀑布流滾動組件vue-virtual-collection

最近關注

• vue技術分享-你可能不知道的7個祕
• mpvue菜鳥踩坑吃雞篇一
• Mand Mobile由滴滴開源，一個基於
• VuePress一個全新的靜態網站生成器
• 中文vue前端組件資源

熱點內容

• Mpvue一個基於Vue的微信小程序前端
• mpvue菜鳥踩坑吃雞篇一
• VuePress一個全新的靜態網站生成器
• VUE-BAIDU-MAP,基於 VUE 2.x 的百度地圖
• Vant--有贊移動端 Vue 組件庫

 

關注奔三路小程序，方便你我他

Copyright © 2015-2017 bslxx.com  粵ICP備15056892號-1