1、需求
时光荏苒，"人教点读"APP陪伴大家走过与时俱进的七年多，在过去的2600多天里，我们一起努力学习，积累点滴知识，扩展学识视野，提升综合素质，建立文化自信。值此年末岁尾，"人教点读"APP启动"积分兑好礼"活动，回馈长期以来坚持学习的孩子们。
2、技术栈
vue2 + less + vant + loadsh
3、使用到的vant组件
- Overlay 遮罩层组件
- Toast 轻提示
- AddressEdit 地址编辑
- Area 省市区选择
4、flex中order使用
之前面试用到过，但工作中没有使用场景，所以也不是很清楚。
这次遇到一个需求，使用vant的地址编辑组件，底部按钮的设计和ui正好相反，需要按ui来实现。
知识点：
order属性：这个属性用于设置子元素的顺序。默认情况下，所有子元素的order属性值为0，可以通过设置不同的正数或负数来改变顺序。数值越小，元素越靠前显示。
5、交互
历史原因，该APP为混合开发（Hybrid App开发）模式，首页和登录页都由安卓和ios端来实现，这次的积分兑换活动为h5页面，所有就涉及到一个交互问题。
该项目使用的prompt，一共有2个地方涉及到交互。
1、进入活动页面，查看我的兑换和查看礼品详情，需要在登录状态下进行，用户未登录时，先跳转至登录页进行登录。
封装方法：
javascript
//进入登录页
export function Loginstatus(data) {
const param = {
"command": "loginstatus"
}
Object.assign(param, data)
return prompt(JSON.stringify(param))
}使用：
php
//进入原生登录页
Loginstatus({ status: "toAppLogin" }); 2、兑换过程中，用户积分不足或礼品已兑磬，提示用户返回APP首页。
封装方法：
javascript
//进入APP首页
export function toAppHome() {
const param = {
'command': "NavgationStackToHomepage",
'pageIndex': '0'
}
return prompt(JSON.stringify(param))
}使用：
toAppHome
6、遇到问题
项目在本地开发环境成功运行，发布至测试环境部分样式错乱。
7、解决过程
- 删除node_modules，重新安装，打包，部署，无果。
- 替换node版本，更换package.json部分依赖的版本，一通操作，无果。
- 更换vant和router在main.js中的引入顺序，网上查看资料，有网友反映也遇到了该问题，无果。
- ....
折腾了大半天，感觉解决问题的思路有误，既然是测试环境部分样式错乱，根还在css上。
最后发现，样式错乱的元素，class起的名字，语义化特别强，如change、name、button、notice。
因使用到了组件，这些也继承了组件的样式，但我在项目中已经用了scoped做限制，但测试环境还是出问题了。
MMP，无语.....
8、解决
样式错乱的地方，重新命名class。
注：以后命名的时候，涉及到三方组件的地方，语义化不要太要强啊，适当地rua一些，哈哈！
9、嵌套到端上(Android 和 Ios)中出现的问题
1. 安卓中下拉刷新和vant地址编辑组件中的地区选择的下拉刷新相互冲突，导致无法选择地区。
解决：安卓端人为屏蔽。
2. ios中在操作过程中点击返回不是返回上一页，而是退出页面，回到了APP首页
解决：每个页面都用新窗口单独打开
kotlin
let routeData = this.$router.resolve({
path: '/presentDetails',
query: { pid: this.pid }
});
window.open(routeData.href, '_blank');
3. ps：webView嵌套单页面应用，只会捕捉到首页地址---h5/addressEdit
写在最后
该活动访问入口为人教点读APP首页banner位置，欢迎大家下载、体验，更重要的是要薅羊毛啊，哈哈哈！
活动时间为2023年12月28日-2024年1月4日。
祝大家龙年大吉，生活愉快，玩得开心！！！