微信jssdk用法汇总


Posted in Javascript onJuly 16, 2016

本文针对微信jssdk用法进行了详细汇总,分享给大家,供大家参考,具体内容如下

1.绑定域名

2.引入js文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
请注意,如果你的页面启用了https,务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,否则将无法在iOS9.0以上系统中成功使用JSSDK

3.通过config接口注入权限验证配置
这一步是通过用当前的url向后台发请求拿到一系列参数。即后台会拿我的url去向微信进行认证。这里需要注意的事用于验证的当前的url写法,
let url = location.href.split(‘#')[0];
务必写成以上形势。否则会在进行config时报invalid signature,

确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。
确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。
注意这里的动态,不要随便自己拼接,同时encodeURIComponent。

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

 4.通过ready接口处理成功验证
config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

wx.ready (()=> {
  // alert('ready');
  //$('#onMenuShareAppMessage').on('click', ()=> {
  // 分享给朋友
  wx.onMenuShareAppMessage({
   title: '',
   desc: '',
   link: shareUrl,
   imgUrl: '',
   trigger: function (res) {
   // alert('用户点击发送给朋友');
   },
   success: function (res) {
   alert('已分享');
   },
   cancel: function (res) {
   alert('已取消');
   },
   fail: function (res) {
   alert(JSON.stringify(res));
   }
  });
  //});
  //分享到朋友圈
  wx.onMenuShareTimeline({
  title: '', // 分享标题
  link: shareUrl, // 分享链接
  imgUrl: '', // 分享图标
  success: function () { 
   alert('已分享');
   // alert($('.no-num').html());
  },
  cancel: function () { 
   alert('已取消');
   // 用户取消分享后执行的回调函数
   // alert('取消');
  }
  });
 });

5.通过error接口处理失败验证
config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看

wx.error((res)=> {
 alert(res.errMsg);
})

6.基础接口
 •分享到朋友圈接口

wx.onMenuShareTimeline({
 title: '', // 分享标题
 link: '', // 分享链接
 imgUrl: '', // 分享图标
 success: function () { 
 // 用户确认分享后执行的回调函数
 },
 cancel: function () { 
 // 用户取消分享后执行的回调函数
 }
});

 •分享给好友的接口

wx.onMenuShareAppMessage({
 title: '', // 分享标题
 desc: '', // 分享描述
 link: '', // 分享链接
 imgUrl: '', // 分享图标
 type: '', // 分享类型,music、video或link,不填默认为link
 dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
 success: function () { 
 // 用户确认分享后执行的回调函数
 },
 cancel: function () { 
 // 用户取消分享后执行的回调函数
 }
});

如果这里需要在分享的内容中加入用ajax异步请求拿到的内容,必须在ajax请求返回后的成功函数中再调用一次该分享接口,但是必须将分享接口放在wx.ready函数中,不能单独调用。因为客户端分享操作是一个同步操作,这时候使用 ajax的数据还没有返回。
7. 这些步骤看起来似乎比较简单,但是调试的过程中难免会遇到很多问题,因为jssdk接口还是有很多的限制的。一不小心就踩到了坑。

8. 最后,我将这个接口进行了一下封装

'use strict';
let wxDefaultOptions = {
 debug: true,
 appId: '',
 timestamp: 0,
 nonceStr: '',
 signature: '',
 jsApiList: [
 'checkJsApi',
 'onMenuShareTimeline',
 'onMenuShareAppMessage',
 'onMenuShareQQ',
 'onMenuShareWeibo',
 'hideMenuItems',
 'showMenuItems',
 'hideAllNonBaseMenuItem',
 'showAllNonBaseMenuItem',
 'translateVoice',
 'startRecord',
 'stopRecord',
 'onRecordEnd',
 'playVoice',
 'pauseVoice',
 'stopVoice',
 'uploadVoice',
 'downloadVoice',
 'chooseImage',
 'previewImage',
 'uploadImage',
 'downloadImage',
 'getNetworkType',
 'openLocation',
 'getLocation',
 'hideOptionMenu',
 'showOptionMenu',
 'closeWindow',
 'scanQRCode',
 'chooseWXPay',
 'openProductSpecificView',
 'addCard',
 'chooseCard',
 'openCard'
 ]
};
//let shareUrl = 'http://xxx' + location.pathname;

let getWxParam = (url, wxOptions) => {
 let url = location.href.split('#')[0];
 url = encodeURIComponent(url);
 let promise = new Promise((resolve, reject)=> {
 $.ajax({
  type:'GET',
  url: 'http://xxx/xxx?param='+url,
  dataType: 'jsonp'
 })
 .then((data)=> {
  let wxParam = data;
  console.log(wxParam);
  wxOptions.appId = 'wxeb5c3f4a03b880f0';
  wxOptions.timestamp = wxParam.timestamp;
  wxOptions.nonceStr = wxParam.nonceStr;
  wxOptions.signature = wxParam.signature;
  wx.config(wxOptions);
  wx.error((res)=> {
  alert(res.errMsg);
  })
  resolve();
 }, (error)=> {
  console.log(error);
 })
 });
 return promise;
}

//分享到朋友圈
let shareSocial = (param)=> {
 wx.onMenuShareTimeline({
  title: param.title, // 分享标题
  link: param.link, // 分享链接
  imgUrl: param.imgUrl, // 分享图标
  success: function () { 
  // 用户确认分享后执行的回调函数
  param.suCallback();
  },
  cancel: function () { 
  // 用户取消分享后执行的回调函数
  param.failCalback();
  }
 });
}
//分享给好友
let shareToFriends = (param) => {

 wx.onMenuShareAppMessage({
  title: param.title,
  desc: param.desc,
  link: param.link,
  imgUrl: param.imgUrl,
  trigger: function (res) {

  },
  success: function (res) {
  param.suCallback();
  },
  cancel: function (res) {
  },
  fail: function (res) {
  param.failCalback();
  console.alert(JSON.stringify(res));
  }
 });
}
//title,desc,link,imgUrl,suCallback, failCalback
let jssdk = (param) => {
 wx.ready(()=> {
 //分享到朋友圈
 shareSocial(param);
 shareToFriends(param);

 })
}

function callWx(param, wxoptions) {
 getWxParam(param.url, wxOptions).then(()=> {
 jssdk(param);
 })
}
//param = {url: '', title:'',desc:'',link:'',imgUrl:'',suCallback:func, failCalback: func}
module.exports = {
 wxDefaultOptions,//更改配置
 callWx, //默认配置,进行config配置 和ready后定制微信分享内容,
}

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript miscellanea -display data real time, using window.status
Jan 09 Javascript
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
JavaScript实现横线提示输入验证码随输入验证码输入消失的方法
Sep 24 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 #Javascript
很棒的js选项卡切换效果
Jul 15 #Javascript
轻松5句话解决JavaScript的作用域
Jul 15 #Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 #Javascript
IE下JS保存图片的简单实例
Jul 15 #Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 #Javascript
JavaScript6 let 新语法优势介绍
Jul 15 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
使用PHP下载CSS文件中的图片的代码
2013/09/24 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
node.js的Express服务器基本使用教程
2019/01/09 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
iview实现图片上传功能
2020/06/29 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
Python子类继承父类构造函数详解
2019/02/19 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
行政管理专业推荐信
2013/11/02 职场文书
村官工作鉴定评语
2014/01/27 职场文书
会计专业自我评价
2014/02/12 职场文书
大学生个人求职信例文
2014/07/07 职场文书
岗位工作说明书
2014/07/29 职场文书
人身意外保险授权委托书
2014/10/01 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
教师工作态度自我评价
2015/03/05 职场文书
商务司机岗位职责
2015/04/10 职场文书