微信小程序(前端实战篇)

原创 Cheers 教程 小程序 123阅读 7 天前 举报

主要记录一下在实践微信小程序过程中自己的思考和感受。

初识:微信小程序官网api给人一种简单、大方、舒服的直观感受,再加上不用下载很多app的快捷体验。最最重要的是用户群体具大这三大优势,奠定了它不可悍动的绝对位置。废话不多说,上干货。
项目简介:

1、主要:用于用户快捷支付;
2、次要:(1)查看和搜索城市门店;(2)我的个人信息;(3)订单列表;
3、支付方式:(1)扫码支付;(2)选择当前门店买单支付;

一、查看和搜索城市门店

1、用户一进入首页即提示用户授权当前位置;
(1)如果授权成功则可以获取用户当前位置的经纬度(微信的经纬度),再根据当前位置经纬度转换成其他地图的经纬度,然后根据其他地图经纬度获取当前城市名称及城市code,根据后台提供的接口,获取附近门店;

(2)如果用户拒绝授权,则默认定位北京(其他城市也可以,看需求),北京可以只传入汉字(string)或从后台获取城市名称及城市code,然后根据后台提供的接口默认加载北京城市市中心附近门店;

思考:授权成功和授权失败的唯一区别在于一个是根据当前位置匹配附近门店,一个是根据城市中心匹配附近门店。

细节:
(1)页面一加载时要根据微信提供的方式去检测是否已经授权,如果未授权,则授权通过,如果已经授权则默认加载。读到这是不是觉得有点代码已经重复了,我们是不是可以统一封装一下,然后调用即可(初次接触小程序授权要了解清楚,不懂的可以点击链接详细了解)。
(2)需要到相关地图官网查看微信经纬度转换成他们自己的经纬度,然后根据他们自己的经纬度,获取城市和城市code;

2、搜索当前城市门店;
(1)授权展示门店和搜索展示门店,我们要使用相同的两份内容展示,找一个中介(状态码),如果输入框不为空则展示搜索的门店,如果输入框为空,则展示授权的门店。这里可以用v-if和v-else来完成;

思考:为什么不用一份内容来展示搜索的门店和授权的门店呢,只要多判断几次就可以。那么如果输入框不为空则当前的list先为空,再根据接口加载数据;如果输入框为空,则当前的list也得先为空,然后再根据接口加载数据;假如现在这块只有一个需求,以后产品又会增加许多新的需求,你做的工作就要很复杂,原因是你在一开始打地基的时候就没想好,所以你要为你犯过的错买单。当然有时候买单也不是坏事,当然了如果能少走弯路,还能成功当是最好。嗯嗯,扯远了。这块延伸到后面还有很多值得思考的问题,这里不做过多解释。

这几天还会陆续更新,尽情期待。

评论 ( 2 )
最新评论
Cheers 1F 前天 16:19:16 2F

最近有点略忙,代码会在最后更新的。谢谢关注。

13475700311 前天 08:32:54 1F

没有代码呀?