微信小程序(二)快速接入微信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:添加域名https://passport.newgame.com,成功后如下:
B9A00B7A-0E67-4C8B-BF49-0452175CA176.jpeg

三,新建测试页面wxml,使用web-view控件,并设置src地址为上面配置的域名:
<web-view src="https://passport.newgame.com"></web-view>

这里<web-view/>会自动铺满整个页面,并覆盖其他组件。所以无需其他代码

四,大功告成
WechatIMG167.jpeg
常见问题:
WechatIMG168.jpeg

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

备注:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,076评论 25 708
  • 给提问的开发者的建议:提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。 写一个简明扼要的标题,并且...
    极乐叔阅读 13,639评论 0 3
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,869评论 18 139
  • 姓名:叶银芬 公司:宁波慈星股份有限公司 《六项精进》289期学员 反省二组 【知~学习】 《六项精进》大纲...
    Fanny_c554阅读 182评论 0 0
  • 为何人们总会旧事重提? ——因为那些憋屈抑或伤痛从未真正平复。 但就像美好的往事尚有余温,为何旧的伤痛就不可以有余...
    雨泽儿阅读 276评论 0 0