课程推荐：前端开发工程师--学习猿地精品课程

背景
有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢?
实例效果
掘金不支持gif图,完整实例效果
前提条件

该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定关联
使用小程序开放能力web-view实现跳转(承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用)

web-view提供了一个src属性,这个src属性就是可以从小程序跳转到指定链接的地止
注意
使用webview时,需要单独的在小程序中创建一个页面,要在app.json中的pages中注册,如下所示,然后在webview中的wxml中使用webview标签,在webview标签上设置的src属性就是要跳转的地止
{
"pages": [
"pages/webview/webview"
]
}

复制代码
在触发事件处:绑定事件

点击跳转到itclanCoder公众号


点击跳转到https://coder.itclan.cn/网站


复制代码
以下是逻辑代码
// pages/handletowebview/handletowebview.js
Page({
/**

• 页面的初始数据
  */
  data: {},

  /**

• 生命周期函数--监听页面加载
  */
  onLoad: function(options) {},

  handleToWxPublic() {
  const url = 'https://mp.weixin.qq.com/s/EgSgGqMWoV4nrt7qPF9nzA'; // 跳转的地止,这里写你想要跳转的公众号地止即可
  const navtitle = 'itclanCoder'; // 小程序跳转到公众号页面显示的标题
  wx.navigateTo({
  // 跳转到webview页面
  url: /pages/webview/webview?url=${url}&nav=${navtitle},
  });
  },

  handleToWebSite() {
  const url = 'https://coder.itclan.cn/'; // 跳转的外链
  const navtitle = 'itclanCoder'; // 这个标题是你自己可以设置的
  wx.navigateTo({
  // 跳转到webview页面
  url: /pages/webview/webview?url=${url}&nav=${navtitle},
  });
  },
  });
  复制代码
  上面示例代码中的跳转的参数url,nav在另一个页面webview中的onLoad生命周期函数中的options参数中可以接收得到,重新赋新值即可
  在webview页面中,示例代码如下所示

  
  
  
  复制代码
  webview的逻辑页面
  // pages/webview/webview.js
  Page({
  /**

• 页面的初始数据
  */
  data: {
  url: '', // 页面中需要的数据
  },

  /**

• 生命周期函数--监听页面加载
  */
  onLoad: function(options) {
  this.setData({
  url: options.url, // 从跳转页面中传过来的url在options中可以拿到
  });
  wx.setNavigationBarTitle({
  title: options.nav,
  });
  },
  });
  复制代码
  如上代码就可以实现小程序跳转到公众号
  小程序实现跳转到 H5 网页
  小程序跳转到 H5 网页,与跳转公众号类似,只需要把上面的url地止切换成自己想要的链接即可
  注意
  跳转到的网页需要在小程序后配置支持业务域名即可完成跳转,否则是跳转失败的
  如下所示,跳转至https://coder.itclan.cn/:
  handleToWebSite() {
  const url = 'https://coder.itclan.cn/'; // 跳转的外链
  const navtitle = 'itclanCoder'; // 这个标题是你自己可以设置的
  wx.navigateTo({
  // 跳转到webview页面
  url: /pages/webview/webview?url=${url}&nav=${navtitle},
  });
  }

复制代码
可能会遇到的问题

小程序跳转指定的公众号失败
小程序跳转指定的 h5 页面失败

原因

跳转的公众号需要关联该小程序,才支持小程序的跳转
小程序后台管理没有配置添加业务域名(如果只是测试的话,可以在开发者工具里设置本地域名不校验合法域名webview等)

结论
出于安全性的的考虑,webview做了一些限制,使用webview一般而言,比较适合那种频繁改动的活动页,或者在小程序当中难以实现的业务,从而选择h5来代替,至于是使用原生还是h5,具体还是得看业务场景
比如:小程序对于画布,频繁的绘制会很消耗性能,有时候,使用h5就很适合,在小程序中嵌入webview就比较适合的

作者：itclanCoder
链接：https://juejin.im/post/6883257102173749256
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。