1.微信小程序 tabbar 的策略
window 里面定义"navigationStyle": "custom",就可以把原来的 navbar 去除了
tabbar 完全不需要自己写页面，只在 app.json 里面配置就可以了！
2.新版小程序模版的 npm 构建策略
开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}据说新版本的开发者工具 miniprogramNpmDistDir 配置为'./'即可
必须这样设置才可以构建 npm，并且要关闭退出开发者工具，然后重新进入，再构建 npm 才可以识别到
3.凡是使用了 array.length 必须判空
这是前端非常非常常见的报错，并且会影响整个页面的展示，通常会在控制台报错，原因是后端返回的变量数据很可能是 null，肯定不能保证都不为空，但是为 null 的时候，是不可能有 length 属性的，所以一定报错！
只要是在 js 或者页面中使用了 array.length，一定要写为 array?.length，用于安全地访问数组的长度属性
array?length 和 array && array.length 的区别：
在大多数情况下，array?.length 和 array && array.length 是等价的，都用于检查数组的长度。它们的目的是在访问数组的 length 属性之前先进行安全检查，以避免在数组为 null 或 undefined 的情况下引发错误。
当 array 为 null 时，array?.length 返回 undefined，而 array && array.length 返回 null
?.（可选链操作符）是 ECMAScript 2020 中的新语法，可能不被所有 JavaScript 运行环境所支持。如果你的运行环境不支持 ?.，那么可以使用传统的 && 运算符进行条件访问。
4.利用 element.getAttribute 获取 dom 对象的自定义属性
自定义属性一般写为 data-xxx
5.微信开发者工具的调试策略
（1）通过调试器的 AppData 看当前 data 中数据的值
（2）在模版中打印 js 的值
6.遇到的坑以及小程序脚本语言 wxs 的引出
问题背景：
鉴于 vue 支持渲染时候用 includes 判断某数组是否包含当前项，但是经过试验最终发现小程序的 wxml 里面并不支持这个方法
最开始写的：
说明了一个问题：wxml 的模板语法里面并不支持 js 的 api 函数，也无法直接使用 js 里面定义的函数，那么我们就需要脚本语言 wxs，在 wxs 里面定义函数供 wxml 来使用！
WXS
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
注意
- WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
- WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致。
- WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的 API。
- WXS 函数不能作为组件的事件回调。
- 由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
例子：
<!--wxml-->
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>注意事项：
只能用 var（不支持 let 等）
不能使用 js 中的 api 函数，一般都是写原生的算法
实际应用：
注意上面的代码会报错，因为 wxs 里面同样不能用 includes，要自己定义逻辑：
7.sourceTree 丢弃不想上传的代码
我们在本地改了但是永远不想要上传的代码（不需要进行版本管理的代码），选择移除文件，那么我们上传的时候不会上传这些文件，我们拉取的时候也不会和这些文件 merge，是比较好的效果
8.white-space:nowrap 让内容处于一行不会换行
注意这个属性，可以让该 dom 无视外层宽度，可以冲破宽度始终处于一行
9.vue 弹出 mask 说明框的模版
<div class="mask" v-if="isShowDialog">
<div class="dialog">
<div class="title">代理商打地基五星高活榜规则说明</div>
<div class="content">
<div>
<div class="dt"><text>1</text>排行榜开始统计时间：2022年9月1日</div>
</div>
<div>
<div class="dt"><text>2</text>排行榜更新时间：每周一</div>
</div>
<div>
<div class="dt"><text>3</text>参与排行榜评选代理商范围</div>
<div class="dd">1.头部代理商：当月活跃学员数在40人及以上</div>
<div class="dd">2.中部代理商：当月活跃学员数在20人至39人</div>
<div class="dd">3.尾部代理商：当月活跃学员数在10人至19人</div>
</div>
<div>
<div class="dt">
<text>4</text
>排名规则：根据当月代理商五星学员在活跃学员中的占比进行排行，占比越高的排名越高。
</div>
</div>
</div>
<div @click="showDialog">我知道了</div>
</div>
</div>
<div class="title">
排行榜
<!--问号说明按钮：-->
<img
@click="showDialog"
src="https://statics.classba.cn/test/fe_public/projects/mini-program-agent/statics/images/rank/question.svg" />
</div>isShowDialog:false;
showDialog() {
this.isShowDialog = !this.isShowDialog;
},.mask {
position: fixed;
top: 0;
left: 0;
background: #00000080;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.dialog {
width: 640px;
height: 892px;
background: #ffffff;
border-radius: 24px;
overflow: hidden;
position: relative;
top: 40px;
}
.dialog .title {
height: 44px;
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #323232;
line-height: 44px;
margin: 48px 0 40px 0;
text-align: center;
}
.dialog .content {
margin-left: 48px;
margin-right: 48px;
font-size: 28px;
}
.dialog .content > div {
font-size: 28px;
margin-bottom: 26px;
}
.dialog .content > div text {
width: 40px;
height: 40px;
background: #e6e6e6;
border-radius: 50%;
display: flex;
justify-content: center;
margin-right: 16px;
flex-shrink: 0;
}
.dialog > div:last-child {
font-size: 32px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #58abf6;
height: 94px;
line-height: 96px;
background: -webkit-radial-gradient();
border-top: 1px solid #ebecef;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
.dt {
display: flex;
}
.dd {
margin-left: 56px;
margin-top: 10px;
}
.title {
display: flex;
align-items: center;
justify-content: center;
img {
display: inline-block;
width: 32px;
height: 32px;
margin-left: 4px;
}
}10.小程序中 bind 和 catch 的区别
在小程序中，catch 和 bind 是两种不同的事件绑定方式，它们在处理事件时有一些区别。
bind：bind是一种常见的事件绑定方式，用于将事件处理函数绑定到组件上。当事件触发时，事件会在触发源组件上被处理，然后继续冒泡到父组件，直到达到页面级别。bind绑定的事件可以冒泡，也可以被阻止冒泡。如果需要冒泡，则在事件处理函数中调用event.stopPropagation()可以阻止事件进一步冒泡。
示例：
<button bindtap='handleTap'>点击我</button>;
Page({
handleTap(event) {
console.log("点击了按钮");
},
});catch：catch是一种用于阻止事件冒泡的事件绑定方式。当事件触发时，事件会在触发源组件上被处理，然后停止冒泡，不再继续向上级组件冒泡。使用catch绑定的事件不会继续冒泡到父组件或页面级别。
示例：
<button catchtap='handleCatchTap'>点击我</button>;
Page({
handleCatchTap(event) {
console.log("捕获到了点击事件");
},
});区别总结：
bind用于常规的事件绑定，事件可以冒泡，可以通过event.stopPropagation()阻止冒泡。catch用于阻止事件冒泡，事件绑定在当前组件上，不会继续冒泡到父组件或页面级别。但是可以被子组件冒泡触发事件。
根据实际需求，选择适合的事件绑定方式。如果需要处理事件冒泡或在父组件中捕获子组件的事件，使用 bind；如果需要阻止事件冒泡并在当前组件中处理事件，使用 catch。
注意
catch事件处理器只能捕获一些特定的冒泡事件：
catchtap：用于捕获触摸点击事件
catchtouchstart：用于捕获触摸开始事件
catchtouchmove：用于捕获触摸移动事件
11.process.env.APP_ENV 环境变量
可以在 Node.js 服务中设置 process.env.APP_ENV 环境变量。在 Node.js 中，process.env 是一个全局对象，用于访问运行时的环境变量。
要设置 process.env.APP_ENV，可以在你的 Node.js 服务的入口文件或启动脚本中进行设置，例如：
process.env.APP_ENV = "production";上述代码将 APP_ENV 环境变量的值设置为 'production'。你可以根据你的需要设置不同的环境变量值，比如 'development'、'staging' 等。
一旦设置了 process.env.APP_ENV，它将在你的 Node.js 服务的整个生命周期中持续存在，你可以在应用程序的任何位置使用 process.env.APP_ENV 来获取该环境变量的值。
这样，我们在运行或者打包的时候，就可以根据这个环境变量，做出对应的接口调用等操作了
12.element 表单设置为必选（非空）的策略
不一定非要用使用 el-form 和 el-form-item 组件，然后定义 formRules 并绑定，这样还是相对麻烦了
这里以 el-date-picker为例，可以给其绑定的值设置一个初始值，然后将 clearable 属性设置为 false，不可清空，这样就一定有数据了，但是在向后端传参之前还是要判断一下是否为空，为空要弹窗