小程序跳转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 相关文章推荐
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
Javascript算符的优先级介绍
Mar 20 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
js实现下拉框选择要显示图片的方法
Feb 16 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
vue-ajax小封装实例
Sep 18 Javascript
探索node之事件循环的实现
Oct 30 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
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
总结JavaScript的正则与其他语言的不同之处
2016/08/25 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
es6函数之箭头函数用法实例详解
2020/04/25 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
Python中的filter()函数的用法
2015/04/27 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
python之cv2与图像的载入、显示和保存实例
2018/12/05 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
简单介绍python封装的基本知识
2019/08/10 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
django+echart数据动态显示的例子
2019/08/12 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
python爬虫泛滥的解决方法详解
2020/11/25 Python
python 爬取百度文库并下载(免费文章限定)
2020/12/04 Python
python 获取谷歌浏览器保存的密码
2021/01/06 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
工伤赔偿协议书范本
2014/04/15 职场文书
党员剖析材料范文
2014/09/30 职场文书
2014年少先队工作总结
2014/12/03 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python