微信小程序纯嵌入Vue页面

效果图

小程序嵌入vue.gif

小程序加载链接

微信嵌入链接代码相当简单
1、index.wxml加载一个web-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代码就好了。后面这套代码还能嵌入支付宝小程序等哦，封装思路基本不变。