乐趣区

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

jiezi

背景

有时候, 因为业务需要, 在小程序当中, 须要跳转到 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- 小程序凋谢能力
退出移动版