前言
最近在使用原生微信小程序开发,因为不是很熟悉,踩了不少坑,将自己碰到的问题发表一下,主要是以后开发可以参考一下。
主要是小程序中的 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来完成功能。