mpvue-小程序之蹲坑記

1. 不支持

• v-html
  • 小程序裏全部的 BOM／DOM 都不能用，也就是說 v-html 指令不能用
• 部分複雜的 JavaScript 渲染表達式
  • {{}} 雙花括號的部分，直接編碼到 wxml 文件中，小程序能力限制
  • 小程序支持運算
    • 三元運算
    • 算數運算
    • 邏輯判斷
    • 字符串運算 （+鏈接等）
• 過濾器
• template 中使用 methods 中的函數
• vuex mapState、mapGetters
  • vuex輔助函數mapState、mapGetters不可用
  • Vue.prototype.$store = store
    子組件可經過 this.$store 使用

2. 規範

2.1. 變量綁定

使用 vue.js 規範

<!-- 小程序 -->
<view class="tab-item {{currentTab==0 ? 'on' : ''}}" >超然haha</view>
<view  current="{{currentTab}}"  style="height:{{currentTab==1?Height+'rpx':'100%'}}">超然haha</view>

<!-- vue.js -->
<view class="tab-item" :class="{'on': currentTab==0 ? true : false}" >超然haha</view>
<view  :current="currentTab"  :style="{'height':currentTab==1 ? Height+'rpx':'100%'}">超然haha</view>

2.1. 事件處理

小程序原生事件 ---> vue.js 規範

• 列表中沒有的原生事件也可使用例如 bindregionchange 事件直接在 dom 上將 bind 改成@ @regionchange,在監聽此類事件的時候同時監聽事件名和事件類型既 <map @regionchange="functionName" @end="functionName" @begin="functionName"><map>

• 不支持組件引用時原生事件

關於修飾符

• .stop 的使用會阻止冒泡，可是同時綁定了一個非冒泡事件，會致使該元素上的 catchEventName 失效！
• .prevent 能夠直接幹掉，由於小程序裏沒有什麼默認事件，好比submit並不會跳轉頁面
• .capture 支持 1.0.9
• .self 沒有能夠判斷的標識
• .once 也不能作，由於小程序沒有 removeEventListener, 雖然能夠直接在 handleProxy 中處理，但很是的不優雅，違背了原意，暫不考慮

3. 組件

3.1. 限制

• 只能使用單文件組件（.vue 組件）的形式進行支持
  • 其餘的諸如：動態組件，自定義 render，和 <script type="text/x-template"> 字符串模版等都不支持
• 組件上定義原生事件
• v-show---》v-if
• slot
• 動態組件
• 異步組件
• inline-template
• X-Templates
• keep-alive
• transition
• class
• style

3.1.1. vuex 的支持

• vuex和以往相似，不一樣的是，小程序以多頁形式渲染，故每一個頁面都須要建立vue實例並引入相應的store模塊
• 在main.js中引入你的store, 並綁定到Vue構造函數的原型上，這樣在每一個.vue的組件均可以經過this.$store訪問store對象
• 沒法使用它的輔助函數 mapState、 mapGetters、 mapActions、 mapMutations 等
  • 用最原始的 store.commit()、 store.getter

3.2. 小程序組件使用

• 原生組件的事件綁定需用vue語法

4. 參數獲取

• page onLoad 時候傳遞的 options
  • this.$root.$mp.query
  • 也能夠經過 onLoad 方法
• app onLaunch/onShow 的參數
  • this.$root.$mp.appOptions

5. 生命週期問題

mpvue 是兼容微信小程序的生命週期與 vue 的生命週期，vue 實例會接管小程序 Page 實例的生命鉤子，所以須要使用到小程序的生命週期鉤子時，可將相應的鉤子方法定義在 vue 實例中
如定義當前Page的分享標題內容圖片：

new Vue({
  data () {
    return {
      score: ''
    }
  },
  onShareAppMessage (res) {
    return {
      title: '我得到 ' + this.score + ' 分，快來一塊兒掌握基礎音階知識吧！',
      path: '/pages/index/index',
      imageUrl: 'https://wechat.dddog.com.cn/static/wescale.jpg'
    }
  }
})

小程序踩坑記

1. 組件

input, map, canvas, video, live-player,camera , textarea 是由客戶端建立的原生組件，層級最高，z-index 沒用
而其它組件都是基於Web Component規範實現的Custom Element，而諸如picker彈出選擇器行爲，navigator跳轉行爲，都是基於微信原生提供的能力，理解爲調用wx.xxxApi

微信小程序的組件是否都是原生實現的，相似React Native？
No，小程序視圖層仍然依賴於Webview，只有部分組件是原生組件，用來解決Mobile Web體驗問題。目前原生組件包括：
input，textarea，video，map，canvas

• tip: input 組件是一個 native 組件，字體是系統字體，因此沒法設置 font-family；
• tip: textarea 組件是由客戶端建立的原生組件，它的層級是最高的。
• tip: video 組件是由客戶端建立的原生組件，它的層級是最高的。
• tip: map 組件是由客戶端建立的原生組件，它的層級是最高的。
• tip: canvas 組件是由客戶端建立的原生組件，它的層級是最高的。

2. 頁面層級

小程序頁面跳轉打開最多五層，超出五層不會跳轉了

3. 組件名

mpvue 組件名大寫會提示，統一小寫，警告信息以下：

4. 圖片路徑

微信小程序不支持本地引用背景圖片（image 標籤支持本地圖片）、音頻、視頻，因此須要外鏈。對於圖片還可使用 Base64 編碼，直接在 html 或 css 中引用

• 相對路徑圖片不顯示
  <img src="../../images/logo.png">

  • 解決方案：

    • 把路徑 import 進來，或把圖片放在 static 目錄下

• background-image

  背景圖在真機沒法顯示
  • 解決方案
    • 外鏈

    • base64 編碼

      background-image: url('轉換後的編碼')
      
      <!-- 若是屢次引用可將其設爲全局變量，在js文件引用 -->

    • 使用 image 組件，去掉背景圖（可使用相對路徑）

5. wx.request post 方法失敗

• wx.request post 方法參數傳輸失敗

  wx.request post 的 content-type 默認爲 application/json
  若是服務器沒有用到 json 解析，能夠更改 content-type 爲 urlencoded

  wx.request({
    ...
    method: 'post',
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    ...
  })

6. 冷啓動

小程序的機制，是在退出五分鐘內進入，就會顯示的是退出前的頁面，若是你但願進入小程序都至關於冷啓動的方式，直接進入主頁面。你能夠在page的onUnload裏面裏面set一個值，而後在app的onShow的時候判斷這個值，而後決定是否跳到首頁~

7. 錄音管理相關

7.1 onPause

錄音暫停事件

監聽狀況：

• pause 事件--手動

不能監聽：

• 天然播放結束
• stop 事件--手動

7.2. 小程序實現語音流式識別

見博文-目前未更新： mp - Voice stream processing

8. 視頻相關

--待續

9. 地圖相關

地圖上覆蓋層——可實現
組件支持：

• cover-view & cover-image
• 其餘部分組件在開發工具上支持，真機上不顯示

事件支持：

• tap
• touch
• 不支持 touchmove，touchend
• 不會冒泡到 map組件

工具相關

1. 開發工具

1.1. 調試與非調試模式

假如工具內開啓不校驗域名選項
此時，調試模式下，能夠不校驗域名問題；http或者不合規範的請求地址將被容許，好比帶有端口的地址（正常狀況下url是不容許帶端口的）

主要用途：

• 使用本地服務
• 使用未配置的域名
• 使用非 https 域名
• 在域名不合規範時，使用必須appid纔可使用的部分調試

1.2. 真機預覽問題

• 調試模式下可用，而非調試模式下不可用的狀況：
  • 檢查下是否沒有配置好合法域名
  • 假如配置好了域名，排查https問題
• request fail 問題排查
  • 後臺域名沒有配置配置完畢請點擊刷新按鈕
  • 重啓開發者工具，檢查配置信息是否更新

  • 域名沒有備案或或是備案後不足24小時；備案未生效
    

  • ssl 協議有問題
    

• 同時測試ios和安卓，假若有一方能夠，一方不行，則是證書問題，請選用受承認的證書

其餘可參考：https 解決方案

2. 第三方 UI 庫

字體/第三方UI庫引用不支持

@font-face {
  font-family: '字體名稱';
  src: url("../../resources/font/UKIJTuzTom.eot");
  font-weight: normal;
  font-style: normal;
}

微信小程序 @font-face 裏 添加url地址沒用， 因此 URL地址替換掉 base64 編嗎實現

• 先外部字體準備好
• http://transfonter.org/ 網站裏 上傳字體，選擇base64 編嗎 ，fotmat後下載
• 下載包裏有個 style文件 打開後 代碼能夠添加到WXSS裏
  

3. wxcharts

基於canvas 繪製，體積小巧

因爲微信小程序自己框架的限制，很難集成目前已有的圖表工具，顯示圖表目前有兩種方案：

• 服務器端渲染圖表，輸出圖片，微信小程序中直接顯示渲染好的圖片
  • 須要後臺有一套渲染服務，而且有必定的網絡開銷
• 微信小程序API中提供了canvas的支持，利用canvas自行繪製圖表

wxcharts 採用第二種方案
如何使用

• 直接引用編譯好的文件 dist/wxcharts.js 或者 dist/wxcharts-min.js

• 自行編譯

git clone https://github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup -c 或者 rollup --config rollup.config.prod.js

微信小程序圖表工具