citic-mini-program v1.2.5
测试账号
二卡:熊一岁 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);
}
5 months ago