微信小程序 快速接入微信web-view控件

今天微信小程序发布了2个重大更新

• 小程序内嵌网页
• 小程序可关联500个公众号
  内嵌网页的支持使微信从单个App成为名符其实的平台更近了一步，赶紧来尝鲜下，web-view 官方文档地址
  #####一，更新<微信开发者工具>至最新版
  由于web-view 组件是由基础库 1.6.4 开始支持，而在当前<微信开发者工具>版本点击右侧'详情'按钮可以看到仅支持到1.5.4：

  1509680476207.jpg

  
  方法a： 工具直接更新

  WechatIMG2482.jpeg

  WechatIMG2475.jpeg

  
  方法b：直接下载开发者工具最新版替换旧版本App，推荐该方法，第一种方式一般要等10分钟左右，还不一定成功，替换后：

  1509693511467.jpg

  
  #####二，配置业务域名(也就是访问的白名单)
  a：开发者登录小程序后台mp.weixin.qq.com，选择设置-开发设置-业务域名，新增配置域名模块
  

  421D3041-30C1-474C-83FD-C8E375D5DF57.jpeg

  
  第一次添加需要下载校验文件至你的服务器指定目录，不进行该操作是无法添加域名的（这就要求你的网站要支持https）
  b：添加域名passport.newgame.com,成功后如下：
  

  B9A00B7A-0E67-4C8B-BF49-0452175CA176.jpeg

  
  #####三，新建测试页面wxml，使用web-view控件，并设置src地址为上面配置的域名：

  <web-view src="https://passport.newgame.com"></web-view>复制代码

  这里会自动铺满整个页面，并覆盖其他组件。所以无需其他代码
  #####四，大功告成
  

  WechatIMG167.jpeg

#####常见问题：

WechatIMG168.jpeg

出现该错误就是说web-view里面访问的域名没有成功配置，建议检查步骤三

#####备注：
web-view作为一个新的控件，如何在网页中使用JSSDK 等欢迎一起学习讨论，觉得有用的请点个赞

转载于:https://juejin.im/post/59fc2542f265da432d2773f2