小程序跳转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 学习笔记(五)
Dec 31 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 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去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php在线代理转向代码
2012/05/05 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
2018/03/28 jQuery
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
ant-design-vue按需加载的坑的解决
2020/05/14 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
Python pymysql模块安装并操作过程解析
2020/10/13 Python
利用Python批量识别电子账单数据的方法
2021/02/08 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
家长给老师的道歉信
2014/01/13 职场文书
保送生自荐信范文
2015/03/26 职场文书
2015年设计师个人工作总结
2015/04/25 职场文书