公众号多入口开发笔记

随着业务发展, 商户也提出了需要一个公众号入口网页的需求, 然而平时, 我们的公众号却是只给个人用户使用的. 虽然微信提供的公众号菜单可以提供多入口, 然而. 随着将来合作商户来自各行各业, 则可能各自面临不同的需求. 这个时候再去把公众号菜单搞得庞杂起来不是一个明智的选择, 比较好的解决办法是根据用户角色提供各自不同的入口页面.

实现思路

微信公众号菜单的每一个网页都是一个固定的链接:

“https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=WOAHOME&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect"

最终会跳转到您的 WOAHOME 指定的页面, 同时会自动带上 code 参数.
您只需要在服务器端完成登录, 得到 openid unionid 等信息后, 去判断用户角色, 根据不同角色去渲染不同模板页面即可.

前端网页的配置.

由于公众号网页使用 vue3 + vant 开发. 我们为每个用户角色建立了一个单独的项目, 此时如果都传到服务器 首页 index.html 会被覆盖, 因此 需要重新配置默认首页, 修改 vite.config.js

{
    build:{
     outDir:'dist',
     sourcemap:false,
     rollupOptions:{
       input:{
         index: path.resolve(__dirname, 'index.html')   // 在这里指定默认首页.
       }
     }
   },
}

首页的修改

此时生成的首页是一个 html 静态文件. 我们在服务器端需要使用这个静态文件作为模板文件, 并渲染登录信息到其中. 修改入口文件,这里是 index.html

<script lang="javascript">
    const g_user = JSON.parse("<?= $g_user ?>");
</script>