微信JS_SDK使用和配置

第一次接触微信的js_sdk的配置,最开始从微信的配置开始先,

最先需要阅读文档,进行最基础的了解点击打开链接,先根据配置的内容,分析逻辑

 

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,即分享朋友,朋友圈,QQ空间等功能
});


下面时我根据自己的项目进行的配置,盆友们可以根据自己的情况进行合适的配置

 

 

      let self = this
        let appID = '分享订阅号的appId'//分享订阅号的appId
        let timestamp = (new Date()).valueOf()//获取时间戳
        let nonceStr = Math.random().toString(36).substr(2)//生成随机字符串
        let signature = ''//签名
        let jsapi = ''//jsapi_ticket
        let getSignature = ''//获取签名
        let url = window.location.origin + window.location.pathname //权限签名算法的url
        self.$http.get('http://api.kags.hellohyh.com/v1/weixin/jsapi_ticket')
          .then(res => {
            if (res.body.code === 1) {
              jsapi = res.body.jsapi_ticket
              getSignature = 'jsapi_ticket=' + jsapi + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + url
              signature = SHA1(getSignature)
              self.WXcongie(appID, timestamp, nonceStr, signature)
            }
          })
 
WXcongie (id, timestamp, nonceStr, signature) {  wx.config({  debug: true,  appId: id,  timestamp: timestamp,  nonceStr: nonceStr,  signature: signature,  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ']  }) },

 

上面的部分,你可以通过微信调试平台进行调试,但是你需要注意url不能时本地发localhost地址,否则你配置正确也会报错,这里需要特别注意(我也曾经踩过这个坑)
 
wx.ready(() => {  wx.onMenuShareAppMessage({  title: 'demo',  desc: 'this is a demo',  link: 'http://movie.douban.com/subject/25785114/',  imgUrl: 'http://img3.douban.com/view/movie_poster_cover/spst/public/p2166127561.jpg',  trigger: function (res) {  alert('用户点击发送给朋友')  },  success: function (res) {  alert('已分享')  },  cancel: function (res) {  alert('已取消')  },  fail: function (res) {  alert(JSON.stringify(res))  }  })  wx.error(function (res) {  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。  alert(res)  })

完整实现微信分享盆友的功能,你需要看文档,再写另外的方法

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(前端)