vue项目—公众号主体迁移前端该做哪些准备工作

场景：公司提出将现有公众号主体切换另一公众号主体下的需求，两个公众号同属于一个微信开发平台下，unionId相同，openId不相同，然而项目中支付功能使用了openId，为了不影响整体功能以及最小的改动，提出的对策：以更新版本作为新老用户的分割点，需要老用户进行重新授权，从而更新openid，重新授权获取的openId即对应新的公众号。

以下是具体准备工作：

一、微信公众平台准备工作。

1、需提供新公众号的AppID

2、需提供新公众号的AppSecret

3、配置微信授权网址（用于允许用户授权成功） 配置地址：登录微信公众平台->公众号设置->安全设置->网页授权配置->添加对应网址 （这个地方有三个需要配置网址的地方，具体什么名字忘记了）

4、配置微信支付域名 （如涉及支付业务，需要添加域名） 配置地址：微信支付->产品中心->JSAPI配置支付域名，可以添加多个。

5、如涉及支付业务，还需将原来公众号所关联的商户号关联至新公众号下。具体添加商户号，见微信公众平台内 https://pay.weixin.qq.com/static/pay_setting/appid_protocol.shtml教程，否则无法支付啦。

二、前端代码准备部分：

1、添加路由守卫：

var router = new Router({
  routes
})
//newUser = 1作为更新完主体之后的标记

router.beforeEach((to, from, next) => {
  //已经是新版
    if(localStorage.getItem('newUser') == 1){
      next()
    }else{
      //需要删除所有缓存
      if(to.path === '/wxAuthor'){
        localStorage.clear()
        next()
      }else{
        next('/wxAuthor')
      }
    }
})
export default router

2、在授权之后添加更新标记：

//在授权成功回调函数中存储更新标记

localStorage.setItem("newUser", 1);

在迁移过程中还发现一些问题，我们同时上线了小程序和公众号，数据库只存了一个openId的字段，所以只能存小程序或者微信的openId，有个接口又是从库里取的openId，这个地方踩了一下坑，改成从缓存中取openId，至此，授权成功、支付成功、公众号迁移工作完成。如果公司有同类情况，可以考虑使用unionId就不会有这种情况啦。

 

如果有更好的方法，欢迎指教哦~