下面介绍一下如何开发一个微信公众号项目，以vue框架为例。

按照公众号文档，配置好公众号以后，下面开始进入开发。

业务方面，还是一个单纯的vue项目，关于公众号相关的逻辑，我们主要在 ** in.js中进行相关配置：

一、在index.html页面引入如下文件，（支持https）：

<script src="#34;></script>

二、通过跳转微信权限验证接口，获取相关信息：

https://open.weixin.qq.com/connect/oauth2/authorize?appid={公众号的APPID}&redirect_uri={REDIRECT_URI:你项目的回调页面}&response_type=code&scope={SCOPE}&state=STATE#wechat_redirect

注：scope----应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

调用完成后回重定向到你的redirect_url页，并在URL后面拼接code及state字段

code说明 ： code作为换取access_token或openId的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

** in.js代码大致为：

if(如果URL中包含code）{
getOpenId() // 去获取openId，并保存openId，之后会使用
initPage() // 拿到openId后，初始化页面
} else {
window.location.href = https://open.weixin.qq.com/connect/oauth2/authorize?appid={公众号的APPID}&redirect_uri={REDIRECT_URI:你项目的回调页面}&response_type=code&scope={SCOPE}&state=STATE#wechat_redirect
}

三、调用SDK

在此之前了解一下一个重要问题：

玉藻前：微信公众号config:invalid signature签名失效

接下里介绍一下SDK的使用。封装一下：

function initSDK() {
// 通过URL获取签名
let url = '';
if (navigator.userAgent.indexOf('iPhone') !== -1) {
// IOS 记录微信菜单打开时的url
url = getItemByEntryUrl();
} else {
// 安卓 记录当前使用SDK的页面的url
const { href } = window.location;
url = href.split('#')[0];
}
// 通过URL，调接口获取config
const config = await wxAppGetSignature(url);
/**
* 通过config接口注入权限验证配置
*/
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: config.appId, // 必填，公众号的唯一标识
timestamp: config.timestamp, // 必填，生成签名的时间戳
nonceStr: config.nonceStr, // 必填，生成签名的随机串
signature: config.signature, // 必填，签名
jsApiList: ['getLocation'] // 必填，需要使用的接口列表，以获取地理位置为例
});

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

/**
* 通过error接口处理失败验证
*/
wx.error(function(res) {
console.log('通过error接口处理失败验证');
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}

在使用SDK的页面，初始化一下，再配合公众号开发者调用具体的方法，即可使用微信的工具SDK。以获取地理位置为例：

wx.getLocation({
type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: res => {
console.log('坐标系：', res);
},
fail: res => {
console.log('坐标系获取失败', res);
}
});