258资源分享网

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

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

项目结构

我们都知道，小程序有自己的一套实现规范，下面我们看下小程序的项目结构，如下图：

一个入口文件：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里注册时填写路径就行

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

框架设计

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

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

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

工具类库

Ajax

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

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

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

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

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

cache

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

Model实现

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

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

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

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

3. 还有一点，model里方法命令有统一规范都是已get，add，update，del开头

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

组件模式