在进行项目开发时，若是从熟悉的电脑端转向移动端，还需兼顾多个平台，这无疑是一场全新的挑战。我首次尝试移动端项目，便要同时接入应用程序和微信公众号，虽然过程艰难，最终还是成功完成了。今天，我就来和大家聊聊微信公众号接入的相关事宜。
项目类型确定
我的项目是和公众号结合的h5页面。一开始就确定了这一目标，就像知道要去哪里才能找到正确的路。做项目得遵循一定的规则，既然选择了这种接入方式，那就得去微信的开放文档中查找相关资料。这一步是必不可少的，那些文档就像是一本秘籍，没有它们我根本不知道该如何着手。然后，我又确定了微信公众号中网页的入口，我在项目中设置了App和微信两个入口，这样便于后续的操作。
在具体开发过程中，类似的做法并不少见。比如我那位从事电商的朋友，在为商城添加社区功能时，也是先确定了接入多平台的策略。通过设置多个入口，他大大简化了工作流程。这些入口就好比是平行的道路，最终都指向功能的完成。这告诉我们，做事之前要好好规划，切勿盲目行事。
{ path: '/Wx', component: () => import('@/views/components/Wx.vue') }, // 微信入口
{ path: '/App', name: 'App', component: () => import('@/views/components/App.vue') }, // app入口配置基础信息
需要先设立一个类别。这就像是建造房屋前得先打下地基。我建立了包含配置信息的config对象，这个类别中有一个基础功能，它的作用是根据配置信息来组合跳转的地址。像appid、secret这样的信息是不可以随意填写的。就有那么一位同行因为appid填写错误，费了很大力气去寻找问题。这些信息一旦配置正确，就好比铁轨铺好，后续的工作才能顺利进行。
export default class wechatAuth {
private config:any = {}
constructor(config:any) {
let defaultConfig = {
appid: 'wx1bcdb953f1952911',
secret: 'e57bfbcae699eb1370dc0afbabbcb82b',
responseType: 'code',
redirectUri: 'http://120.79.149.109:8083/#/qrCode?id=DS420602211769',
// redirectUri: encodeURIComponent('https://ad.jfpays.com/wcpn-mk/index.html#/empower'),
error_uri: '',
scope: 'snsapi_base,snsapi_userinfo',
getCodeCallback: () => { },
};
this.config = Object.assign(defaultConfig, config);
}
// 调取微信获取code接口
getCode() {
let authPageBaseUri = 'https://open.weixin.qq.com/connect/oauth2/authorize?';
let authParams = `appid=${this.config.appid}&redirect_uri=${this.config.redirectUri}&response_type=${this.config.responseType}&scope=${this.config.scope}&state=1#wechat_redirect`;
let url = authPageBaseUri + authParams;
window.location.replace(url);
}
}在各个项目中，对配置信息的具体需求各不相同。例如，与公众号合作的金融产品项目，对信息的准确性和保密性有着极高的要求。一旦配置信息出现失误，其后果可能远不止程序错误那么简单，还可能波及到资金安全等重大问题。因此，看似微小的配置问题，实际上对整体格局有着重要影响。
mounted() {
let search = window.location.search; // 获取当前地址用作重定向地址
this.readConfig(); // 这里是我读取appid的方法，（json文件）
this.param.redirectUri = encodeURIComponent(window.location.href); // 地址转码
const wexEnter = new wechatAuth(this.param); // 实例化类
if (search.includes('?code=')) { // hash模式下路由获取不到query参数
this.$store.commit('treePlanting/changeWxOrIxy', 'wx');
// 已有code码，传给后台
let code = this.getUrlParam('code');
console.log(code); // 基本上拿到code传到服务器上就没有前端事了
/** 拿到code换取微信 access_token
* token有效期2小时 ，需要及时刷新
* */
let param = {
identity: code,
openid: '',
type: 'GZH',
};
myzxServer.judge(param).then((res) => {
console.log(res);
if (res.success) {
this.$router.replace({
path: '/Home',
});
}
});
return;
}
wexEnter.getCode(); // 第一下从微信跳进来不进入if ,根据参数拼接跳转地址，下次进入if中
},微信入口逻辑
这部分功能主要是添加公众号内的一个按钮，这个按钮相当于进入的门户，轻轻一点就能跳转到项目中的特定链接。至于获取token和openid等步骤，我选择在服务器端完成。这样做效率更高，就像把重活交给能干的人。
我之前参与过一个信息类项目，那也是类似的做法，多数逻辑处理都放在了服务器端，以此减轻前端的负担。前端只需专注于界面展示。如此分工明确，项目的推进自然更加顺畅。这也提醒我们，合理分配任务，才能让每个部分都能发挥出最大的效能。
测试号的申请
这里的appid和appsecret是之前提到的配置资料。为何需要测试账号？这是因为我们在手机或微信开发者平台上调试代码时需要用到它。但要注意，有一个条件：只有关注过公众号的微信账号才能成功打开链接，否则会出现错误代码10006。这确实给调试带来了一些不便，但只要我们按照要求操作，严格遵循步骤，通常就能避免因SDK错误而影响工作。
我知道有些小公司创业初期，由于没留意这个规定，调试阶段浪费了不少时间。这事提醒我们，事先把规则弄明白是挺关键的。别总想着找捷径，否则可能会走更多弯路。
使用api
每个组件都需要获取相应权限，这个过程是异步的，需在created或mounted阶段完成。我在main.ts文件中将权限获取挂载到了Vue的原型上，这样一来，通过this.$wx调用就变得便捷多了。使用时，需根据需求调用，以扫码功能为例，调用不同接口时可能会遇到各种bug。不过，目前阶段，主要问题已基本解决，接下来就是逐步完善细节。
同事在使用社交项目API时遇到了权限问题，这导致部分功能无法使用。这说明尽管这一环节较为复杂，我们却不能大意。每一个小细节都关乎项目最终呈现的效果。
weixin-jsapi 或者是 weixin-js-sdk .两个基本上是相同的，亲测
总结与思考
尽管过程有些曲折，但我们还是积累了不少经验。例如，开展项目前要确定目标，对基础配置要小心操作，前后端的操作要有序安排，每个开发阶段都要弄懂其限制和需求。我想了解一下，大家在接入微信公众号时遇到的最大难题是什么？期待大家分享心得，或许能从我的经历中获得启发。如果觉得内容有帮助，请点赞并转发这篇文章。
