web-view将网页嵌入小程序的过程及其前提:使网站支持https
小程序团队又搞事情了——开放了内嵌网页能力(Web-View)。开发者登录小程序后台配置业务域名后,即可实现小程序内嵌网页(2017年底开放的)。
如果你有一个网站,如何快速的把其中的网页放到微信小程序中,让你迅速拥有一个功能齐全的小程序。
说说工具(可能有些多,但并不复杂):
微信公众平台服务号(微信认证),已经新建了小程序
微信web开发者工具
ftp软件,你自己的网站(能用ftp软件连上网站服务器传个校验文件到根目录中)
注:网站必须支持HTTPS,网站从http转到https请看 下方 5、
一、微信小程序内嵌网页web-view开发教程
1、 微信公众平台,登录小程序账号
2、左侧-设置-开发设置-业务域名-配置
3、 小程序管理员微信扫码
4、 填写小程序业务域名,域名需ICP备案
5、 下载校检文件上传(用ftp软件)至服务器指定目录,保存
而这个时候可能会出现校验失败,可以多传几次。
已经成功的小伙伴可以滑道下方直接看6、
也可能忽略了一个重要问题:https (如果你的网站不支持https,建议使用,毕竟如今https也算是大势所趋)
这个时候就不得不安利一波阿里云服务器了,有能免费申请的ssl证书,如果你的网站是用的阿里云服务器。
5.1 登陆阿里云后台,
5.2点击左上角进入“产品与服务”
5.3搜索“证书”选中“CA证书服务“,
5.4找到免费型的DV SSL 购买
5.5支付后再进入“CA证书服务“补全信息
填写域名信息不写http头!!!
填写域名信息不写http头!!!
填写域名信息不写http头!!!
完成信息后,接下来就是等待审批结果了,审批通过后,下载,最后根据提示信息(很全的),进行选择安装。至于安装后的代码变动就不多说了。
(注:这里虽然将http切换为了https,还是建议保留http。所以我们在切换的时候可以做http和https的兼容,具体实现方式是,去掉页面链接中的http头部,这样可以自动匹配http头和https头。
例如:将http://www.baidu.com改为//www.baidu.com。然后当用户从http的入口进入访问页面时,页面就是http,如果用户是从https的入口进入访问页面,页面即使https的。)
6、 小程序业务域名配置完成
7、 打开微信开发者工具,添加小程序项目
8、 进入小程序调试,点击底部导航-外链页page10001,右侧找到page10001.wxml,删除原有代码,插入
备注:此处外链页为空白页,便于借助webview组件插入网页内容作对比
9、ctrl+s保存查看小程序内嵌网页得内容
备注:此处开发者需更新到教程库版本1.6.4
二、小程序web-view注意事项
1)业务域名需ICP备案,新域名备案24小时后即可配置,域名不支持IP地址及端口号
2)下载校检文件,上传至服务器指定根目录
3)开发者工具最新版-基础库版本1.6.4