虎啸数据小程序开发总结

虎啸数据小程序初衷是一款依据虎啸数据-文化创意平台进行数据展示的小程序。主要内容是一些榜单、详情、数据echarts展示及对比。后期平台方向变化，有添加一些活动及项目详情及报名部分（导致内容较为复杂）。并未涉及太过于复杂的api，逻辑处理较为中等，在此回忆一番，就当总结一下经验。

注册登录部分

前期：用户进入小程序通过wx.login()获取到code，然后再通过wx.getUserInfo()获取到用户信息，将code与userInfo一起传到后台，以便获取openId作为唯一标识，同时将用户信息及openId存储到storage，方便在个人中心页面使用。（并未进行wx.checkSession（）判定登录态）。再次登录时判定storage中有无openId，无的话执行登录，有的话直接从storage获取信息进行操作。

中期：添加wx.checkSession（）判定登录态，过时重登录，未过时则再判定storage是否存在openId，无就重登录，有就直接获取

后期:由于小程序获取用户信息操作修改，导致之前用户操作有问题，所以又对登录进行修改。用户获取执行wx.login()获取code后直接传给后台获取openId。用户信息的获取另外设置给按钮，点击获得授权后取到用户信息。其余逻辑未进行修改。

坑：1、storage异、同步存储尽量保持同步，不然会存在这边存，那边却未获取到的情况。2、测试的时候记得清楚缓存，不然容易形成干扰。3、产品经理要对个人中心添加修改头像的操作，然而前后台逻辑过于混乱，最终拍板即使修改，下一次登录还是微信头像（感觉略坑）。4、获取图片调用wx.chooseImage()，返回的是临时路径，下次调用时想调用的话需要执行wx.saveFile()进行保存返回长久路径，这时临时路径会失效。

页面榜单部分

榜单部分分为主页面和四个榜单页面（后期首页修改，主要是一些活动项目介绍及报名部分）

主页面

这里需要介绍一下template模板，主页面和榜单页面上部分相同，使用了模板，直接引入即可。wxml直接引入需要模板部分的名称，传入数据即可，wxss引入template.css即可，js部分无法引入，需要在页面中自写。

主页面下半部分。当用户未查看任何榜单内容时，显示的是推荐内容（根据排名进行推荐）。当用户查看内容后，便会显示用户的查看记录，点击后直接进入详情页面，包括对比页面。

榜单页面

榜单展示做的是一个tab切换，之前试过页面跳转，由于back逻辑复杂便改为tab切换（是不是很傻）。上半部分引入的模板，下半部分根据点击控制状态进行展示。具有下拉刷新的操作，不过有数量限制

坑：1、数据的处理只能在js中进行处理。2、for循环需要添加key属性，当作一个标识（应该是的，不然会报错，虽然对页面没什么影响）。3、主页面点击榜单跳到相应榜单展示是传了一个参数，榜单页获取后展示相应榜单

详情页

展示一些信息以及用echarts实现的数据图。小程序开始写的时候，echarts并未支持小程序，于是我们在GitHub找到一个别人写的一个可以替代echarts效果的轮子进行使用，不过后期支持后又改为echarts，但是一些效果还未完善，所以不如PC端尽如人意，不过还是棒棒哒。详情页面分享的话，是通过路由传递参数实现数据分享的，通过路由获取的id再请求一次数据

坑：1、echarts图的图层级别比较高，有时在图层上执行滑动手机效果会失效。（暂时忘记如何处理，后期会在评论里添加），这个图有着不少坑，但是时间较久，有些忘记了，后期再添加，抱歉

对比页面

对比添加页面

通过筛选进行选择需要对比的人物。可以进行增删改查的操作（主要通过控制任务的Id进行修改，存到storage到另外页面进行获取）。可进行下拉刷新。智能匹配是负责数据分析的同事写的代码执行的，不过效果不甚理想。

坑：具体没什么坑，也就是js中for循环执行较多，不太好吧（不过也没想到好办法）

对比实现页面

就是详情页面多添加一到两组数据进行展示。如果跳转到添加对比页的话，当前的人会在添加对比页回显（通过storage的存取实现）。

当前首页

轮播以及下面的滑动效果都是使用的组件 swiper、scroll-view，相关可以查询一下，这个暂且不提，相关坑都已有涉及，只是页面展示一些。

总结一点点：

1、storage真是个好东西，所有的东西都朝里面塞，随用随取，只要不清空的话。不过如果有更新的话，之前的storage会造成不当影响

2、小程序蛮方便快捷的，各种api、组件基本能满足需求，希望更好

3、感谢github.com/xiaolin3303…之前就是使用这个替代的echarts。同时感谢echarts在小程序端的维护者，辛苦了，很赞。

求建议，求批评，1年+经验，求指导

转载于:https://juejin.im/post/5b3dd3495188251b3950bc56