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

最新推荐文章于 2025-04-12 21:28:46 发布

itclanCoder

最新推荐文章于 2025-04-12 21:28:46 发布

阅读量1.5w

点赞数 4

文章标签： css html 数据可视化 js 编程语言

本文链接：https://blog.youkuaiyun.com/wzc_coder/article/details/109064231

版权

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

（长按扫码进入识开发者页面即可体验）

背景

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

实例效果

(小程序跳转到公众号)

（小程序跳转到h5网页）

小程序实现跳转到公众号

前提条件

该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定关联
使用小程序开放能力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}`,
    });
  }