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
来源: http://www.jianshu.com/p/457300bb0b8e