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

2017-12-27 20:43:39 阅读：3420 作者：子龙 来源：巨推传媒 分类：小程序开发

关于微信小程序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/

如下图：

 

 

 

 

 

② --- 选择基础库

这一步是最简单的，但确实很多朋友最容易忽略的（咳咳...），开发者工具-->详情设置-->选择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，手机微信打不开的情况，不要捉急，升级一下微信版本即可，实际项目中要做一下低版本的兼容。）

微信开发 微信 微信小程序开发 小程序开发 小程序h5嵌入

上一篇：vivo Xplay7现身微博 三星全视曲面屏？ 下一篇：微信代运营，月费1000起，这家公司为了中小企业拼尽全力

更多推荐

• 
  小程序开发 定制微商城分销系统 微信分销平台不单单是为了做好网络营销，其实在面对营销的时候更多的时候离不开市场，所以这个时候应该明确的就是微信分销应该做好具体的市场营销工作。一起来看看该怎么做...

  2019-03-21 17:28:12 2668

• 
  小程序开发 微商城有多种销售方式，让你快速实现分销 一、微商城有多种销售方式，让你快速实现分销 1、微商城采用主店无数分店的模式，让企业拉动与分销商之间在订单协作、商品信息、库存管理、渠道沟通等业务环节的紧密协作...

  2019-03-21 17:27:07 2949

• 
  小程序开发 企业进行微信小程序开发的好处有哪些呢？ 目前， 微信 小程序 开发 呈现出 持续火热 的状态 ，越来越多的商家开始关注并开发自己的小程序， 但是，我们也看到，还有一部分的 商家 持观望的态度，不知道是...

  2019-03-21 17:25:57 3047

• 
  小程序开发 企业如何发挥微信小程序的作用呢？ 现在， 微信小程序 成为了企业在进行微信营销时又一个有效的方式，许多企业通过 微信小程序 开发的方式建立起微信上的营销覆盖网络，但是，有些企业在开发小程序之后，...

  2019-03-21 17:24:53 2953

• 
  小程序开发 企业进行微信小程序开发后能够赚钱吗？ 微信小程序 对于许多企业的发展是有助力作用的，因此，现在 许多公司在小程序出现已经开始申请自己的账号，一些提前开始运营 微信小程序 的公司已经取得了不错的成绩，...

  2019-03-21 17:23:46 3022