微信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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
基于javascript实现图片滑动效果
May 07 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 Javascript
JavaScript枚举选择jquery插件代码实例
Nov 17 jQuery
vue+element实现动态加载表单
Dec 13 Vue.js
详解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垃圾代码优化操作代码
2010/08/05 PHP
百度地图API使用方法详解
2015/08/25 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
在JavaScript的AngularJS库中进行单元测试的方法
2015/06/23 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
2018/02/09 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Python中__call__用法实例
2014/08/29 Python
详解Python的Lambda函数与排序
2016/10/25 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python-接口开发入门解析
2019/08/01 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
如何通过python实现人脸识别验证
2020/01/17 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
会计毕业生自荐信
2013/11/21 职场文书
鲜花方阵解说词
2014/02/13 职场文书
公司年会主持词
2014/03/22 职场文书
五四青年节活动总结
2015/02/10 职场文书
教师教育教学随笔
2015/08/15 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
MySQL数据库简介与基本操作
2022/05/30 MySQL