微信jssdk分享笔记

注：由于jssdk授权接口的调用可能会影响本地接口的正常调用，如果页面刚刚加载成功的时候需要向服务端请求其他数据接口，一定要让数据接口调用完成后再调用拿jssdk授权配置信息的接口。

1、必须申请域名，登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，进行域名绑定。

2、首先必须引入微信的jssdk文件 

　　a、原生html页面中使用script标签引入以下文件：

　　http://res.wx.qq.com/open/js/jweixin-1.4.0.js / http://res2.wx.qq.com/open/js/jweixin-1.4.0.js 或者下载到本地使用

　　b、vue项目

　　安装： npm install weixin-js-sdk

　　引入：import wx from 'weixin-js-sdk'

3、由于微信jssdk需要微信授权配置，所以需要后端开发拿到相关的微信配置信息config，需要后台给个接口，这个接口包括三个要素，域名、appid、token。另外如果后台没有主动去获取当前页面的链接还需要加上url，并且使用encodeURIComponent()进行转码

　　a、原生html页面使用ajax拿到后台返回的数据，配置config

　　b、vue可以使用axios等 看个人需求，配置config

4、config配置好后，就可以使用微信内置的一些接口了。

    微信内置分享设置，注：这个分享的标题，logo设置只是通过微信对外分享才有效


　　var appConfig = {//务必保证这三个参数配置正确
        pro:{
            appid: "1111111111111", //appid
            token: "111111111",
            api: "123.123.com" //域名
        }
    }
    var appInfo = appConfig.pro
    var configApi = `https://${appInfo.api}/api/js-conf?appid=${appInfo.appid}&url=${encodeURIComponent(window.location.href)}&token=${appInfo.token}`
    //调用jssdk
    common.ajaxQuery('GET', configApi, '', 'json', function (wxRes) {
        if (wxRes.status == 200) {
            let config = wxRes.data
            console.log(config) //查看后台给的数据 根据数据进行处理
            wx.config(config) //配置config
            config.debug = true //打开测试
            wx.ready(function () {   //微信接口调用 写在wxready里面，需在用户可能点击分享按钮前就先调用
              let title = '对外分享的名字'
              let link = '对外分享的链接'
              let desc = '对外分享的描述'
              let imgUrl = '对外分享的logo图片链接'
      
              wx.checkJsApi({ //检测微信api是否可用
                  jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                  success: function(res) {
                    if (res.checkResult.updateAppMessageShareData == true) {
                      wx.updateAppMessageShareData({//分享给朋友”及“分享到QQ
                          title: title, // 分享标题
                          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                          desc: desc,//分享标题下的描述
                          imgUrl: imgUrl, // 分享图标
                          success: function () {
                          }
                      })
                    }
                    if (res.checkResult.updateTimelineShareData == true) {
                      wx.updateTimelineShareData({//分享到朋友圈”及“分享到QQ空间
                          title: title,
                          link: link, 
                          desc: desc,
                          imgUrl: imgUrl,
                          success: function () {}
                      })
                    }
                    if (res.checkResult.onMenuShareWeibo == true) {
                      wx.onMenuShareWeibo({//分享到微博
                          title: title,
                          link: link, 
                          desc: desc,
                          imgUrl: imgUrl,
                          success: function () {}
                      })
                    }
                  }
              })
            })
          }
    })