小程序框架mpvue中的坑

背景

    因爲公司要用剛小程序開發箇舊項目。歷時一個月，來講說遇到的坑吧。

用到的技術

• mpvue
• vant(weapp)

一、關於ui框架weapp的引入

    

• a、下載vant靜態文件，再從app.json配置。
• b、 npm 下載 vant 模塊，再從app.json配置。 看官網連接官網教程。

二、app.json

• 這至關於微信的配置文件，裏面可設置增長頁面，插件(例如weapp組件的引入)，增長了頁面後，每次都要npm run dev，否則不生效。

三、mpvue,沒有路由這個概念。

• 若要使用，請裝mpvue-router-patch，這個插件。
• router.push({ path: '/pages/news/list', reLaunch: true }),只能跳轉7次(或者5次，具體忘了)，可改用$router.replace(但此項不支持微信原生的tab的跳轉。)

四、v-html 無效

• html內想解析'<p>213</p>'字符串標籤,用v-html，無效。
• 解決方法：利用mpvue-wxparse這個插件。

五、dom問題

• 小程序內沒有dom的概念，全部使用到dom的插件都報錯。querySelector,$refs這些都不能夠。。

六、父子組件傳值問題

• 父->子，props傳值，子組件的html內渲染時能拿到這個值。
• 在onShow(),mounted()方法內是拿不到的，在methods的方法內能夠拿到。（生命週期問題）
• 解決方法：vuex,watch這個參數。

七、textarea問題

• 這個是真的操了蛋，textarea內設置了placeholder屬性，這個層級是最高的，有彈窗的話，會覆蓋這個彈窗。以下圖，z-index怎麼設置都是無效的。

  

• 解決方法：彈窗打開時隱藏這個textarea,關閉時顯示這個textarea。

八、圖片問題

一、wx.chooseImage

• 若是是多圖片上傳，數組操做用.push()沒法展示。
• 用array.concat()解決。

二、須要圖片根據源文件寬度大小時，在img標籤上加上mode='widthFix'。 三、加載本地圖片須要放在static目錄下，wx.previewImage沒法預覽本地圖片，哎、

九、圖片懶加載

• vue-lazyload 這貨不支持。
• mpvue-img-load用着個。

---

十、關於web-view

• 只要頁面引入了web-view，全部其它html頁面都是無效的。
• 頭部只會出現微信自帶的組件navigation,可配置背景顏色...

十一、分包

• mpvue分包

十二、cookies

• 小程序不支持 cookies,請用插件weapp-cookie

1三、有時候雙向綁定失效

• this.$set(this.imgList, this.imgList) 從新set一下

1三、computed問題

• mpuve 不支持computed閉包的傳參寫法，return不回去。

1四、scss環境問題之sass-loader

• 最近試着搭小程序mpvue模板環境，發現mpvue不支持高版本的sass-loader真tm坑。

npm uninstall sass-loader -D（個人是8.0）

        npm install sass-loader@7.3.1 --save-dev
複製代碼

1五、 scss全局文件的配置

一、安裝sass-resources-loader

npm sass-resources-loader -D
複製代碼

二、配置build/utils.js

2-一、 在cssLoaders 方法內新增

var sassResourceLoader = {
    loader: 'sass-resources-loader',
    options: {
      resources: [
        //修改相應路徑
        path.resolve(__dirname, '../src/scss/entrance.scss'),
      ]
    }
  }
複製代碼

2-二、 在generateLoaders方法內新增

// 使用sass-loader時，添加sassResouceLoader
    if ('sass' === loader) {
      loaders.push(sassResourceLoader)
    }
複製代碼

我也剛剛入手，若有問題，歡迎指出。