您当前的位置:首页 > 电脑百科 > 程序开发 > 移动端 > 小程序

微信小程序跳转到H5网页

时间:2020-04-06 18:19:51  来源:  作者:

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

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

1、编写跳转按钮相关代码:

跳转按钮页面代码:

<view class="container">
  <view class='wrApper'>
    <button class='wepay' bindtap='gooutUrl'>点击跳转到H5页面</button>
  </view>
</view>

 

跳转按钮JS代码:

Page({
  gooutUrl: function () {

    wx.navigateTo({

      url: '../out/out', //

      success: function () {

      },       //成功后的回调;

      fail: function () { },         //失败后的回调;

      complete: function () { }      //结束后的回调(成功,失败都会执行)
      })

  }

})

 

2、跳转页面代码:

<view class="container">
 <web-view src="https://域名"></web-view>
</view>

 

2.1、如果是正式发布需要配置业务域名并上传验证文件。

1)、域名需要备案好的一级域名。

2)、配置HTTPS 证书。

3)、进入到小程序后台 https://developers.weixin.qq.com 设置-开发设置 -业务域名。

 

微信小程序跳转到H5网页

图1填写小程序信息

 

微信小程序跳转到H5网页

图2配置业务域名

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

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

2.2、如果是开发版需要进行一下设置,就可避开域名相关校验。

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

 

微信小程序跳转到H5网页

图3本地设置

 

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

 

微信小程序跳转到H5网页

图4调试



Tags:微信小程序   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
微信小程序“无障碍急救平台”日前上线,解决听障人士120急救呼叫难题。听障人士在日常生活、工作中常有信息缺失、沟通不良的困难。如果自身或身边人突发急症,则需要依靠他人...【详细内容】
2021-12-15  Tags: 微信小程序  点击:(10)  评论:(0)  加入收藏
现如今卖东西的渠道是越来越多,如今在微信小程序也能开店卖东西了,有的小伙伴想在小程序上卖东西但不知道该怎么做,下面就来讲讲微信小程序如何做店铺,利用微信小程序!但凡得到公...【详细内容】
2021-11-03  Tags: 微信小程序  点击:(32)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Tags: 微信小程序  点击:(43)  评论:(0)  加入收藏
一、微信服务号主要偏于服务交互(类似银行,114,提供服务查询),认证前后都是每个月可群发4条消息(不适用于个人)二、微信订阅号主要偏于为用户传达资讯(类似报纸杂志),认证前后都是每天...【详细内容】
2021-10-22  Tags: 微信小程序  点击:(82)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  Tags: 微信小程序  点击:(60)  评论:(0)  加入收藏
功能说明脱离公众号下的小程序,单独使用功能特点小程序:是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用...【详细内容】
2021-09-27  Tags: 微信小程序  点击:(46)  评论:(0)  加入收藏
微信小程序不愧是智能时代的宝藏发明,不用下载不占内存,点开就能用。今天介绍这7个小程序,个个都拥有超实用的功能,用了就知道有多香! 1.腾讯文档腾讯出品的在线文档编辑器,提供在...【详细内容】
2021-08-27  Tags: 微信小程序  点击:(101)  评论:(0)  加入收藏
微信上有很多好用的小程序,虽然不是很多人知道,但却很强大。这里就来分享8款相见恨晚的微信小程序,可以让手机更好用,还不知道的话,未免有点太可惜了,一起来看看吧。 1、专去水印...【详细内容】
2021-07-28  Tags: 微信小程序  点击:(101)  评论:(0)  加入收藏
微信小程序的出现让手机内存不再高负荷,同时也出现了很多实用的小程序例如以下这么几个。1、文章截图文章截图小程序主要实用功能可以通过截图实现保证精度的情况下进行无缝...【详细内容】
2021-07-14  Tags: 微信小程序  点击:(83)  评论:(0)  加入收藏
微信上有很多小程序,比起app更小巧,使用起来更加方便。这里就来为大家分享7个精心挑选的微信小程序,每一个都让人觉得相见恨晚,能让你的手机更好用。 1、群相册服务专属于一个群...【详细内容】
2021-07-13  Tags: 微信小程序  点击:(124)  评论:(0)  加入收藏
▌简易百科推荐
一、项目背景随着小程序在用户规模和商业化上取得的极大成功,各大平台都推出了自己的小程序。然而这些平台的小程序开发在语法上又不尽相同,不同平台小程序代码的维护需要投入...【详细内容】
2021-11-05  携程技术    Tags:小程序   点击:(65)  评论:(0)  加入收藏
作者:灰灰来源:JS每日一题 一、背景传统的web开发实现登陆功能,一般的做法是输入账号密码、或者输入手机号及短信验证码进行登录服务端校验用户信息通过之后,下发一个代表登录态...【详细内容】
2021-10-29  Nodejs开发    Tags:微信小程序   点击:(43)  评论:(0)  加入收藏
总结列举微信小程序开放能力清单 硬件能力 蓝牙 NFC读写 连接WIFI设备 开放能力 ...【详细内容】
2021-09-27  软件开发分享    Tags:微信小程序   点击:(60)  评论:(0)  加入收藏
核心商城(CoreShop)介绍核心小程序商城系统(CoreShop) 是基于 Asp.Net 5.0、Uni-App开发、支持可视化布局的小程序商城系统;前后端分离,支持分布式部署,跨平台运行;拥有分销、代理、...【详细内容】
2021-07-20  码农也有梦想    Tags:小程序商城   点击:(115)  评论:(0)  加入收藏
介绍Vue3发布已经有一段时间了,从目前来看,其生态还算可以,也已经有了各种组件库给予了支持,但是不管是Vue3还是Vue2都无法直接用来开发小程序,因此国内一些技术团队针对Vue开发...【详细内容】
2021-07-13  爱分享Coder    Tags:小程序   点击:(204)  评论:(0)  加入收藏
首先明确几个概念1. W3C:指万维网联盟(World Wide Web Consortium),是一个国际的标准的制定机构。2. H5(HTML5,HyperText Markup Language 5的缩写),HTML5 是由W3C制定的新HTML标...【详细内容】
2021-07-06  畅游零和一的海洋    Tags:微信小程序   点击:(153)  评论:(0)  加入收藏
在开发微信公众号时,需要不时请求URL和数据封装。为了不做重复的工作。提取公共部分进行封装。产生了相应的公众类。今天先来写下请求类,代码如下:public class HttpRequestP...【详细内容】
2021-06-16  java浮萍  今日头条  Tags:公共类   点击:(134)  评论:(0)  加入收藏
小程序上线后,改版了很多次,包括一些 Api 接口也有改动。如果你学习一个很久之前的小程序项目是没有意义的,本文推荐的小程序都是最近有更新的。相信在你学习、部署的过程中,不...【详细内容】
2021-06-08    程序猿久一  Tags:微信小程序   点击:(207)  评论:(0)  加入收藏
自从2019年微信公开课Pro在微信之夜演示《跳一跳》以来,微信小游戏已经不知不觉走过的三年,这三年中我们可以明显看到微信对小游戏的扶持,对于微信开发者来说,微信小游戏开发以...【详细内容】
2021-05-25  开课吧科科  今日头条  Tags:微信小游戏   点击:(212)  评论:(0)  加入收藏
学习编程从hello world开始。学习微信小程序开发首先要安装一个微信开发者工具,官网上免费下载童叟无欺,下载完傻瓜式安装即可。 双击微信开发者工具,然后选择小程序,然后点击...【详细内容】
2021-05-12  程序员fearlazy  fearlazy  Tags:微信小程序   点击:(268)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条