mpvue開發小程序(三)官方推薦以及開發遇到的問題

一,官方推薦

前面的fly.js也是官方推薦的

mpvue-weui    ui庫,相當方便輕量好使
mpvue-toast  一個基於mpvue的簡單彈窗組件
因爲mpvue目前還不支持全局的組件,所以沒有辦法像vue組件引入一次就能在所有頁面使用,但是mpvue團隊已經在考慮新增全局組件功能了
sass  不多介紹
全局安裝:npm install sass-loader node-sass --save-dev
在style節點加上lang=”scss”,這樣就可以愉快地使用sass進行開發了
mpvue-router-patch   在mpvue 中使用 vue-router 兼容的路由寫法

mpvue-echarts    適用於 Mpvue 的 ECharts 組件

二,mpvue開發中遇到的問題

1.路由跳轉
vue中 使用 vue-router 來進行路由跳轉的。mpvue中只需要用 a 標籤就行了。
<a href="/page/counter/main?text=123">
同時也可以使用小程序自身提供的api完成頁面跳轉
wx.navigateTo({
   url: `/pages/counter/main?text=${this.text}`
 });
或者引入mpvue-router-patach,以便在mpvue小程序中能使用vue-router的寫法
2.created生命週期
created是vue的生命週期在mpvue裏所有頁面的created函數會在項目加載的時候被一起調用,可用性不大,可以使用onShow()代替,但是onShow()只有在隱藏又顯示後纔會顯示,也就是第一次加載不會執行
3.新增頁面需要npm run dev重啓一下。
4.模板語法
小程序裏所有的 BOM/DOM 都不能用,也就是說v-html指令不能用。
5.生命週期
支持vue.js的生命週期部分,並且兼容了小程序的生命週期。
6.不支持部分複雜的 JavaScript 渲染表達式
mpvue會把 template 中的 {{}} 雙花括號的部分,直接編碼到 wxml 文件中,由於微信小程序的能力限制(數據綁定),所以無法支持複雜的 JavaScript 表達式
目前可以使用的有+ - * % ?: ! == === > < [] .。
不支持{{}}裏寫函數並傳值的寫法,需要注意。
7.Class 與 Style 綁定
基本全支持,不支持classObj和styleObj形式,
8.條件渲染、列表渲染、計算屬性全支持
9.組件
  暫不支持在組件引用時,在組件上定義 click 等原生事件、v-show(可用 v-if 代替)和 class style 等樣式屬性(例:<card class="class-name"> </card> 樣式是不會生效的)
  支持小程序原生組件,原生組件上的事件綁定,需要以 vue 的事件綁定語法來綁定,如 bindchange="eventName" 事件,需要寫成 @change="eventName",例如:
10.
模板中的img標籤url指向相對路徑時不能正確解析例如:
<img src="~assets/images/home/header.png" />
<img src="./assets/images/home/header.png" />
暫時的解決方法是可以將靜態資源放入static文件夾中,然後img標籤用絕對路徑引入:
<img src="/static/images/home/header.png" />
帶來的副作用是不能享受url-loader的處理(小圖片轉base64)。
另外,css中卻是可以通過相對路徑引入圖片的,例如:
.icon {    background-image: url(‘./assets/images/home/header.png‘);}
11.
通過this.$root.$mp.query進行獲取小程序在 page onLoad 時候傳遞的 options。通過this.$root.$mp.appOptions進行獲取小程序在 app onLaunch/onShow 時候傳遞的 options。
使用this.$root.$mp.query獲取參數需要在monted中獲取,在created中會報Cannot read property 'query' of undefined 。
12.
引入echarts 打包後文件過大
項目中需要引入echarts,直接引入後,打包完體積超過 2M了,沒辦法提交。echarts提供的有精簡版本,我們可以導入精簡的版本。
import echarts from "echarts/dist/echarts.simple.min";
import mpvueEcharts from "mpvue-echarts";
具體的 echarts 使用,請看文檔,有詳細的介紹。

mpvue開發小程序(四)項目展示與細節

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章