vue項目向小程序遷移調研

概述

今天調研了一下vue項目怎么向小程序遷移，有些心得，記錄下來，供以后開發時參考，相信對其他人也有用。

基本上vue項目向小程序遷移不外乎2種方法，一種是用小程序的web-view組件，另一種是用mpvue重新開發一個。第二種成本太高，所以我這里調研的基本上是第一種方法。

解決方案

對於一般項目來說，直接在小程序中給web-view組件的src填入vue項目的地址即可。但是web-view組件有如下限制：

1.web-view組件的src不能動態變化。這個限制基本可以無視，因為我們是單頁面，不需要經常改變web-view的src。但是有些特殊情況需要考慮這個限制，比如我們使用setData方法通過判斷url的參數來加載web-view的src是行不通的。

2.小程序的page中只能存在一個web-view。這個限制也可以無視，因為我們只需要一個web-view就行了。

3.web-view里面的項目，不能用window.open(xx, '_blank')，但是可以用window.open(xx, '_self')。

我們項目中有用到window.open(xx, '_blank')，所以我們需要判斷是不是小程序環境，是的話就把window.open(xx, '_blank')改成window.open(xx, '_self')。判斷方法有如下2種:

// 方法1(推薦)——要求：微信版本>=7.0.0
// 通過判斷userAgent中包含miniProgram字樣來判斷小程序web-view環境。
export function isMiniProgram() {
  return !!navigator.userAgent.match(/miniProgram/i);
}

// 方法2——無要求
// 引入微信sdk，然后用微信sdk判斷
npm install weixin-js-sdk --save

wx.miniProgram.getEnv(function(res) {
  console.log(res.miniprogram); //true
});

基本上按照上面的方法就可以使用web-view遷移vue項目到小程序中了。

其它

在調研過程中我還踩了一個其它的坑，這里也記錄下來。

1.使用微信sdk的postMessage傳的值必須是字符串，所以對於對象來說需要先用JSON.stringify處理一下。

wx.miniProgram.postMessage({ data: JSON.stringify(navigator.userAgent) });

2.web-view的bindmessage屬性可以接受postMessage傳遞過來的值，但是它只會在特定時機（小程序后退、組件銷毀、分享）才觸發。所以不能期望，馬上傳完值，web-view就能馬上接收到並做出響應。

3.官方文檔對於navigateTo的描述有誤。傳遞的值並不在options.query里面，而是就在options里面。

wx.navigateTo({
  url: 'test?id=1'
})

// test.js
Page({
  onLoad(options) {
    console.log(options.id)
  }
})