这个项目是一个线下门店核销小程序,主要面向到店消费场景。用户进入小程序后,可以基于当前城市查看合作品牌和门店,选择门店后生成动态付款码,门店扫码确认后,用户在微信内完成支付,最后在小程序里查看支付结果和订单记录,形成完整的交易闭环。
点击空白处退出提示
语言技术
HTML5、CSS、JavaScript、Vue、TypeScript系统类型
小程序轻应用行业分类
企业服务、电商
这个项目是一个线下门店核销小程序,主要面向到店消费场景。用户进入小程序后,可以基于当前城市查看合作品牌和门店,选择门店后生成动态付款码,门店扫码确认后,用户在微信内完成支付,最后在小程序里查看支付结果和订单记录,形成完整的交易闭环。
该小程序端核心流程的开发,包括登录、首页品牌列表、门店列表、动态付款码、支付页、支付结果页,以及订单列表和订单详情这些模块。登录功能使用的是手机号授权登录的方式,定位用的小程序提供的wx.getlocation的api获取当前经纬度信息传给后台,动态码是根据后台返回的内容前端渲染的。
这个项目有几个我觉得比较重要的点。第一个是定位和城市选择,我们不是强制用定位城市覆盖用户手选城市,而是做了城市状态管理、定位缓存和切换提醒,这样既保证推荐准确,也兼顾用户主动选城的需求。
第二个点是动态付款码和状态轮询。因为线下核销场景里,门店扫码和用户支付不是同一步,所以我们在生成动态码后会轮询订单状态,识别是否进入待支付、是否过期;同时在页面隐藏、切后台时会停止轮询,回到前台再恢复,保证状态同步和性能开销之间的平衡。
第三个点是请求和登录态的统一处理。项目里把token、渠道参数、时间戳、签名都放在统一请求层里处理,接口异常、登录失效也统一拦截,这样页面层会更干净,也更方便维护
另外在工程上,我们做了小程序分包和预加载,比如订单模块、个人中心、webview 都拆到了分包里,降低主包体积,提升首页加载速度。




评论