1.2.5 • Published 5 months ago

citic-mini-program v1.2.5

Weekly downloads
-
License
ISC
Repository
-
Last release
5 months ago

测试账号

二卡:熊一岁 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可以将含有successfailcomplete方法的异步函数封装成promise函数

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

4 关于懒加载(lazyLoad)

对于长列表数据,基于体验与微信本身对小程序内存的限制,需要对其实现懒加载(对应组件lazyLoad)。组件需要监听小程序本身的组件scroll-viewbindscroll方法,且在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方法请参考:PromiseJavaScript 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);
}
1.2.5

5 months ago