微信小程序开发编程小程序

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

2018-01-29  本文已影响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

上一篇下一篇

猜你喜欢

热点阅读