uniapp 评价应用_uni-app开发的应用，使用于微信端下的使用总结，分享等功能，注意要点...

一开始被uni-app开发微信H5的wx问题困扰了，主要原因是不太理解uni-app的机制，后来不断摸索，尝试，也逐渐理解了当中的细节和原委，在这里和大家分享出来

概念,H5页面中

jssdk 为

unisdk 为

注意要点

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的