原文来源于：程序员成长指北；作者：_音魂不散_

如有侵权，联系删除

8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移动端项目, 可以放心地使用框架和的语法提升开发体验了, 因为平时的项目很多都是, 并且需要兼容低版本浏览器.

接下来就是技术选型, 结合我擅长的考虑, 移动端UI组件首先我就想到了ant design mobile[1], 然后看看微信网页开发#网页授权[2]的文档, 就可以上手开发了, 紧接着就是兵来将挡水来土掩了

但想到我对已经相对比较熟悉, 而且公司前端开发团队里的其他人用的都是, 如果我也掌握了, 那么后续如果有一些紧急的项目, 比如之前有其他小伙伴做过的项目, 那么我拿到代码之后就能快速了解对方的代码逻辑, 从而能够借鉴已有的代码, 达到敏捷开发的目的, 既能学习一项新的框架, 同时还能有助于后续的开发, 而这仅仅只是多花点时间就能获得的, 何乐而不为呢

目前最新的版本是, 之前用过一下, 但并没有用中的 , 而是用的方法, 然后整个文件的写法感觉就有些不伦不类, 看着像的的写法, 又像的的写法, 当然了, 也可能是我的姿势不对, 而这次我打算直接使用的 以及, 的看起来和的的写法非常相似, 上手应该没有太大的难度

而说起的移动端UI解决方案, 那就不得不提大名鼎鼎的vant[3]了, 我之前也没用过, 但见招拆招, 兵来将挡水来土掩, 至此, 技术选型就完成了, 剩下的就是踩(开)坑(发)了

说踩(干)就踩(干)

• : 

• : 

• : 

• : 

先贴一下我的:

项目是按照Vue3官方文档[4]上的步骤来创建的, 这个文档上写的很详细, 这里就不再熬述了

这里我使用的是官方推荐的Vue Language Features (Volar)[5], 它提供了的语法高亮功能, 以及它和著名的Vetur[6]有些冲突, 于是我就把卸载了, 但官方推荐的并没有提供代码块, 而就在我苦恼之际, 我阅读的文档后发现里面提到了一个Vue VSCode Snippets[7]的扩展, 于是我就安装了, 一开始不是太习惯, 后来就适应了, 我使用的是, 但一般为了方便, 我就只敲, 然后鼠标选择, 这样就会有一个的 的基础代码块了

这里的我选择的是, 文档是sass[8], 这里之所以用的是而不是我所熟悉的, 主要是因为想借此机会学一学, 还有就是上面提到的所提供的模板中的用的也是, 于是我就直接使用了, 它的语法和有些类似, 的写法类似, 有些不同, 有差异, 但就我目前使用的程度上来说还好, 其他的文档上解释得也比较详细, 这里就不展开了

使用而不是做文件扩展名是因为是的, 能用的语法在中也能用, 同时由于它和的相似性, 使得它更容易上手

的配置如下:

主要是做了 的配置, 这同样也是文档中提到的一个方法: vant#按需引入组件样式[9]

的配置每个人都有每个人的习惯, 在这之前我一直用的是, 以及, 同时也配置了保存时候对代码进行格式化的操作:

但这里还是想和大家聊一聊默认的配置, 不是因为它用的是, 而是因为它默认的规则背后作者的一些想法, 由于和我以前的习惯相悖, 一开始我还是有些排斥的, 但最后慢慢理解了, 就接受了, 同时觉得挺了不起的, 不愧行业中顶尖的人, 首先贴一下我的配置:

:

关于这个问题, 掘金上有大佬做了详细的解释, 详情可以看这篇文章: Delete `␍`eslint(prettier/prettier) 错误的解决方案[10], 我司开发人员用的电脑都是系统, 于是我就直接将其配置成了

是否在 和标签中缩进, 尤大的习惯是不缩进, 而我个人的习惯是缩进, 这个因人而异, 没有好坏对错之分, 官网 Vue files script and style tags indentation[11]中有尤大的一个解释: Indent script and style tags content in *.vue files#a comment from the creator of vue[12], 增加了一个选项来让用户使用, 我个人很喜欢这个选项

接下来是箭头函数圆括号的问题, 一直以来我都是尽可能的省略圆括号, 比如只有一个参数的时候我会省略它的圆括号:

多个参数的时候才写:

我在做这个项目之前, 一直都是这个写法, 而这个项目默认的配置却是: 无论有多少参数都不省略圆括号. 我觉得这样比较地影响观感, 一个参数写什么括号嘛, 看着多难看, 又不报错, 多个参数才需要写括号, 不写就会报错了, 当然在用的时候, 一个参数也要写括号的, 这样才能声明该参数的类型, 比如:

可我还是不理解为何它要采用无论有多少参数都不省略圆括号的策略, 于是我就去的官网上看了看, 文档Arrow Function Parentheses[13]中关于箭头函数圆括号的解释给了我答案:

At first glance, avoiding parentheses may look like a better choice because of less visual noise. However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments or default values as well as making other changes. Consistent use of parentheses provides a better developer experience when editing real codebases, which justifies the default value for the option.

乍一看，避免使用小括号可能是一个更好的选择，因为可以减少视觉噪音。然而，当Prettier删除小括号时，就很难添加类型注释、额外的参数或默认值以及进行其他修改。在编辑真正的代码库时，小括号的一致使用为开发者提供了更好的体验，这证明了该选项的默认值是合理的。

看完这段话, 瞬间醍醐灌顶, 是啊, 有了小括号, 才使得的类型注释成为了可能, 以及也方便设置默认值, 所有参数都使用括号使得我们的代码具有了高度的一致性, 易读也易用, 于是我就将这个用法保留了下来

中对进行了配置之后, 就不需要再次在中进行注册了, 直接在我们的文件中使用即可

除了这个之外, 还有移动端适配, 这里我使用的是的方案, 方案考虑到要监听浏览器缩放事件, 频繁修改根字号, 而且配置要比这个繁琐, 再加上移动端的兼容性已经很好了, 而且我也想在实际项目中用一用, 之前只用过, 还没有特别完整的项目使用, 于是就采用了的方案

vant官方文档#浏览器适配[14]里面推荐了一个的解决方案: postcss-px-to-viewport[15], 这个方案倒不是说不好, 只是照文档上来使用的时候给我报了个:

对于这个警告, 我最终在插件的中找到了解决方案: 支持 postcss-8[16], 改用评论中提到的这个插件: @xianzhengquan/postcss-px-2-vw[17]就没有这个迁移的警告了, 同时还要安一下object-assign[18], 不然会报错

我参照警告的链接文章里所说的对做了优化, 最终改为了上面贴出来那样, 具体的配置和由来参考文件:

以及在一开始的时候我打算看看是如何配置的, 因为之前使用方案都是加载的文件, 比如页面中直接加载这样的, 并没有使用, 而这个尝试花了我3个小时, 最后就一句话: , 这也是我对不熟导致的, 为了避免坑到其他人, 我也给提了一个: docs: add tips in advanced-usage.zh-CN.md[19], 同时这里也附上一些配置的解释, 同样适用:

配置释义

这个需求比较频繁, 毕竟有设计稿, 不太可能完完全全按照UI组件库的默认样式来开发, 于是我就对它的样式进行了一些配置, 详细内容请查阅ConfigProvider 全局配置[20], 我这里使用的是修改基础变量的方式: 基础变量[21], 同时文档示例工程[22]中提到的示例仓库: Vant Demo[23]中提供了另一种配置方式, 具体可以查看代码: theme config[24], 只是这个方式我并没有尝试过, 有用过的小伙伴欢迎在评论区留言讨论

在使用的过程中我发现会额外触发一次事件, 这个问题可查看[Bug Report] vant-list 监听的scroll事件 和 vue-router的push后维持scroll冲突[25], 该中是路由切换导致额外触发一次, 本项目中数据多了, 导致触发了事件, 因此会多触发一次事件, 解决方法参考了上面提到的那个, 同时这里贴一下关键代码:

每次都初始化, 这样就不会多触发一次事件了, 具体可以查阅上面提到的那个

这里我用的调试工具是vConsole[26], 使用起来非常方便, 同时功能强大, 它在手机端页面给我们提供了类似中的, 是手机端页面调试的利器

这里主要是我个人使用的一些记录, 不敢说写得多么好, 就只是我个人的一些方法, 由于业务逻辑并不是特别的复杂, 具体的的使用就不展开了, 这里主要用了一些, 个人觉得它和中的有些像, 同时文档中推荐以开头, 比如我这里用到的:

设置的背景色. 有的页面背景色和其他页面不一样, 这个时候需要单独处理一下, 然后离开那个页面的时候移除一下, 因为下一个页面的背景色和它不一样, 还是贴一下关键代码:

官网对于有更详细的介绍, 详情可移步官方文档: 组合式函数[27]

接下来就是微信公众号网页开发的主要内容了, 都是我个人遇到的坑, 在此和大家分享一下, 如果能帮到大家就再好不过了

1. 路由推荐使用形式的, 形式的路由最主要的影响是参数, 因为及其后面内容无法以查询字符串参数的形式传递(可使用处理一下, 但形式的路由就没有这个烦恼了, 详情可查阅这个贴子: A sharp in URL parameter[28]), 如果实在是要用形式的, 注意获取到的会在前面, 同时如果有其他参数的时候也要留意

2. 签名传, 这也是官方文档推荐的写法, 并且留意前端传递的, 实际发起请求的, 后端用于签名的三者要一致

3. 苹果手机权限验证配置的时候会以第一次进入页面的为准, 同时也会以第一次的为准, 要么提前配置所有可能用到的接口, 要么只在每次用户产生交互的时候配置

4. 获取本地图片返回的数据需要处理一下才可用于标签显示

官方文档: 微信网页开发#网页授权[29], 我这个项目的后端之前做过一个微信公众号网页开发的项目, 因此他保留了之前的代码, 而之前的项目中, 网页授权获取是后端来做, 因此我这里也就沿用了之前的做法, 即后端来做, 大致流程如下:

访问获取可以前端来做(前端拼地址, 官网文档上的做法), 也可以后端来做, 后端的处理方式是接收一个, 也就是文档中提到的, 然后到(后端帮忙拼), 这里需要注意要用处理一下(当使用路由的时候尤其需要, 不然以及后面的字符将无法传递过去), 要让浏览器不把它当一个地址, 而是一个回调地址参数, 微信做跳转的时候会做解码的操作; 后端拼的话注意后端的接口不能以的形式调用, 而应该以的形式使用, 只有地址栏中的链接返回, 浏览器才会去找中的做重定向, 请求则不会

然后是获取, 以及用户信息, 这部分操作也可以后端来做, 比如我这个项目就是后端来做的, 我获取到之后再次调后端的接口, 然后后端给我返回用户信息以及, 具体操作文档上也比较详细, 就不再熬述了, 接下来和大家分享一下我遇到的坑

涉及到微信的, 那自然是需要登录了, 我们在登录页做登录的操作, 登录成功了再走后续的逻辑

由于之前有运维小伙伴配路由配置了很久很久最后耽误上线的先例, 于是我把脚手架初始化的项目时候默认的路由改成了形式的路由, 以及我从入行开始接触的前端路由的形式就一直都是形式的, 对形式的不熟, 只知道后面的部分服务端不认, 只是浏览器认, 以为这个问题不影响, 然而这其实就是问题的答案了: 及其后面的内容无法发送到服务端.

在浏览器端主要是起一个分隔定位的作用, 比如我们最常见的, 但请求后端的时候及其后面的部分是无法发送到后端的. 详情可以看看阮一峰老师的这篇文章: URL的井号[30]. 简而言之就是我传递的及其之后的参数丢失了, 目前解决方案是后端来帮我拼(后端 中的字段中是可以使用的), 不然我传过去的就成了, 就不对了, 就进不到登录页而会去到首页了. 其实最好的方式是我这边将做一个转义即可, 就是用上面提到的, 但当时我并没能想到这个方法, 和项目经理(后端)聊了聊我遇到的问题之后他说他协助我来解决, 于是最终就由他那边来处理了

那具体情况是怎样的呢? 我们一起来看一下吧:

1. 我们在登录页: 进行登录的操作, 也就是获取再获取去进行登录的操作

2. 登录页给后端提供的获取的接口传当前页面的, 然后去获取 登录, 获取的过程会进行多次跳转, 获取到之后会带着跳转回登录页: 

然后问题就出现了: 获取到之后不是带着跳转到登录页, 而是带着跳到了首页. 这就很奇怪了啊, 回调页面参数我明明是在登录页传的当前页面的, 也就是登录页的, 怎么会是带着跳到首页呢? 多方调试之后我才发现, 是因为没有传过去导致的, 也就是说, 我传递的是, 但后端收到的却是, 因此获取到之后的跳转地址从变成了, 也就是获取到之后带着跳转到了首页而非登录页

这个问题是我这个项目中遇到的最蛋疼的的问题, 我想也有不少人遇到, 因为网上各种问这个的, 也有各种解答这个的, 然后各种方式都有各种方式的道理, 但是似乎都不对, 而这正是这个问题的"奇妙"之处...

invalid signature

这是我遇到的最多次的问题, 网上搜了之后发现很多人也遇到过这个问题, 遇到配置错误可参照官方文档上进行排查: 附录5-常见错误及解决方法[31], 这个问题我调了好久, 总结一下大概需要注意那么几点:

1. 不要使用形式的路由, 和它后面部分会传不过去, 以及获取的时候, 获取成功回调回来的时候参数会在之前, 这可能会对签名造成影响, 需要考虑进去

2. 调后端签名接口的时候传的用这个: (这也是官方文档中推荐的做法)

3. 参照附录5-常见错误及解决方法[32]中的排错步骤逐一排查

4. 确保传给后端的和实际发起请求的, 以及后端拿去签名的三者一致

5. 苹果手机权限验证配置的时候会以第一次进入页面的为准(后面会提供可用的代码)

传给后端的和实际发起请求的一致这个问题都比较好调试, 关键是后端拿到我们传的去签名的时候是不是就是我们传过去的, 他们有没有再加其他的参数, 我这里遇到过一次报错是因为后端之前做微信公众号网页项目的时候苹果手机需要多加一个这样的参数才行, 然后我这个项目的时候也加了这个参数, 从而导致的报错

以及苹果手机需要特别处理一下, 下面部分会详细阐述

the permission value is offline verifying

这是我遇到另一个问题, 只是这个错是在苹果手机上遇到的, 安卓手机上并没遇到, 造成这个问题的原因是: 苹果手机权限验证配置的时候不但会以第一次进入页面的为准, 也会以第一次的为准. 解决方式是: 要么提前配置所有可能用到的接口, 要么只在每次用户产生交互的时候配置

我的处理方式是前者: 提前配置所有可能用到的接口

我这里需要禁用分享, 以及选择图片, 苹果手机提前配置二者, 然后在点击的时候就不再单独配置选择图片了, 不然就会报错: , 具体的代码下面会提供

选择图片之后将图片转为, 但遇到一个问题: 得到的无法显示, 这个问题我推测是差个类型, 为什么是推测呢, 因为这个问题最终是后端解决的, 本来是我这边来处理的, 但我在调微信权限验证配置的问题, 后端刚好有空, 就他处理了. 无法转成图片, 一般就是差个类型: , 这个问题需要留意

这里也贴一下我自己的代码, 欢迎小伙伴们在评论区跟我留言讨论

获取程序的运行平台的方法

:

签名的时候需要传平台参数, 因此需要判断一下当前运行平台是安卓还是

根据运行平台处理签名url的方法

:

安卓手机每次路由变更都重新获取, 苹果手机使用第一次进入的, 也就是说苹果手机需要记录第一次进入程序时候的, 后续使用的时候要从当中取, 的键名可以根据实际情况来修改, 比如在中调用一下这个方法, 然后就会根据当前的环境和操作类型做处理了:

:

后续在需要获取的代码中直接调或者使用即可

权限验证配置方法(wx.config)

:

方法只接收一个参数, 哪里需要配置哪里就调用这个方法, 同时传需要的即可. 方法内部获取签名数据的名称可以修改为自己的, 我这里是, 参数如果不一样也可以修改, 但一般都是平台参数和参数, 返回的结构一般也一样. 整个方法封装成了, 外部使用的时候方便以同步的形式来处理异步逻辑

选择图片(chooseImage)和获取本地图片(getLocalImgData)的方法

这里主要是将它们封装成了, 便于使用

:

:

人脸认证方法(选择图片之后将图片转为base64)

这里由于业务方的缘故, 因此并没有真正的做人脸认证, 只是简单得选一张图片或者拍个照传给后端

:

如果前端来处理无法显示的问题, 那么这里的就需要处理一下了, 这里写一下伪代码, 仅供参考:

同时这里需要注意的是语句中的捕获到的是代码块中抛出的第一个错误, 而这里具体指的是 的结果, 也就是构造函数中方法中接收的参数, 但如果函数中直接这个的话得到的将是的结果, 而不是结果, 也就是说这么做会导致函数返回的的状态是, 要想得到的结果, 必须使用方法处理一下: 

而具体使用自然是应该先进行配置, 然后再使用, 例如:

方法里面的会依次执行, 当且仅当第一个之后的 了, 确切的说是状态变成了之后, 第一个之后的代码才会执行, 也就是说当这个的状态是或者的时候, 它后面的代码一定不会执行. 变为则后续代码正常执行, 变为则后续代码不执行, 且会抛出错误, 这个错误可以由语句中的捕获, 因此上面的写法和下面这个写法是等价的:

全局导航守卫(afterEach)处理微信权限验证配置(wx.config)设置微信分享

由于所有页面都需禁止分享, 因此可以考虑在中处理, 然后选择图片的话用户每次点击的时候再进行配置, 当然了, 需要区分一下安卓和苹果手机, 具体代码如下:

路由配置文件中, 关键代码:

苹果手机提前配置; 安卓手机只配置禁止分享, 后续用户点击的时候再单独配置选择图片即可

这里需要留意一下, 微信分享需要每个页面都配置, 比如只在页面配置, 那么在页面分享是正常的, 但换到页面, 然后在页面分享的话分享就不正常了, 就没法获取描述和图片了, 但是每个页面都配置代码就比较冗余, 此时也可以在中处理

这里也贴一下关键代码:

:

和一般是固定的, 和可能会因为发布的环境不同而不同, 比如生产环境和测试环境, 因此我把这两个参数写成了环境变量, 具体的使用也是要在配置之后进行: