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

背景

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

实例效果

前提条件该小程序与需要跳转至的公众号(订阅号/服务号)进行了绑定关联

使用小程序开放能力web-view实现跳转(承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用)

web-view提供了一个src属性,这个src属性就是可以从小程序跳转到指定链接的地止

注意

使用webview时,需要单独的在小程序中创建一个页面,要在app.json中的pages中注册,如下所示,然后在webview中的wxml中使用webview标签,在webview标签上设置的src属性就是要跳转的地止{

"pages": [

"pages/webview/webview"

]

}

复制代码

在触发事件处:绑定事件

点击跳转到itclanCoder公众号

点击跳转到https://coder.itclan.cn/网站

复制代码

以下是逻辑代码// 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页面中,示例代码如下所示

复制代码

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就比较适合的

相关文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/272120.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NSUserDefaults的用法

NSUserDefaults适合存储轻量级的本地数据,比如要保存一个登陆界面的数据,用户名、密码之类的,个人觉得使用NSUserDefaults是首选。下次再登陆的时候就可以直接从NSUserDefaults里面读取上次登陆的信息咯。 因为如果使用自己建立的plist文件什…

http、https、密码学基础、GET和POST区别

http协议相关: http协议的特性: http协议是建立在TCP/IP协议之上应用层协议,默认端口为80或者8080。http协议的的特点是无状态,无连接(并不是真的没有连接,而是在请求数据的时候有连接,在数据回来的时候就…

apache 配置文件内使用 8080 端口_【SpringBoot 框架】- SpringBoot 配置文件

一、SpringBoot配置文件类型SpringBoot是基于约定的,所以很多配置都有默认值,但如果想使用自己的配置替换默认配置的话 ,就可以自己编写配置文件进行相应配置,起步依赖spring-boot-starter-parent 中,有配置文件的引入…

Linux中while循环的用法笔记

Shell中可以采用while循环来实现需要进行循环的操作。 语法结构如下: while exp do command done 执行过程:while将测试exp的返回值,如果返回值为true则执行循环体的命令,返回值为false则不执行循环。循环完成后会进入下一次循环之…

IOS9.0 导航栏状态栏

状态栏高度20px 竖屏是导航栏高度44px 横屏时导航栏高度32px 获取当前屏幕状态:UIApplication.sharedApplication().statusBarOrientation转载于:https://www.cnblogs.com/iOSboyYang/p/5328886.html

libcurl库的安装和使用

libcurl简介: libcurl是一个跨平台的网络协议库,支持http, https, ftp, gopher, telnet, dict, file, 和ldap 协议。libcurl同样支持HTTPS证书授权,HTTP POST, HTTP PUT, FTP 上传, HTTP基本表单上传,代理,cookies,和用户认证。li…

android 微信缩小通话界面_安卓如何做出微信那样的界面仿微信“我”的界面2/5...

本系列目标通过安卓编程仿写微信“我”的界面,让大家也能做出类似微信界面.效果图如下:本文目标做出支付部分(其他部分在后续文章中逐步分享).效果图如下:实现方案通过截图工具或者下载一张微信支付照片,放到工程的src/main/res/drawable目录下,命名为pay.png;同样获取一张向右…

Shell脚本中函数的定义和调用笔记

Shell脚本函数的作用主要是把一些可以通用的功能封装起来、避免脚本中出现大量重复的脚本代码,同时可以大大增强脚本的可读性、和可维护性。Shell函数定义的语法格式:function FUNCTION_NAME(){command1command2command3}也可以省略function 关键字FUNCT…

opensll、libcurl库安装的使用,树莓派CSI摄像头的配置,树莓派调用智能API平台实现人脸识别、树莓派配置中文环境

接着上一节人工智能翔云平台介绍: 人工智能OCR识别: OCR 是英文Optical Character Recognition的缩写,意思是光学字符识别,也可简单地称为文字识别,是文字自动输入的一种方法。它通过 扫描 和摄像等光学输入方式获取纸…

apache 设置禁止访问某些文件或目录

【apache配置禁止访问】1. 禁止访问某些文件/目录增加Files选项来控制&#xff0c;比如要不允许访问 .inc 扩展名的文件&#xff0c;保护php类库&#xff1a;<Files ~ "\.inc$">Order allow,denyDeny from all</Files>禁止访问某些指定的目录&#xff1a…

Shell脚本中函数返回值的用法笔记

函数的返回值又可以称为函数的退出状态&#xff0c;实际上可以理解为一种通信方式。Shell脚本中函数可以使用返回值的方式把调用的结果信息反馈给调用者。便于调用者可以根据反馈的结果做相应处理。说明&#xff1a;函数的返回值主要使用 return 关键字来处理。这和很多编程语言…

python 怎么取对数_概率矩阵分解(PMF)及MovieLens上的Python代码

首先对Probabilistic Matrix Factorization这篇论文的核心公式进行讲解和推导&#xff1b;然后用Python代码在Movielens数据集上进行测试实验。一、 背景知识文中作者提到&#xff0c;传统的协同过滤算法有两个不足&#xff1a;1).不能很好地处理规模非常大的数据&#xff1b;2…

JAVA SE、EE、ME,JRE、JDK,基本数据类型,访问修饰符、函数、封装的概念、UML类图、构造方法、this关键字、static关键字、方法重载、方法重写、包(packahe)

运行第一个JAVA程序&#xff1a; 这里使用的开发环境是eclipse&#xff0c;新建一个java工程&#xff0c;然后可以看到src这个是存放java代码的地方&#xff0c;然后在src文件右击新建一个class&#xff08;类&#xff09;&#xff0c;然后可以看到下图&#xff0c;同样和C语言…

unity中如何解决镜头穿透模型?

设置相机的Near clip plane,调小一点,但是不要给负数就行。 转载于:https://www.cnblogs.com/ZeroMurder/p/5331174.html

Shell脚本中函数位置参数的用法笔记

位置参数主要是用于调用函数的时候有时候需要传递参数&#xff0c;有很大的比例都是需要调用函数的时候动态传递参数&#xff0c;从而实现相应的功能。比如我想要计算两个数的和&#xff0c;可以通过函数是实现&#xff0c;需要定义两个参数作为计算的值。这样的计算两个数的函…