微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。

1. 官方文档地址

概述 | 微信开放文档

2. jssdk使用步骤

2.1 步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限

设置JS接口安全域后，通过关注该测试号，开发者即可在该域名下调用微信开放的JS接口
如果不设置 将不能调用微信jssdk的api

2.2 步骤二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。

备注：支持使用 AMD/CMD 标准模块加载方法加载

2.3 步骤三：通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

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

注意:配置信息不是写死的 需要调用接口

• 请求路径：http://bufantec.com/wx/user/getAccessToken
• 请求类型：get

参数	类型	是否必填	说明
appId	String	是
referer	String	是	是当前页面的url ,比如: referer=http://bufantec.natapp1.cc/JsSdk

<script>
import axios from "axios";
var appid = "wx3754d6500f2b0e5e"
export default {
  created () {
    axios.get("http://bufantec.com/wx/user/getAccessToken",{
      params:{
        appId:appid,
        referer:"http://411524.free.svipss.top/about"
      }
    })
    .then(res =>{
      console.log(res);
      wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.noncestr, // 必填，生成签名的随机串
        signature: res.data.signature,// 必填，签名
        jsApiList: [] // 必填，需要使用的JS接口列表
      });
    })
  }
}
</script>

3. jssdk接口调用示例

3.1 选取本地图片

selectedImg(){
  var _this = this;
  wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
      var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
      _this.imgPath = localIds;
    }
  })
}

3.2 扫码

scanQRCode(){
  var _this = this;
  wx.scanQRCode({
    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
      var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
      console.log(result);
      _this.txt = result
    }
  });
}

3.3 录音

startRecord(){
  wx.startRecord();
}

3.4 停止录音

stopRecord(){
  wx.stopRecord({
    success: function (res) {
      var localId = res.localId;
      _this.voice = localId;
    }
  });
}

3.5 播放录音

playVoice(){
  wx.playVoice({
    localId: _this.voice // 需要播放的音频的本地ID，由stopRecord接口获得
  });
}

3.6 语音识别

translateVoice(){
  wx.translateVoice({
    localId: _this.voice, // 需要识别的音频的本地Id，由录音相关接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
      alert(res.translateResult); // 语音识别的结果
    }
  });
}

3.7 分享

share(){
  // 注意  微信分享必须手动的点击右上角胶囊按钮才能分享 页面中的分享不生效
  wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    wx.updateAppMessageShareData({ 
      title: '测试标题', // 分享标题
      desc: '测试描述', // 分享描述
      link: 'http://bufantec.natapp1.cc', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: 'http://wx.qlogo.cn/mmopen/ps68icnpRvDVVRvWDdctdlMhvWGp9eaLKJfbEvxibAcrfY8nU3UtyH2sZ2Qc1sHcxjyvlaj7W44sQyXRm0k8lwMmeBf3o8TEKJ/64', // 分享图标
      success: function () {
        // 设置成功
      }
    })
  });
}

3.8 API都需要注册

created () {
_this = this;
axios.get("http://bufantec.com/wx/user/getAccessToken",{
  params:{
    appId:appid,
    referer:"http://bufantec.natapp1.cc/about"
  }
})
.then(res =>{
  console.log(res);
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: res.data.appId, // 必填，公众号的唯一标识
    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
    nonceStr: res.data.noncestr, // 必填，生成签名的随机串
    signature: res.data.signature,// 必填，签名
    jsApiList: [
      "chooseImage",
      "scanQRCode",
      "startRecord",
      "stopRecord",