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

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

相关推荐
MiyueFE17 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子21 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟2 小时前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计