400-606-5558

巨推传媒> 新闻资讯> 小程序开发

关于微信小程序web-view组件内嵌h5的具体配置流程

  1. 发布时间:2017-12-27 20:43:39
  2. 阅读:4183
  3. 作者:子龙
  4. 来源:巨推传媒
  5. 分类:小程序开发

【导读】

关于微信小程序web-view组件内嵌h5的具体配置流程

小程序一步步的更新迭代,虽然踩坑不断,但是总体来说是越来越强大了,今天我们就来说一下小程序的web-view组件,相信很多有公司业务的朋友已经踩过坑了,但是由于web-view对个人类型的不支持,所以也有很多朋友没有办法上手,不过没关系,下面我就简单说一下,web-view究竟要怎么内嵌h5?又该如何配置呢?

 ### 首先简单介绍一下web-view,看过官方api的朋友可以自动忽略忽略,直接进入---配置步骤---即可

功能介绍

web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。
  类似于Frame、Iframe、Frameset标记,只是对于目前来说,web-view还缺乏灵活性,不过相信很多人已经很满足了(如果非要吐槽,我只想说,web-view生不逢我的时啊...不提了,一把辛酸泪)

使用及后期配置限制问题

  1. 个人类型与海外类型的小程序暂不支持使用。

  2. js-sdk接口限制(具体请参考 官方api )。

  3. 每个页面只能有一个< web-view />。

  4. 最多可以添加20个业务域名。

  5. 一年只可修改50次业务域名。

web-view

属性 类型 默认值 说明  
src String none webview 指向网页的链接。需登录小程序管理后台配置域名白名单。  

示例代码

 <!-- 结构层 -->  <web-view src="h5地址链接"></web-view>

配置步骤

 1. 配置业务域名  2. 选择基础库

① --- 配置业务域名

步骤 名称 说明
校验文件 下载校验文件(GH0XFEdVsr.txt)然后找服务端的朋友配合一下,将校验文件放置在将要嵌套的业务域名的根目录,例:h5页面:mp.weixin.qq.com/index.html,那么你需要配置的就是mp.weixin.qq.com/GH0XFEdVsr.txt,校验成功后,你才能配置第二步的业务域名。
配置域名 例:mp.weixin.qq.com/
如下图:

 

 

开发者登录小程序后台mp.weixin.qq.com,选择设置->开发设置->业务域名,新增配置域名模块。(个人类型帐号和海外类型帐号没有业务功能板块。所以看不到哦 0.0)

 

上传校验文件成功后,配置业务域名保存提交,ok

 

 

② --- 选择基础库

这一步是最简单的,但确实很多朋友最容易忽略的(咳咳...),开发者工具-->详情设置-->选择1.6.4及以上版本即可(目前只支持到1.6.4)。

如下图:

 

 

配置完成,现在就可以放荡的使用了

 

 

总结:

以上说的就是web-view简单的配置流程,大部分的内容小程序的官方api都已经给出,这里只是把配置流程的步骤再进一步的详细化,变得更通俗一点,但是如果你需要在h5页面中做某些操作....
那就来看一下官方示例:快速通道

 <! -- html -->  
 < script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></ script>  
 // javascript  
 wx.miniProgram.navigateTo({url: '/path/to/page'}) // 这里封装一下就可以跳转了...

(注:若遇到调试工具正常起跑web-view,手机微信打不开的情况,不要捉急,升级一下微信版本即可,实际项目中要做一下低版本的兼容。)

了解更多

更多

1、微信运营:关于微信内容的几个如何

微信运营 刚兴起的时候,不管是个人还是企业都纷纷投入微信运营的洪流中,几年过去了,纵观整个微信圈,还是依然有很多微信公众号活跃着,但是也有很多微信公众号被淘汰,...

2、关于微信公众号的书籍!惠民县孙武书城 为了让读

新华书店体系进级!关心微信民众号!全省通用享用最低9.5折!!!比特网 2013公众号一条广告多少钱年11月18日 16:33腾讯微信在你看市场推广专员是做什么...

3、关于微信公众号的书籍,这个公众号通过每日推

“书香敦煌”微信公众号位列全国图书馆类公众号新榜第六名,和讯 2018年06月20日 20:11商品佣金高达10%,这个可比京东荐书联盟的学会关于高了将近想了解...

4、微信公众号平台官网 关于微信公众号的书籍_怎么

榜单| 锡林郭勒职业学院校内微信公众号影响力排行榜2019(第1期),搜狐 2011事实上微信公众号官网年01月17日 17:27为评估锡林郭勒职业学院校内各微...

5、推送好文章的公众号,关于微,推送好文章的公众号

最创新的十大微信公众账号_科技_腾讯网,吉微信168()挂机日赚30收集了大量优质的明星、看着点点客怎么收费财经、科技、搞笑、旅游、健康等微信公众账号,做最好的...

6、关于微信营销的入门知识!

微信公众号怎么建立?首先以下这些关于微信营销的入门知识你必须了解。

7、关于微信运营的9个常见问题

关于阅读量,关于吸粉,关于微信活动,关于热点,关于段子,一次小小的分享。

8、关于微信营销的入门知识!

微信公众号怎么建立?首先以下这些关于微信营销的入门知识你必须了解。

9、关于微信运营的9个常见问题

关于阅读量,关于吸粉,关于微信活动,关于热点,关于段子,一次小小的分享。

10、关于微信公众号代运营的几点建议!

关于微信公众号代运营的几点建议!

联系我们

  • 总部地址:北京市朝阳区南磨房路37号1701-1703室

  • 公司地址:北京市朝阳区慧忠里洛克时代B栋1201室

巨推传媒代运营客服(jutui12)

巨推传媒官方客服(jutui08)

微信代运营
抖音代运营
快手代运营
微博代运营
小红书运营
咨询电话
400-606-5558
微信咨询
获得报价
回到顶部