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、解决过程

  1. 删除node_modules,重新安装,打包,部署,无果。
  2. 替换node版本,更换package.json部分依赖的版本,一通操作,无果。
  3. 更换vant和router在main.js中的引入顺序,网上查看资料,有网友反映也遇到了该问题,无果。
  4. ....

折腾了大半天,感觉解决问题的思路有误,既然是测试环境部分样式错乱,根还在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日。

祝大家龙年大吉,生活愉快,玩得开心!!!

相关推荐
li35743 小时前
将已有 Vue 项目通过 Electron 打包为桌面客户端的完整步骤
前端·vue.js·electron
Icoolkj4 小时前
VuePress 与 VitePress 深度对比:特性、差异与选型指南
前端·javascript·vue.js
excel4 小时前
CNN 分层详解:卷积、池化到全连接的作用与原理
前端
excel4 小时前
CNN 多层设计详解:从边缘到高级特征的逐层学习
前端
西陵5 小时前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld6 小时前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷7 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军7 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离7 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库