【微信小程序】webview使用、限制、扩展说明

0 说明

只是一些我自己常见的用法的整理和说明
更多用法还是请看官方文档：web-view

---

1 小程序web-view支持的页面

1、关联公众号的文章页【活动、文章、引导关注】
2、服务器配置了微信安全校验文件的网页【需要放置在域名根目录下】

---

2 小程序web-view不支持的页面

1、关联公众号的非文章页【公众号带“关注”按钮的首页（下图）】
2、未配置微信校验文件的网页【外部的一些网页】

---

3 读取参数，动态跳转页面

起跳页，传入参数

wx.navigateTo({
    
    
    url: `../webview/index?redirect=${
      
      encodeURIComponent(that.data.path) }`,
})

webview页面，读取参数

onLoad(options) {
    
    
    console.log(options)

    const redirect = options?.redirect;
    if(redirect) {
    
    
      this.setData({
    
    
        path: decodeURIComponent(redirect),
      })
    }
  },

用生成的带参数的Url Scheme跳入也可以读取到参数

如果想知道渠道来源，比如业务场景是从多个渠道通过Url Scheme跳入web-view，想知道各个渠道的流量，也可以在生成时设置不同的channel字段，然后在此处读取再落库。

---

4 从web-view跳回

在h5中，也可以调用一些wx提供的接口，比如常见的跳回带参

//h5中
wx.miniProgram.postMessage({
    
    data:'fail'})
wx.miniProgram.redirectTo({
    
    url:"/pages/index/index"})

但是，参数只会在向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的 message 事件时发送

wx提供了一些接口，但不是很多hh
具体还是请看官方文档吧

---

5 其他说明

5.1 隐藏左上角首页键

Url Scheme跳转进入时，进入的并非小程序首页，左上角会出现首页按钮，可以隐藏

onShow() {
    
    
    // 隐藏左上角返回首页按钮
    wx.hideHomeButton()
  },

官方建议是在onShow中使用

5.2 隐藏左上角返回键

从其他页面进入时，用wx.reLauch({})

5.3 获取openid、unionid

可以在onLoad中，添加一个方法一进入就调用，用wx.login以及你自己的后端服务，即可获得用户的openid、unionid