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

Posted 2023-03-29 RogerQianpeng

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