小程序内嵌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
}

目录

评论

*
*

正在加载验证码......

最新评论

  • 无评论