我好爱公众号开发 Vite.js3 + Vue2 + VantUI携手创作，共同成长！这是我参与「掘金日新计划 · 8

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第22天，点击查看活动详情

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

最近在公司接手了一个微信公众号商城的项目，支付走的三方平台，服务商手续费就是低。以前也开发过公众号，觉得挺不顺的，边查文档边试坑，还有一个比较特殊的地方就是域名访问。

现在开发进度到了中期阶段。毕竟做了这么久的前端了，想把一些自己想做的东西带入到新项目里。

项目首选Vite.js构建工具。

说说项目前期做了哪些事情?

环境变量：开发环境和生产环境

Vue2的适配

在Vite初始化后，需要手动适配Vue2

安装插件vite-plugin-vue2, vite.config.js里配置进去

import { resolve } from "path";
import { defineConfig } from "vite";
import resolveExteralsPlugin from "vite-plugin-resolve-externals";
import {
  createStyleImportPlugin,
  VantResolve,
} from "vite-plugin-style-import";
import { createVuePlugin } from "vite-plugin-vue2";
const config = defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  plugins: [
    createVuePlugin(),
    createStyleImportPlugin({
      resolves: [VantResolve()],
    }),
    resolveExteralsPlugin({
      wx: "jWeixin", // 微信环境导入第三方包
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:
          "@import '@/assets/scss/index.scss';",
      },
    },
  },
  build: {
    cssCodeSplit: false,  // 这里是css 不分割的意思， 解决下面Vant css加载顺序不符合预期的问题
  },

将index.html提到根目录来
修改index.html
```
 <script src="/src/main.js"><script> 
```
app.vue main.js文件添加进来

代码规范的配置并根据规范配置格式化代码

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "plugin:vue/essential",
    "plugin:vue/recommended",
    "standard",
    "@vue/prettier", // prettier建议的规则
  ],

git提交规范的配置

利用了commitlint 和 husky 组合。主要是在commit-msg钩子里运行了yarn commitlint pre-commit运行的是yarn lint

scripts:{
    ...
    "lint": "eslint \"src/**/*.{js,vue}\"",
    "commitlint": "commitlint --edit .git/COMMIT_EDITMSG"
}

// commitlint配置
module.exports = {
   extends: ["@commitlint/config-conventional", "cz"],
   rules: {
     "type-enum": [
       2,
       "always",
       [
         "init",
         "build",
         "ci",
         "chore",
         "docs",
         "feat",
         "fix",
         "perf",
         "refactor",
         "revert",
         "style",
         "test",
       ],
     ],
     "type-empty": [2, "always"],
     "subject-empty": [2, "always", 100],
   },
   plugins: [
     {
       rules: {
         "type-empty": (res) => {
           return [
             res.type,
             "注释类型不能为空，例如: feat: xx",
           ];
         },
         "subject-empty": (res) => {
           return [
             res.subject,
             "注释主体内容不能为空 ，feat: xx", 
           ];
         },
       },
     },
   ],
 };

Vant 2的按需加载
Vite.js Failed to fetch dynamically imported module报错（当确认路由没有问题的时候，很有可能是该页面import导入模块的路径不对）

关于css是全量引入，这里有个坑就是如果按需引入css的话，构建的时候css加载顺序会受到影响，导致页面没有按照预期显示。

微信公众号的需要做的事情：

域名准备
网页授权域名的配置（用的是获取用户信息授权）MP_verify的文件是配置网页域名要用的
微信支付页面的配置
微信分享的api(最新的api是updateAppMessageShareData和updateTimelineShareData)，这里有个坑就是扫码、分享链接点击进去、公众号菜单点击进去的才会分享成功，有缩略图。就是只有这些场景才能使用微信分享。在成功调用了api后，还需要画图引导，点击右上角...弹出分享给朋友和分享到朋友圈的按钮，点击它们才算完成整个分享的过程。
api签名问题，在config配置配置api，使用api报## the permission value is offline verifying
- config确认正确通过
- config是否配置该api
- 地址中有参数转义了导致签名不一致
- 如果配置完立马要用需要wx.ready中调用
- 微信分享的api注意场景（必须是扫码或者是公众号菜单点击进来的
服务器的配置（这里的是微信服务器调用我们项目服务器配置的，服务器调用前进行了验证，这里可以借鉴到自己的项目里去。）
视频播放问题，poster问题（在第一次播放的时候，poster不消失，可以使用background代替）
```

<video src=""></video> 

<video>
    <source src='blob:xx' type="video/mp4">
</video>
```
ios上不能播放远程地址的视频，试试将上传的mp4视频的编码格式转换成h264的。
有部分网页怎么都是白的背景没有文字，很大可能性是开启了Dark Mode，做个适配就好了。或者使用meta标签禁用Dark Mode

<meta name="color-scheme" content="light">

网页授权全局拦截

router.beforeEach(async (to, from, next) => {
   document.title = to.meta.title;
   if (!store.getters.openId && !to.query.code) {
     console.log("没有openId和code需要重定向");
     window.location.href = WX_REDIRECT("/home");
   } else if (store.getters.openId) {
     console.log("已授权", store.getters.openId);
     next();
   } else {
     await store.dispatch("saveOpenId", to.query.code);
     console.log("获取openid", store.getters.openId);
     if (store.getters.openId === "null") {
       console.log("code失效");
       window.location.href = WX_REDIRECT("/home");
     } else {
       next();
     }
   }
 });

项目的结构：

关于业务方面

用户购买的非实物商品权限处理使用的是华为云存储和IMA权限配置。

总体来说：到目前为止开发下来还是很顺畅的，遇到的坑基本在一两天之内解决了。