5***@qq.com
5***@qq.com
  • 发布:2019-07-01 11:39
  • 更新:2020-07-16 15:21
  • 阅读:10246

uni-app开发的应用,使用于微信端下的使用总结,分享等功能,注意要点

分类:uni-app

一开始被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的

0 关注 分享

要回复文章请先登录注册

aliang888

aliang888

看得不是很显示,方便提供1个简单的事例demo打包吗?
2020-07-16 15:21
4***@qq.com

4***@qq.com

我的h5在手机浏览器里可以直接拉起高德app,但是通过微信浏览器就需要我去下载,您知到怎么解决吗
2020-06-04 09:41
5***@qq.com

5***@qq.com (作者)

回复 5***@qq.com :
QQ:51079474
2019-07-20 17:23
5***@qq.com

5***@qq.com (作者)

回复 h***@163.com :
首先,得了解你的项目结构,你加我qq,我帮你分析分析
2019-07-20 17:19
h***@163.com

h***@163.com

回复 h***@163.com :
找到原因了,我不是在H5打开的,在微信小程序打开的,所有没生效,H5上可以输出了
2019-07-18 11:00
h***@163.com

h***@163.com

我也遇到了同样的情况,从微信小程序web-view 出去的H5页面引用微信sdk,使用wx.XX(); wx对象是uni定义的另一个全局对象,而不是微信的。然后我安装了jweixin-module,可是不管怎么输出,都报错Cannot read property 'jWeixin' of undefined,然后我写了一个demo,demo里面却不报错,能拿到对象,想问下uni-app里面引用jweixin-module,你怎么引用的?
2019-07-18 10:19