2024龙年h5积分兑换活动需求实现记录

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日。

祝大家龙年大吉，生活愉快，玩得开心！！！