原生微信小程序开发使用web-view的流程和问题

前言

        最近在使用原生微信小程序开发，因为不是很熟悉，踩了不少坑，将自己碰到的问题发表一下，主要是以后开发可以参考一下。

        主要是小程序中的 web-view 的显示和交互问题，以及在小程序后台管理的配置。

1.在tabbar页面中内嵌H5地图

         使用 web-view 显示指定链接的内容，并且 web-view 的点击事件可以和微信小程序进行通信互动，跳转指定的tabbar页面。

        现在图片 h5 页面中 tabbar 是通过 div 写好的，和微信小程序中的页面 tabbar 并不一样，这时候点击下面的 tabbar 是没法切换微信小程序的菜单的。

        在微信小程序中代码很简单，使用 web-view 指定对应的地址即可,如果想要传递参数到网页中，在后面加上 ?id=123&name=zs 的形式，bindmessage 是在网页中触发指定的事件时返回给小程序信息，在特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接触发。

<web-view bindmessage="getMessage" src="{{'https://www.baidu.com?id=123'}}">
</web-view>

        注意！在微信开发工具中内嵌任何形式的链接http或https都可以显示访问，在真机模拟上面或发布测试版本体验时就会显示错误，这是因为web-view个人类型的小程序暂不支持使用，还有http协议会显示不安全导致拦截不显示。

 2.微信小程序后台管理

         微信小程序后台登录的账号必须是企业账号才能配置业务域名，个人类型的小程序是没有业务域名配置的。

        登录微信小程序后台后，找到开发-开发管理->开发设置-业务域名，配置业务域名时，首先将域名添加上去后，下载校验文件，校验文件的名称和内容不要修改，将文件发给运维或者后端让他们配置在域名的根路径下可以访问，如https://wx.qq.com域名，访问文件为https://wx.qq.com/aQ84G06.txt，当运维或者后端说可以访问到时，点击确定校验完毕即可。

        通过校验以后就可以在在小程序种查看效果了，即使后续域名到期更换域名了，服务器没有变换还是能校验成功的。

3.H5页面写法

内嵌的 h5 页面有时候需要和小程序进行事件联动，需要调用小程序的SDK来完成，下载微信小程序SDK包，安装后引入

npm i weixin-js-sdk

或者使用在线链接放在页面中，我这里用的第二种方法

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

        引入包以后可以使用 window.wx 来访问小程序的方法属性，SDK使用文档：概述 | 微信开放文档 可以查看如何使用，SDK里面包含了在微信公众号、小程序以及其他场景的使用，这里主要介绍微信小程序中使用的某一个方法。

        在 window.wx身上有一个 miniProgram 属性，window.wx.miniProgram 身上可以使用在小程序中方法，我们也可以在小程序开发文档中找到这个对象MiniProgram | 微信开放文档。

        在内嵌 web-view 的 h5 页面中需要切换tabbar和传递事件，通过window.wx.miniProgram.reLaunch （切换tabbar）和 window.wx.miniProgram.postMessage （给小程序发送消息）两个事件完成

---

具体需要使用哪个方法根据实际情况去查阅对应的api来完成功能。