简介
===============================================================================
小程序开发规范相对轻松，有两种选择，第一种选择，使用小程序基础api做开发，第二种选择，使用自研框架idxwrd-min-program-framework进行开发，使用其他第三方框架开发均视为无效。
接口地址：http://47.116.34.238:1980/swagger-ui.html
目前已开发的框架内组件使用手册及拓展内容：
===============================================================================
目录简介
===============================================================================
小程序开发目录 /cpfan_plant/min-program
小程序目录结构
以上目录结构，由上到下依次为：
- components 组件开发存放文件目录
- framework 框架相关内容存放文件目录
- image 图标，图片资源存放路径
- modules 框架数据处理模块存放文件目录
- pages 页面存放目录
- theme 公共主题类xcss文件存放地址
- utils 公共工具类js存放地址
===============================================================================
开发细节要求
===============================================================================
小程序基础api开发
基础小程序api请参考官网地址https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html
注：
使用小程序基础api进行开发，单次任务价格将有所下降。
使用 idxwrd-min-program-framework 框架开发
wx.module({
imports: ['childModule'],
name: 'demoName',
cache: {},
data: {},
methods: {
demoRequest({
page,
modules,
cache
}, callback = {}){},
demoEventMethod({
page,
modules,
cache
}, callback = {}){}
}
});
Page({
imports: ['demoName'],
context(modules, cache){
this.stream([(commit, discontinue)=>{}], (msg)=>{});
this.initPageData();
this.on('show', ()=>{});
modules.demoName.demoRequest();
return {
demoClick: (e) => {
modules.demoName.demoEventMethod(e);
}
}
}
})
Component({
imports: ['demoName'],
context(page, modules, cache){
this.stream([(commit, discontinue)=>{}], (msg)=>{});
this.on('show', ()=>{});
modules.demoName.demoRequest();
return {
demoClick: (e) => {
modules.demoName.demoEventMethod(e);
}
}
}
});
以上为数据处理模块js，页面js，组件js三部分的基础写法。
注：
数据处理模块编写完成后，需要在app.js中引用，默认引用目录为module文件夹下，引用后，该数据处理模块就可以在多个page和comment中使用
数据处理模块主要包括一下四个属性：
-
name
模块名称，也是模块引用时需要标注的内容 -
cache
缓存，声明并初始化缓存，如果其他模块内存在同名缓存，则保持原有值不变，如果不存在则使用此处定义的内容进行初始化，类似小程序默认demo中getApp().global操作，全局通用 -
data
当前页面、组件的data，在数据模块中定义的并不会因为引用而处处相同，相反是完全独立的。 -
methods
数据处理模块的方法，该方法可以在对应的页面、组件中通过，modules.模块名.模块方法来进行调用。
每个methods中的方法默认接受两个参数，第一个参数包含三个变量page，modules，cache，分别表示当前用户所使用的页面，数据处理模块集合和缓存，可以根据数据处理需求，统一操作页面（类似setData()等），imports进来的子模块方法。第二个参数为方法调用时传入参数，即在该方法被使用的时候，可以允许且只能传入一个对象作为参数，而传入的对象将在这里被接收，通常情况下做参数即回调函数的使用，可以参考framework/modules/userInfo.js文件（该数据处理模块包含了整个前后端的登录校验逻辑，可以在需要的页面或者组件中灵活使用）
page与comment的写法基本相同，均使用imports属性引入数据处理模块（如果没有必要，也可以不引用），均使用context方法作为初始化方法。不同点是，page内的context通过this获取到的基础类型方法比context更多（比如页面跳转等详见下方api）。comment内的context中通过this可获取到的基础方法较少，同时，在参数中，比page中的context多了一个page参数，表示当前组件所在的页面，通过page参数，也可以调用当前组件所在页面内的方法。
context方法必须返回一个对象，该对象表示当前page和context的可调用方法，可以在wxml里通过bindxxx形式进行事件绑定。
context方法中，有两个比较重要的公共方法：
-
stream
这个方法主要用于处理复杂的流程逻辑，需要严格按照某个流程进行数据处理，但所有步骤均为异步的情况下使用，该方法的第一个参数为数组，可在其中定义复数的方法来确定流程内容，当异步操作成功石，调用commit方法进入下一步，否则可调用discount中断流程逻辑，第二个参数为日志参数，每一个commit和discount方法被调用的时候，都可以输入对应的日志或者其它参数，该参数都会被传入stream的第二个参数的方法内，进行更细致的统一处理。 -
on
这个方法用于绑定页面、组件加载时机，即原本应该写在其中的onShow等方法，此处可以使用on方法使用框架托管的方式来进行加载，这样就可以在对应的加载时机内调用数据处理模块，同时保留该加载时机对应的参数使用
===============================================================================
api
===============================================================================
通用
缓存（可以在context方法内使用传入的cache，也可以通过this.cache调用，页面加载时，控制台会打印当前页面加载时的缓存内容）
cache
uuid(此处并不是一个方法而是一个动态变换的属性，每一次调用该属性获取到的uuid都是不同的)
uuid
base64（与微信小程序api内的base64编/解码方法相同）
base64Encode(encodeStr)
base64Decode(decodeStr)
MD5
hexMd5(s)
b64Md5(s)
strMd5(s)
hexHmacMd5(key, data)
b64HmacMd5(key, data)
strHmacMd5(key, data)
日期
/**
* date: 需要格式化的日期
* fmt: 格式化通配符
* y：年
* M：月
* d：日
* h：小时
* m：分
* s：秒
* S：毫秒
*/
dateFormat(date, fmt)
请求（config内容是在wx.request基础上拓展的，原有wx.requset内的参数依然有效）
/**
* config = {
* params: {}, url参数，会在url后用?key=value的形式添加参数
* data: {}, reqeustBody参数
* formData: {}, 使用formData形式提交参数
* requestSuccess: ()=>{},
* requestFailure: ()=>{},
* requestError: ()=>{}
* }
*/
doRequest(config)
/** 基于doRequest的二次封装，方便做get请求*/
doGet(config)
/** 基于doRequest的二次封装，方便做post请求*/
doPost(config)
路由（可以使用this调用，也可以在wxml里直接使用事件绑定）
redirectTo(url)
<view bindtap="redirectTo" id="url"></view>
navigateTo(url)
<view bindtap="navigateTo" id="url"></view>
navigateBack(delta)
<view bindtap="navigateBack" id="-1"></view>
流程处理（元素查询可参见微信小程序API：https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html）
/**
* fnList：流程函数列表，数据类型-数组
* step：流程执行阶段，每一次通过或者跳出都会被触发执行
* end：流程正常结束后，执行该函数
*/
stream(fnList, step, end)
/**
* 查询页面内单个元素
*/
select(selector, handle)
/**
* 查询页面内所有附和的元素
*/
selectAll(selector, handle)
日志
logDebug()
logInfo()
logWarn()
logError()
Page context
初始化页面参数，参数为undefined的时将不加入当前page的data中
initPageData({
key: value
})
页面生命周期绑定，与原生绑定内容一致
/**
* eventName:
*
* load 生命周期回调—监听页面加载
* show 生命周期回调—监听页面显示
* ready 生命周期回调—监听页面初次渲染完成
* hide 生命周期回调—监听页面隐藏
* unload 生命周期回调—监听页面卸载
* pullDownRefresh 监听用户下拉动作
* reachBottom 页面上拉触底事件的处理函数
* shareAppMessage 用户点击右上角转发
* pageScroll 页面滚动触发事件的处理函数
* resize 页面尺寸改变时触发，详见 响应显示区域变化
* tabItemTap 当前是 tab 页时，点击 tab 时触发
*/
on(eventName, handler)
Component context
组件生命周期绑定，与原生绑定内容一致
/**
* eventName:
*
* created 组件生命周期函数-在组件实例刚刚被创建时执行
* 注意此时不能调用 setData )
* attached 组件生命周期函数-在组件实例进入页面节点树时执行)
* ready 组件生命周期函数-在组件布局完成后执行)
* moved 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)
* detached 组件生命周期函数-在组件实例被从页面节点树移除时执行)
*/
on(eventName, handler)
网友评论