小程序跳转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 相关文章推荐
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript实现按Ctrl键打开新页面
Sep 04 Javascript
动态生成的DOM不会触发onclick事件的原因及解决方法
Aug 06 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
javascript实现前端成语点击验证
Jun 24 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
PHP Stream_*系列函数
2010/08/01 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
javascript prototype 原型链
2009/03/12 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
vue实现从外部修改组件内部的变量的值
2020/07/30 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
Python中一个for循环循环多个变量的示例
2019/07/16 Python
Python 处理文件的几种方式
2019/08/23 Python
python线程的几种创建方式详解
2019/08/29 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
HTML5 对各个标签的定义与规定:body的介绍
2012/06/21 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
火山动力Java笔试题
2014/06/26 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
老公给老婆的检讨书(精华篇)
2014/10/18 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
失职检讨书大全
2015/01/26 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书