背景
有时候,因为业务需要,在小程序当中,须要跳转到 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-小程序凋谢能力
发表回复