测试账号

二卡：熊一岁 360424199111250025 13311250025

一卡：测试 110101199003072316 15622743538

微信小程序介绍

1、目录结构

src  
├── app.js --------------- 主入口  
├── app.json  ------------- 主配置   
├── app.wxss  ------------- 主样式
├── assets  -------------- 资源文件  
│   ├── images  ----------- 所有图片存放的位置   
│   │   ├── common  ------- 公共部分图片   
│   │   ├── pageA   -------- 页面图片  
│   │   └── pageB  -------- 页面图片    
|   └── wxss  -------------  公共样式  
├── common  ---------------  公共js资源  
├── components  -----------  所有组件  
│   ├── componentsNameA  --  根据组件类型对组件文件夹起名  
│   └── componentsNameB   
|   |__ ...  
| 
├── pages  --------------- 所有页面  
│   ├── pagesA   
│   └── pagesB  
├── plugins  --------------- 第三方插件  
└── utils  ----------------- 工具集

2、注意点

1 使用import, export方法。

2 关于loading

页面loading的状态，不要一个一个请求单独去设置，只需要在页面onLoad的时候，加入uitls.requestListner去监听loading的状态，具体如下：

onLoad: function() {
    uitls.requestListner((loading) => {
        this.setData({
            "loading": loading
        })
    })
}

3 关于promise

utils中的promiseWrap可以将含有success、fail、complete方法的异步函数封装成promise函数

utils中的request封装了微信的的wx.request、wx.uploadFile、wx.downloadFile方法，如果不传入第三个参数，默认发request，这三个函数由于都有并发限制，所以都加入了队列，同样可以使用uitls.requestListner方法。

4 关于懒加载（lazyLoad）

对于长列表数据，基于体验与微信本身对小程序内存的限制，需要对其实现懒加载（对应组件lazyLoad）。组件需要监听小程序本身的组件scroll-view的bindscroll方法，且在init时传入列表元素的高度（因此此组件只适用于元素高度固定的）等参数。当页面滚动到需要实行懒加载的地方时，组件会将this.data.zx_lazyLoad.index的值设置为当前的index。

对于这个index，你可以在页面图片数组的index和这个index的值相同时，将图片数据内添加一个show属性，并将其设为true。

对于每个图片的显示和不显示，有下面两种用法：

<image wx:if="{{item.show}}" src="{{item.url}}"></image>

这样可以减少不必要的内存消耗

<image wx:if="{{item.show}}" src="{{item.show?item.url:'default.jpg'}}"></image>

这样可以实现懒加载，在需要图片显示的时候再加载

3、部分功能封装

1 工具类的封装

请求统一通过utils.request的方法发送，如果多个请求同时发出，会以队列的方式先发送五个后根据返回，顺序发送余下的。

请求等异步方法，都会用到promise的方式（后续再封装除request外的异步方法）。

promise方法请参考：Promise，JavaScript Promise迷你书

大部分之前的工具方法，已经封装进utils，自己写的工具方法都写入这个文件夹。

2 组件封装

组件统一放在components文件夹，具体的用法如下：

i 将js、wxss、wxml引入，以listFliter为例，

在需要引入组件的页面的wxss文件中引入：

@import '../../components/listFliter/listFliter.wxss'

在需要引入组件的页面的js文件中引入：

import listFliter from '../../components/listFliter/index';

在需要引入组件的页面的wxml文件中引入：

<import src="../../components/listFliter/listFliter.wxml"/>
<template is="zx-listFliter" data="{{zx_listFliter}}"></template>

其中data为组件需要用到的数据

ii（如果无js的组件，不需要下面这些过程）

将需要引入组件页面的indexObject和引入的js合并

let index = Object.assign({}, listFliter, indexObj);
Page(index)

在组件listFliter中导出的方法就是可以调用组件的方法，使情况调用。

export default {
  zx_listFliter_init: init,
  zx_listFliter_toggle: toggle,
  zx_listFliter_select: select
};

在onLoad中初始化组件本身的data,或者说挂靠到需要引入组件页面的data上

onLoad: function(options) {
  this.zx_listFliter_init({}, this);
}