背景

由于以前的项目是公众号的 h5 版本，现在需要一个小程序版本，为了节省人力和时间，我们的做法就是直接在 webview 上指向公众号的 h5 地址，需要在小程序后台配置业务域名，小程序还提供了开发者在 webview 调用 jssdk，流程跟开发微信公众号一样方便

webview 使用 jssdk

小程序 webview 使用 jssdk 跟公众号开发一样，需要调用 config 来初始化配置，等 WeixinJSBridgeReady 事件触发后再调用对应的方法，否则程序在 js 执行立即调用会出现无效

if (typeof WeixinJSBridge == 'undefined') {
  if (document.addEventListener) {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  } else if (document.attachEvent) {
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  }
} else {
  onBridgeReady();
}

有时候我们需要单独在小程序处理一些逻辑，例如实现小程序的支付功能，小程序的跳转功能等等。可以通过以下方法来判断运行环境是否是小程序

// web-view下的页面内
function ready() {
  console.log(window.__wxjs_environment === 'miniprogram'); // true
}
if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
  document.addEventListener('WeixinJSBridgeReady', ready, false);
} else {
  ready();
}
// 或者
wx.miniProgram.getEnv(function (res) {
  console.log(res.miniprogram); // true
});

小程序和 webview 跳转

webview 跳转到小程序原生页面，使用 navigateTo 或者 redirectTo 来实现

wx.miniProgram.navigateTo({ url: '/path/to/page' });
wx.miniProgram.redirectTo({ url: '/path/to/page' });

webview 传参到小程序

webview 传参到小程序原生页面，通过url 参数来传递

wx.miniProgram.navigateTo({ url: '/path/to/page?a=1&b=2' });

然后在小程序的生命周期 onload 回调事件的 query 参数可以获取到对应的 json 对象

onLoad(query) {
  console.log(query.a);   // 1
  console.log(query.b);   // 2
}