微信公众平台开发

微信后台的配置就不写啦 数据请求方面也是通过前端请求后台后台再去请求微信服务端 
这篇文章主要是写前端请求接口的

微信配置文件WxSDK.js

import { wxJsSdkConfig } from '../http/services';
/*
wxJsSdkConfig 是请求得到config即下面的参数 参数一般是url#后面的地址 官网也有说明 

window.wx.config{
{
        debug: false, // 开启调试模式
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名，见附录1
        jsApiList: config.jsApiList // 必填，需要使用的JS接口列表
    }
}
*/
let currentUrl;

let readyCallback = null;

let isWxReady = false;

console.log(navigator.appVersion, navigator.userAgent);

function WxJdkConfig(config) {
    window.wx.config({
        debug: false, // 开启调试模式,
        appId: config.appId, // 必填，公众号的唯一标识
        timestamp: config.timestamp, // 必填，生成签名的时间戳
        nonceStr: config.nonceStr, // 必填，生成签名的随机串
        signature: config.signature, // 必填，签名，见附录1
        jsApiList: config.jsApiList // 必填，需要使用的JS接口列表
    });
}

function isReady() {
    return isWxReady;
}

window.wx.ready(function () {
    window.wx.hideMenuItems({
        menuList: [
            // "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:weiboApp",
            "menuItem:share:facebook",
            "menuItem:share:QZone"
        ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
    });
});

function getWXLocation(callback, errCallback){
    window.wx.ready(function () {
        window.wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: function (res) {
                console.log(JSON.stringify(res))
                callback(res)
                // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                // var speed = res.speed; // 速度，以米/每秒计
                // var accuracy = res.accuracy; // 位置精度
            },
            fail:function(err){
               console.log(JSON.stringify(err))
            }
        });
    })
}

//一般在全局的地方渲染
const initConfig = (callback, errCallback) => {
        readyCallback = callback;
        wxJsSdkConfig(window.location.href.split('#')[0]).then((res) => {
            WxJdkConfig(res);
            // callback();
        }).catch((err) => {
            errCallback();
        })
}

function WXshare(data, callBack) {
    window.wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        window.wx.updateAppMessageShareData({
            title: data.title, // 分享标题
            desc: data.desc, // 分享描述
            link: data.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: data.imgUrl, // 分享图标
        }, function(res) {
            //这里是回调函数
            callBack(res)
        });
    });
}

export {
    initConfig,
    isReady,
    getWXLocation,
    WXshare,
}
//main.js 全局的函数即可
import { initConfig } from '../wechat/WxSDK';

initConfig(this.initSuccess, this.errCallback);// 获取微信配置

wexinPay.js
//微信支付方法（点击按键调用）
import {isWeiXin} from "../util/Util";

let wx = require('weixin-js-sdk');


let wexinPay = null;
// isWeiXin()
let a =true
if(isWeiXin()){
    console.log("is-weixin")
    wexinPay = (data, callback, errorCallback) => {
        let appId = data.appId;
        let timestamp = data.timeStamp;
        let nonceStr = data.nonceStr;
        let signature = data.signature;
        let packages = data.package;
        let paySign = data.paySign;
        /*window.wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: signature, // 必填，签名，见附录1
            jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });*/
        window.wx.ready(function(){
            window.wx.chooseWXPay({
                timestamp: timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
                package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                paySign: paySign, // 支付签名
                success: function(res) {
                    // 支付成功后的回调函数
                    // cb(res);
                    callback(res)

                },
                fail:function(res){
                    errorCallback(res)
                }
            });
        });
        window.wx.error(function(res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            /*alert("config信息验证失败");*/
        });
    }
}else {
    console.log("no-weixin")
    // alert('请在微信平台打开此链接');
}

export default wexinPay;

判断是不是微信端

wexinPay
// 判断是否为微信
function isWeiXin() {
    //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型

    var ua = window.navigator.userAgent.toLowerCase();
    //通过正则表达式匹配ua中是否含有MicroMessenger字符串
    if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true;
    } else {
        return false;
    }
}

检测checkJsApi

 wx.checkJsApi({
        jsApiList: [
            'getLocation'
        ],
        
        success: function (res) {
         
            if (res.checkResult.getLocation == false) {
                alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
                return;
            }
        }
    }); 

另外补充一下获取用户信息流程即登录流程

网页授权流程分为四步：
1、引导用户进入授权页面同意授权，获取code
2、通过code换取网页授权access_token（与基础支持中的access_token不同）
3、如果需要，开发者可以刷新网页授权access_token，避免过期
4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）这里就能获取到微信头像