美文网首页微信小程序开发编程小程序
web-view将网页嵌入小程序的过程及其前提:使网站支持htt

web-view将网页嵌入小程序的过程及其前提:使网站支持htt

作者: 相对不坏 | 来源:发表于2018-01-29 10:55 被阅读99次

    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

    相关文章

      网友评论

      • 王牌_534d:web-view 怎么才能一键导航和微信客服?求解答。

      本文标题:web-view将网页嵌入小程序的过程及其前提:使网站支持htt

      本文链接:https://www.haomeiwen.com/subject/gantzxtx.html