小程序内嵌webview

背景

由于以前的项目是公众号的 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
}