小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章)
虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(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}`,});}
可能会遇到的问题
小程序跳转指定的公众号失败
小程序跳转指定的 h5 页面失败
原因
跳转的公众号需要关联该小程序,才支持小程序的跳转
小程序后台管理没有配置添加业务域名(如果只是测试的话,可以在开发者工具里设置本地域名不校验合法域名
webview
等)
相关文档
webview-小程序开放能力
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
公众号(ID:itclanCoder)
码能让您早脱菜籍,文能让您洗净铅华
可能您还想看更多:
Js篇-面试题15-通过什么方法可以实现-检测页面 DOM 变化
Js篇-面试题11-比较下for..of与for..in的区别
Js篇-面试题9-请说一下Js中的事件循环机制
vuepress建站过程中遇到的一些问题
小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章)相关推荐
- 小程序接入h5页面_小程序-实现怎么跳转打开 H5 网页链接(或跳转至公众号文章)...
背景 有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢? 实例效果 前提条件该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定 ...
- 悬赏任务小程序搭建抖音点赞app任务发布接单平台任务分销公众号开发
功能介绍 鲨鱼任务悬赏源码 1.系统模块 仪表盘--可查看任务和提现相关的待办事项.今日用户与收入的数据,以及平台整体数据概览; 支付设置--可设置支付宝.微信收款码,可设置是否开启小程序微信支付.A ...
- 外卖券外卖省省外卖探探美团饿了么外卖联盟优惠券小程序系统软件开发源码 美团/饿了么外卖CPS联盟返利公众号小程序裂变核心源码
外卖CPS红包小程序源码分享 外卖返利小程序饿了么美团吃喝玩乐电影票对接公众号返利系统分销系统源码 [小程序]外卖CPS优惠券小程序平台v3.0源码 我们推广者也可以获取用户下单点外卖金额6%左右的佣 ...
- H5网页链接APP浏览器跳转小程序-邪少外链
邪少外链专注于微信公众号.小程序.微信号等内容的推广引流 免费的微信推广引流助手 实现在手机浏览器.短信.知乎等平台中打开H5网页链接跳转微信小程序页面 快速引导用户关注公众号.加微信好友.加群.打开 ...
- 微信小程序跳转到H5网页
小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态.小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现 ...
- h5-浏览器点击跳转微信小程序或微信内部广告页(微信浏览器)跳转小程序的实现方法。
一.微信内部浏览器使用<微信开放标签>唤起微信小程序 官方开发文档:[https://developers.weixin.qq.com/miniprogram/dev/framework/ ...
- 讨论一下微信小程序中如何长按识别图片中二维码跳转
[一].image标签展示二维码 目前微信官方支持小程序原生页面在微信版本IOS≥8.0.6,安卓≥8.0.3时直接长按识别二维码, <image src="二维码图片地址" ...
- 微信小程序如何跳转到微信公众号文章,小程序如何关联公众号或订阅号
微信小程序如何跳转到微信公众号文章,小程序如何关联公众号或订阅号 前置条件 公众号最高管理权限(或能与最高权限管理者配合操作) 小程序开发权限或最高管理权限 小程序方面 根据官方资料描述,小程序中展示 ...
- 2021最新外卖霸王餐小程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统 粉丝裂变分销源码分享
2021最新外卖霸王餐小程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统 粉丝裂变分销源码 外卖霸王餐系统小程序/H5/APP源码 2021最新霸王餐小程序 霸王餐小程序源码地址 成品演 ...
最新文章
- 近期必读的5篇AI顶会CVPR 2020 GNN (图神经网络) 相关论文
- Android视图绘制流程完全解析,带你一步步深入了解View(二)
- 使用 Cordova 打包 app
- PhpCms V9调用指定栏目子栏目文章的两种方法
- OpenCASCADE:STEP翻译器的介绍
- 减少mysql主从数据同步延迟问题的详解
- Inner Join, Left Outer Join和Association的区别
- 让运维更高效:关于ECS系统事件
- Zabbix 如何动态执行监控采集脚本
- tensorflow之relu
- 插件开发之360 DroidPlugin源码分析(三)Binder代理
- 二维码加logo demo
- adobe cs5中文补丁 indesign_indesign cs5下载_Adobe InDesign CS5简体中文版下载 - 下载之家...
- Jmeter进行SOAP协议接口性能测试
- OpenGL FBO学习
- echart x轴自定义间距
- Matlab 动态输入变量和嵌套函数、匿名函数
- LINUX学习基础篇(十五)软件包管理
- Python列表的extend函数
- 1 | Nessus使用