Skip to content

基于taro3 + react + redux + taro-ui,封装模板,上线于支付宝爱山东小程序

Notifications You must be signed in to change notification settings

DomeSy/Taro-city

Repository files navigation

Taro-city:山东省支付宝,爱山东

多端开发 taro3 + React + redux + taro-ui

心得

本是一个写React,不知道为啥进的公司用的Vue,大概也就混了一年吧,所以使用的redux,就当练手,重温下React吧,所有的页面大概都小于150行,不知道这么写对不对,秉承着React的一切皆组件的思想,所以把页面画的比较开,但逻辑也非常清晰,应该只要会React的都能看懂,如果你是刚入门写Taro的,我觉得有必要看看代码逻辑,当然高手并不适用,要说遗憾的一点就是这个项目应该是用TS和Mobx写的,当然如果Recoil正式推出的话,用作状态库应该就完美了

如果本项目对你有帮助,请不要吝啬你的star

目录结构

|-- config                                # Taro项目配置,包括别名等
|-- src                                   # 开发目录
|   |-- assets                            # 本地静态资源
|   |-- components                        # 业务组件
|   |-- pages                             # 页面模板
|   |-- actions                           # action
|   |-- constants                         # 状态名
|   |-- reducers                          # reducer
|   |-- store                             # 存储库
|   |-- styles                            # 全局css文件
|   |-- unilts                            # 公共方法
|   |   |--request                        # Taro接口封装
|   |   |--jmas                           # 有关jmas(公司产品)的接口封装和需要存储在状态库的文件
|   |   |--jump                           # Taro跳转逻辑封装
|   |   |--authFace                       # 人脸识别
|   |   |--method                         # 通用方法
|   |   |--reduxRequest                   # 统一请求方式
|   |   |--storage                        # 需要存储本地的方法
|   |   |--site                           # 站点
|-- .gitignore                            # git忽略文件
|-- babel.config                   
|-- package-lock        
|-- project.config.json        
|-- yarn.lock       
|-- yarn-error.log   
|-- README.md 

使用

  注意下使用的版本号 Taro 3.0.14

  npm install -g @tarojs/cli

  git clone https://github.com/DomeSy/Taro-city.git

  cd Taro-city

  yarn install 

  npm run dev:alipay

  npm run build:alipay

项目展示

在支付宝上搜索爱山东,即可看到效果

一期功能

登录模块,用户模块,搜索模块,主题服务模块,人脸识别模块等。封装接口,跳转方式,不同情况下未登录时跳转登录在跳转页面方式

异常页面

说明:封装请求异常时跳转的页面,并封装请求方式,点击刷新时重回到这个页面

逻辑:请求异常的时候卸载当前页面,当用户点击刷新时在重新跳转到请求异常的页面重新刷新

好处:方便,可以不用去管页面内的方法,如onLoad,componentDidMountd等

注意:跳转要注意是否是Tab页面,Tab页面需要用witchTab,否则用redirectTo

登录模块:

说明:对接用户体系是比较大的模块,这里的用户体系是通过封装的多端一体化的用户体系,所以通过WebView中的onMessage进行通行

功能:人脸识别,扫一扫,修改密码等功能

  1>登录完成跳会本页面(如登录,服务页的最近使用)

    这块分为两部分:跳会到原页面不做任何处理,跳会到原页面执行方法(这里需要在执行的方法自己判断,这里不封装统一的方法执行,如:意见反馈)
  
  2>登录完成跳到所指定的页面(如:我的空间的授权管理,跳转纯外链等)

  3>登录完成调到外链,但需要添加用户信息(原因:hybrid混合开发,一开始集成的主流APP,所以这块要将用户信息带入过去,在通过客户端封装的方法上获取用户信息等,之后也会做与客户端的通信来调取人脸识别,如所有需要用户信息的事项)

快登模块:

说明:原本这块是做的多端JIS,因样式满足于客户端,而不满足支付宝小程序,所以进行改版

功能:个人登录取消登录,直接通过支付宝进行快登,也就是说不需要调JIS统一页面,所以要在Taro中单独对接支付宝快登

  1>这块逻辑其实蛮简单的,只需要在在action单独创建个方法,获取在快登所要的token,即可,其余逻辑跟普通登录逻辑一样

  2>由于个人这里登录不需要走JIS,也就说用户信息页面也要改变,就是通过通信去哪支付宝存在的token,用来获得用户信息(JIS具体的做法这里就不讲解了)

人脸识别

说明:通过人脸识别来确定是否是本人,是本人才让办理,否则不让

逻辑:目前用my.ap.navigateToAlipayPage这种方式进行扫脸,大概思路是初始化生成认证编号单据,在生成认证。其重要ASE加密,在后在onShow阶段验证本次结构是否完成,前两步没什么问题,第三部有点问题,还有就是用avigateToAlipayPage这个方法,这个方法只是掉起人脸,因为要和H5通行,JSSDK会告诉我是否需要人脸,而我也会告诉客户端,所以通过此方法不行

站点模块:

说明:站点切换,

逻辑:山东省下面的城市有站点id作为参数来请求数据,站点切换因进行本地存储,原因比如说我一开始进入的省本级,而我在菏泽市,我希望一直在菏泽市的站点下,所以存储应该在本地

好处:可以每次进来都进入到切换时的站点(登录存在的话,退出登录应该清楚站点的缓存)

注意:因为是写死的数据,所以我把站点id保存起来,但这样有个问题,站点id如果改变就凉了,因为他会走本地哪的站点,这点一开始没考虑到,实施的把站点id改了,我才发现有这个问题(写死的数据都能随意变~~~)所以一开始有缓存的时候就遍历了下,通过省份名来拿站点id,如果你能把省份名做修改,那我认栽!!!

城市服务模块

说明:将小程序里的某个引用单独拿出来,做支付宝的一个应用

参考 [城市服务](https://opensupport.alipay.com/support/helpcenter/142/201602496413?ant_source=antsupport) 

逻辑:通过webView配置跳转地址,从而实现,这里的问题是:用户信息,有些跳转的应用需要用户信息

注意:三种情况: 
  
  1>无用户信息的直接跳转

  2>有用户信息但没登录,先跳转登录在跳转页面

  3>由用户信息已登录,token过期重新登录跳转页面,token没过期,直接跳转页面

测试:使用支付宝开发工具进行预览或调试,在三个点那有个联调设置需要打开,然后退出去打开链接即可

跳转模块和请求模块

跳转模块: 任何跳转形式都以封装,并能判断跳转的时候是哪个端进入

请求模块:

  1>封装基础请求模块,get,post等

  2>在通过基础请求的文件上增加jmas(公司产品,呵~)

二期功能

新增云监控功能

说明:针对城市服务所做的监控,也就是埋点

文档:服务拆解和服务监控:https://opendocs.alipay.com/open/019xsg?scene=SC00001026

用户体系整改

说明: 由于一开始做的页面是统一用户中心的也就是多端,但现在不满足需求,原因是界面适合于爱山东的,而并非小程序,所以要改下,用户体系分为个人和法人,将个人与法人进行拆分,将个人登录直接弄成快登,这里就需要在Taro中整改,目测比较麻烦~

增加智能客服

首页页面优化

原因

公司之前做的爱山东支付包小程序太过垃圾,导致现在要重构,这个项目就轮到我了,但我这个人恰好没有了解过支付包小程序,只会写基本的用法,与其使用学习小程序,不如学习Taro(站在React一端的),现在微信,支付宝,百度,京东,字节等小程序层出不穷,故多端肯定是以后的趋势(至于为什么不用公司产品直接搭建,大家都懂~)

Taro框架(问题)

1>redux-persist持久化在小程序内无法使用,只能使用存储

2>Taro在新办中获取路由的方法getCurrentInstance(),无法在H5中获取传递的参数,小程序可以

3>WebView中,postMessage方法会将传递的消息多包一层,并把传递的数据转成字符串,如res{data:'数据'},原生小程序直接传递,并且真机测试中也不会包起来

构建问题

1>组件问题:所谓组件就是可以服用,提高复用率,但当遇见较为复杂的组件封装时,要想复用,比如说列表,列表本身没有太多的难度,单给列表加上足够多的条件时,所需要的参数就变多了(如主标题,副标题,主标题后面显示的图案,是否跳转等)参数一多,那么固定的传的值也就必须固定了,这本身没有问题,但在大多数情况下列表的数据是接口返回的,里面的字段都不同,所展示的内容也就不同的字段,那么要是想用这个组件,必须要将接口返回的数据过滤出来,换成组件想用的参数作为替换,那么过滤这一步骤,感觉跟不用组件重新写个列表的过程差不多,那么还有必要使用组件吗?(这点,到底怎么样来创造出完美的组件问题)

2>目前我认为将获取的token然后调取接口获得用户信息,然后存入缓存,当用户关闭程序,再次打开时就能拿到自己的信息,为什么不重新通过调接口呢?(反正想的拿到的信息都一样,也就没必要调用接口,影响加载速度)

但是我想的有问题,原因是token,他并不是恒定的,是会有实效性,也就是说,我如果一直存在缓存里,这本身就是错误的,那么问题来了,我无法知道token是否是最新值,并不知道它存在多久才会刷新,那么我该如何知道他是最新的值呢?目前只能每次重新打开时小程序时调用登录接口,看是否能获取到信息,如果获取到,则证明token没有刷新,反之,清空所有缓存

在这里要说下,在小程序与H5做交互时,H5需要获取用户信息,也就是token奥

  我有点多虑的点,那就是什么时候调取登录接口呢,只在首次加载的时候就调用吗?是不是在跟h5做交互的时候再次调取登录接口看是否是最新的token呢?这样不是很影响性能吗?  其实这点完全没有必要去考虑,原因很简单他是小程序,不是支付宝(App),百分之九十九都会用完直接关闭的,这点时间token是不可能刷信息,所以不需要考虑。(考虑过多~~~,那么剩下的百分之一呢,大家都懂)
  
那么有人可能会说我在打开的一瞬间token是存在的,过了一两秒token失效了怎么办?那我觉得概率太低,说白了也无法去解决。

About

基于taro3 + react + redux + taro-ui,封装模板,上线于支付宝爱山东小程序

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published