小程序跳转H5页面的方法步骤


Posted in Javascript onMarch 06, 2020

小程序是一种不用下载就能使用的应用,也是一项门槛非常高的创新,经过将近两年的发展,已经构造了新的小程序开发环境和开发者生态。小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果,现在已经有超过150万的开发者加入到了小程序的开发,与我们一起共同发力推动小程序的发展,小程序应用数量超过了一百万,覆盖200多个细分的行业,日活用户达到两个亿,小程序还在许多城市实现了支持地铁、公交服务。小程序发展带来更多的就业机会,2017年小程序带动就业104万人,社会效应不断提升。

因此小程序与H5网页相互跳转页显得尤为重要,下面我就来给大家分享一下微信小程序跳转到H5网页的方法。

小程序组件中有一个web-view,是一个可以用来承载网页的容器,会自动铺满整个小程序页面。
注意:个人类型与海外类型的小程序暂不支持使用。
好的,我们直接上代码,然后再进行讲解。

wxml1:

<view class="tiaoH51">
 <navigator url="pageH5" class="papaa">
  点击跳转到H5页面
 </navigator>
 </view>
wxml2:
<view class="container">
 <view class="pageH5">
 <web-view src="https://www.baidu.com/"></web-view>
 </view>
</view>

ok,没有任何废代码,但是可能有的小伙伴有疑问了,为什么一个跳转需要两个页面的wxml呢?别着急,且听我娓娓道来~

1.首先,web-view组件的属性src,正如你说看到的,这个就是设置网页链接的,但是需要特别注意的是web-view的src必须配置https协议的链接;
2.其次,就是web-view组件只要配置了链接,它是铺满全屏且自动跳转的,所以这也就是为什么我这边需要先写一个navigator按钮,自主操作之后再让它跳转的原因;
3.最后,web-view跳转的接口域名,需要配置在小程序开发设置的业务域名列表中。

如果是正式发布需要配置业务域名并上传验证文件。
1)、域名需要备案好的一级域名。
2)、配置HTTPS 证书。
3)、进入到小程序后台 https://developers.weixin.qq.com 设置-开发设置 -业务域名。

小程序跳转H5页面的方法步骤

4)、下载校验文件,并将文件放置在域名根目录下。

配置好了以上几步就可以进行正常的跳转了。

如果是开发版需要进行一下设置,就可避开域名相关校验。
1)、如果只是开发测试使用可以避开域名相关校验,避开方法如下所示(在开发者工具中点设置-项目设置-在不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书 前面打上对勾):

小程序跳转H5页面的方法步骤 

2)、设置完成后,点击下图中的真机调试,扫描二维码即可测试跳转效果。

小程序跳转H5页面的方法步骤

到此这篇关于小程序跳转H5页面的方法步骤的文章就介绍到这了,更多相关小程序跳转H5页面内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
分享一则javascript 调试技巧
Jan 02 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
理解javascript正则表达式
Mar 08 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
vue项目base64字符串转图片的实现代码
Jul 13 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
js实现点赞按钮功能的实例代码
Mar 06 #Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 #Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 #Javascript
vue-router 路由传参用法实例分析
Mar 06 #Javascript
JavaScript前端实现压缩图片功能
Mar 06 #Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 #Javascript
vue2路由基本用法实例分析
Mar 06 #Javascript
You might like
pdo中使用参数化查询sql
2011/08/11 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
深入php内核之php in array
2015/11/10 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
jQuery 对象中的类数组操作
2009/04/27 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
2018/05/31 Javascript
简谈创建React Component的几种方式
2019/06/15 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
[36:33]完美世界DOTA2联赛循环赛 Matador vs Forest 第一场 11.06
2020/11/06 DOTA
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
数控技术应届生求职信
2013/11/13 职场文书
大课间活动制度
2014/01/18 职场文书
聚美优品广告词改编
2014/03/14 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
Python基础之数据结构详解
2021/04/28 Python
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers