小程序 |
您所在的位置：网站首页 › 微信小程序打开其他网页没反应 › 小程序 |
小程序
|
背景 有时候,因为业务需求,在小程序当中,需要跳转到 h5 网页,或跳转到公众号,形成流量的闭环,那在小程序当中怎么实现呢? 实例效果 (小程序跳转到公众号)  （小程序跳转到h5网页） 小程序实现跳转到公众号前提条件该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定关联使用小程序开放能力web-view实现跳转(承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用)web-view提供了一个src属性,这个src属性就是可以从小程序跳转到指定链接的地止 注意 使用webview时,需要单独的在小程序中创建一个页面,要在app.json中的pages中注册,如下所示,然后在webview中的wxml中使用webview标签,在webview标签上设置的src属性就是要跳转的地止 代码语言：javascript复制{ "pages": [ "pages/webview/webview" ] }在触发事件处:绑定事件 代码语言：javascript复制 点击跳转到itclanCoder公众号 点击跳转到https://coder.itclan.cn/网站以下是逻辑代码 代码语言：javascript复制// 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页面中,示例代码如下所示 代码语言：javascript复制webview的逻辑页面 代码语言：javascript复制// 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/: 代码语言：javascript复制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 |
【本文地址】
今日新闻 |
推荐新闻 |