《王者荣耀周边商城》经验总结

大家好以下是《王者荣耀周边商城》小程序的一些经验总结也许能帮到你seo优化方案也许能帮到你也许也帮不到大家看着办哈因为时间有点早所以文中有些实现不是最新的最终请以官方文档说明为准废话不多说直接上高清无码大图。

以上截图是之前的版本中间做了改版大家可以直接扫码识别体验：

项目结构

d

一个入口文件：app.js

一个全局样式：app.wxss

一个全局配置：app.json

页面：pages下每个页面再按文件夹划分每个页面4个文件

index.js：实现页面整个生命周期的控制逻辑置顶显示时的界面交互

index.json：页面配置一个JSON对象详细可配置字段见这里

index.wxml：UI结构渲染可以理解为就是html主要支持定制标签更多标签见这里

index.wxss：UI样式渲染可以理解为就是css大部分css写法都支持。

当然在4个文件基础之下还有一些通用的功能组件支撑它们的运行。每一个页面都是这么几个文件组成非常规范统一并且每一部分也都限定了内部实现框架和规范所以在多人协作的时候产出相对也就比较规范。

注：pages里面还可以再根据模块划分子目录孙子目录只需要在app.json里注册时填写路径就行

以上是必须的文件和目录而实际中我们会增加别的目录如libcomm和utils等等目录。

框架设计

Web开发做得多了你就会发现大部分工作就是取数据渲染UI处理交互这三件事儿小程序也不例外所以按照这个框架逻辑我们基于小程序本身的框架规范又扩展和细化了下设计了下面的这套可直接应用于项目的开发框架。

下面我们继续详细理一下设计时的一些思路、出发点和具体的实现方式窥其面更要知其理。

注：这里我没有直接使用第三方的框架因为我个人觉得要学习一套技术还是需要从原生的模式开始着手虽然前期会比较痛苦一点但是这些付出都是值得的因为你一旦搞明白了本来的逻辑架构和原理你会发现什么框架都是信手拈来而且你也更能理解框架这样设计的优点和缺点。

工具类库

Ajax

实现了promise的封装支持GET POST PUT和DELETE这里设计的时候就确定为仅满足单项目通用即可所以实现的时候融入了部分业务层面的逻辑：

接口首次格式化兼容标准的json和var形式接口（内部有大量var形式的接口）

直接判断返回值在逻辑上是成功还是失败

针对返回未登录的情况自动跳转登录流程

所以省去了业务调用侧的反复判断处理通用逻辑使用更简洁。

cache

其实小程序自带了缓存接口有同步wx.setStorageSync异步wx.setStorage的方法但是实际在使用缓存的场景里我们一般都是需要设置缓存有效时间的本cache工具就是对小程序缓存接口的封装实现了对缓存有效期的支持。

Model实现

model层就不用多说了主要是把数据处理部分独立出来便于统一服务和维护这里重点强调下model内部的实现细节这里有一个实现技巧可以用在其它别的地方。下面直接上代码部分。

上面的代码我们可以看到几个关键点

1. 把参数处理和返回结果处理拆出来放到单独的处理方法里方法名称保持统一：formatParamsformatResult

2. 同时最外层定义好默认的formatParamsformatResult如果不做特殊处理直接使用默认即可（建议不处理也调用下默认方法规范流程）

3. 还有一点model里方法命令有统一规范都是已getaddupdatedel开头

这个思路其实可以运用到任何场景特别是在没有任何限定框架的场景我们只需要按照这个模式去实现代码一样很清晰漂亮比如我后面实现LOL内置竞技场道具商店的时候就是为了减少不必要的框架冗余代码就直接徒手写的同样是拆分为model和view层然后model按上面的规范实现代码同样很清晰强烈建议大家实践下简单实用。