背景

有时候,因为业务需要,在小程序当中,须要跳转到 h5 网页,或跳转到公众号,造成流量的闭环,那在小程序当中怎么实现呢?

实例成果

不反对gif图展现,残缺成果见这里

前提条件

  • 该小程序与须要跳转至的公众号(订阅号/服务号)进行了绑定关联
  • 应用小程序凋谢能力web-view实现跳转(承载网页的容器。会主动铺满整个小程序页面，集体类型的小程序暂不反对应用)

web-view提供了一个src属性,这个src属性就是能够从小程序跳转到指定链接的地止

留神

应用webview时,须要独自的在小程序中创立一个页面,要在app.json中的pages中注册,如下所示,而后在webview中的wxml中应用webview标签,在webview标签上设置的src属性就是要跳转的地止

{  "pages": [     "pages/webview/webview"  ]}复制代码

在触发事件处:绑定事件

<view>  <view class="contaniner-1" bindtap="handleToWxPublic">    点击跳转到itclanCoder公众号  </view>  <view class="contaniner-1" bindtap="handleToWebSite">    点击跳转到https://coder.itclan.cn/网站  </view></view>复制代码

以下是逻辑代码

// pages/handletowebview/handletowebview.jsPage({  /**   * 页面的初始数据   */  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页面中,示例代码如下所示

<!--pages/webview/webview.wxml--><view>  <web-view src="{{url}}"></web-view></view>复制代码

webview的逻辑页面

// pages/webview/webview.jsPage({  /**   * 页面的初始数据   */  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就比拟适宜的

相干文档

  • webview-小程序凋谢能力