微信jssdk的使用

什么是微信JS-SDK

微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过调用微信JS-SDK的api，来高效的实现拍照、选图、语音、位置等调用原生手机系统的功能，同时可以直接使用微信分享、扫一扫等微信特有的能力。

微信JS-SDK的引入和使用

• 直接使用script引入文件，点击下载。引入之后，可以通过wx.来调用api

• 使用wechatPlugin插件，支持CommonJS模块化的引入方式，因为在我的项目中使用了vux框架，已经添加了wechatPlugin插件，所以可以用模块化的方式来引入，引入之后，在Vue组件内部可以用this.$wechat来获取wx对象，如果是在组件外部使用，采用以下的方式来引入：

import { WechatPlugin } from 'vux';
Vue.use(WechatPlugin);

Vue.wx.config({

    //...your wx.configs here

})

这样引入之后，你就可以很方便的把需要的接口功能封装起来，在其他的组件中调用。
在项目里面，我单独写了一个 WxConfig.js ，单独封装了一个类。

微信JSSDK上传多张图片

wx.uploadImage 这个接口只能链式调用，不能并行请求，本来是打算用 Promise.all 的，但是 Promise.all 也是并行的，所以我这里采用了递归调用。

    /**
     * 上传到微信服务器
     * @param  {Array} ids 微信打开图片获取到的ids
     */
    uploadToWX(ids){
        
        let lengt = ids.length;
        let count = 0;
        let arrs = [];
        
        return new Promise((resolve,reject)=>{
            //递归请求微信上传图片接口
            let looper = ()=>{
        
                this.upLoadImg(ids[count]).then(res=>{
                    return this.downLoadImg(res);
                })
                .then(res=>{
                    if(count<lengt){
                        arrs.push(res);
                        count++;
                        looper();
                    }else{
                        resolve(arrs);
                    }
                })
                .catch(err=>{
                    reject(arrs);
                })
        
            }
            looper();
        })

                        
    }

如何判断是页面从微信分享过来的呢

在分享的时候就加一个参数在url上面

遇到的坑

• 在微信的页面里面 cookies不能跨页面调用？？？只有localStorage可以，网上看了一下大家有的也有遇到这个问题，暂时切换成localStorage了，还没找到原因。
• 微信jssdk在请求配置的时候，网址必须和你设置的网址相同，但是如果是前后端分离的项目，就有点麻烦，后端也需要用接口来生成密码串，而前端需要用相同的地址来请求，不然就会是无效的请求。