关于小程序:小程序实现怎么跳转打开-H5-网页链接或跳转至公众号文章

背景

有时候,因为业务需要,在小程序当中,须要跳转到 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.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页面中,示例代码如下所示

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

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就比拟适宜的

相干文档

• webview-小程序凋谢能力