一开始被uni-app开发微信H5的wx问题困扰了,主要原因是不太理解uni-app的机制,后来不断摸索,尝试,也逐渐理解了当中的细节和原委,在这里和大家分享出来
概念,H5页面中
jssdk 为<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
unisdk 为<script src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
注意要点
1.H5页面引入unisdk的作用是为了h5页面中用统一的uni对象和其它uniapp的vue页面相互沟通,直接跳转页面,传递参数等
2.如果uniapp发布的目标是微信mp,想用webview打开一个H5页面(可以判断浏览器是mp or 公众号 or app),html中的wx对象即为H5页面中引入的jssdk的wx对象,和微信公众号网页开发无区别
3.如果uniapp发布的目标是微信公众号H5, 虽然你在整个项目主页面的index.html中引入了jssdk,然而当你想在 uni的vue页面中使用wx对象,如home.vue的调用 wx.config(), 或者在index.html页面中调用wx.config() ,都会得到报错,因为wx对象是uni定义的另一个全局对象,而不是你期待的jssdk的wx对象,若确实使用jssdk的wx对象(在微信公众号or微信MP的webview中呈现整个项目),就需要jweixin-module,如果H5是使用hash路由方式,那么只用wx.config一次即可,使用的例子
var jswx = require('jweixin-module/index.js')
jswx.ready()
jswx.config(...)
jswx.getLocation 使用即可
我通常这么做:
主项目main.js中
Vue.prototype.$wx = wx //uni的全局对象
isInWXWebview = window && window.navigator.userAgent.indexOf('MicroMessenger') > 0
if(isInWXWebview){ //在微信中,且为webview打开主项目
var jswx = require('jweixin-module/index.js')
jswx.ready()
jswx.config(...)
Vue.prototype.$wx = jswx //切换为微信jssdk对象
}
然后,在uni的vue页面中,this.$wx.getLocation 就可以用了
4.在微信开发者工具打开uniapp的mp,然后打开webview页面,在H5里面的console.log信息是不会打印出来的,得用公众号网页调试的方式来打开来查看
5.uniapp的webview发布为微信mp,运行时为webview,发布为H5,运行时为iframe,需要注意wx.config中的真正路径
6.微信公众号网页的分享是不能通过页面内的按钮触发的,只能提示右上角分享,同理,在mp的webview打开的网页中也是如此,可以提示用户微信mp右上角分享按钮触发分享;但是mp原生页面支持button触发分享,也就是uni的vue页面支持点击触发,所以可以这样变通处理:webview中的按钮点击后,navigateTo(mp原生页面),在mp原生页面中button再触发分享,用这种方式你连网页中都不需要jssdk了, 而jssdk直接支持的方法就不需要这样了,wx.config成功后直接调用即可,如wx.getLocation
总结,你写在主页面index.html页面中的wx对象有可能不是jssdk的对象(当项目发布为H5时),而写在vue文件中的wx对象是uni的,用webview打开的页面html中的wx肯定是jssdk的
6 个评论
要回复文章请先登录或注册
aliang888
4***@qq.com
5***@qq.com (作者)
5***@qq.com (作者)
h***@163.com
h***@163.com