效果圖

小程式載入連結

微信嵌入連結程式碼相當簡單
1、index.wxml載入一個web-view元件，動態繫結地址

<!--index.wxml-->
<view class="container">
  <web-view src="{{ webSrc }}"></web-view>
</view>

2、js中動態修改載入的地址，這是為了後面分享什麼用，其實也可以直接寫上鍊接

// index.js

Page({
  data: {
    webSrc: ''
  },
  onLoad(options) {
    let url = 'https://xcx.lycyll.com/#/index?m_p_f_p=1'

    this.setData({
      webSrc: url
    })
  }
})
 

趕緊試試吧，是不是發現頁面隨著路由切換，沒有提供返回按鈕，雖然可以用系統的返回事件，但是沒有返回按鈕覺得很奇怪。

擴充套件vue路由，適配小程式

1、因為有分享等操作，導致我們沒法固定認為某個頁面是第一個頁面，我們需要微信小程式onload函式內識別當前是否為小程式開啟的第一個頁面，並使用引數的方式傳給vue（m_p_f_p為1，代表第一個頁面），onload函式修改如下：

  onLoad(options) {
    let url = options.url;
    if (url) {

      url = decodeURIComponent(url)
      let pages = getCurrentPages();
      if (pages.length == 1) {
        if (url.indexOf('?') > -1) {
          url = url + '&m_p_f_p=1'
        } else {
          url = url + '?m_p_f_p=1'
        }
      }
    } else {
      url = 'https://xcx.lycyll.com/#/index?m_p_f_p=1'
    }
    this.setData({
      webSrc: url
    })
  }
 

2、router擴充套件，識別引數。

// 用到的基礎函式
function GetQueryString(name) {
  let reg = new RegExp('([?]|&)' + name + "=([^&]*)(&|$)");
  let r =  window.location.href.substr(1).match(reg);
  if (r != null) {
    return decodeURIComponent(r[2]);
  }
  return '';
}

// 放在函式覆蓋，擴充套件物件處理
let router = Object.create(orgin)
router.m_p_f_p = 0
if (GetQueryString('m_p_f_p') == 1) {
  router.m_p_f_p = 1
}
 

3、擴充套件router.push函式，讓第一個頁面的時候，呼叫小程式跳轉頁面函式。其他情況呼叫原來的push函式。

router.push = function () {

  if (router.m_p_f_p == 1) {

    let webUrl = ''
    let location = arguments[0];
    if (typeof location == 'string') {
      let path = basePath + location;

      webUrl = path;
    } else {
      // 獲取路徑，有的頁面用的name跳轉
      let path = router.getPathWithRoute(location);
      // 獲取引數
      let args = router.getArgsWithRoute(location);
      // 拼接引數
      let arr = [];
      for(let key  in args){
        arr.push(`${key}=${args[key]}`);
      }

      if (path.indexOf('?') > -1) {
        path + '&' + arr.join('&')
      } else {
        path + '?' + arr.join('&')
      }

      path = basePath + path;

      webUrl = path;
    }

    // 如果是微信小程式，呼叫微信的navigateTo，mpWxFunc封裝了微信相關的函式
    if (browserEnv.checkEnvType(browserEnv.enum.WX_MINIPROGRAM)) {
      mpWxFunc.navigateTo(webUrl);
      return ;
    }
  }
  // 其他情況使用原型上的push函式
  router.__proto__.push.call(this, ...arguments)
};

4、go函式需要相反處理，如果最後一個頁面了，需要呼叫小程式的返回，或者返回頁面大於當前棧裡面頁面數，也直接返回

router.go = function (n) {
  // 判斷最後一個頁面，或者返回數大於當前頁面棧。customRouterData是前面為了動畫擴充套件的。
  if (router.customRouterData.history && (router.customRouterData.history.length <= -n)) {
    // 判斷是微信小程式
    if (browserEnv.checkEnvType(browserEnv.enum.WX_MINIPROGRAM)) {
      mpWxFunc.navigateBack()
      return ;
    }
  }

  router.__proto__.go.call(this, n)
}

到這裡就基本完成了，前端開發只需要一心去寫vue程式碼就好了。後面這套程式碼還能嵌入支付寶小程式等哦，封裝思路基本不變。