简介

===============================================================================

小程序开发规范相对轻松，有两种选择，第一种选择，使用小程序基础api做开发，第二种选择，使用自研框架idxwrd-min-program-framework进行开发，使用其他第三方框架开发均视为无效。

接口地址：http://47.116.34.238:1980/swagger-ui.html

目前已开发的框架内组件使用手册及拓展内容：

===============================================================================

目录简介

===============================================================================

小程序开发目录 /cpfan_plant/min-program

小程序目录结构

以上目录结构，由上到下依次为：

1. components 组件开发存放文件目录
2. framework 框架相关内容存放文件目录
3. image 图标，图片资源存放路径
4. modules 框架数据处理模块存放文件目录
5. pages 页面存放目录
6. theme 公共主题类xcss文件存放地址
7. 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中使用

数据处理模块主要包括一下四个属性：

1. name
   模块名称，也是模块引用时需要标注的内容
2. cache
   缓存，声明并初始化缓存，如果其他模块内存在同名缓存，则保持原有值不变，如果不存在则使用此处定义的内容进行初始化，类似小程序默认demo中getApp().global操作，全局通用
3. data
   当前页面、组件的data，在数据模块中定义的并不会因为引用而处处相同，相反是完全独立的。
4. 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方法中，有两个比较重要的公共方法：

1. stream
   这个方法主要用于处理复杂的流程逻辑，需要严格按照某个流程进行数据处理，但所有步骤均为异步的情况下使用，该方法的第一个参数为数组，可在其中定义复数的方法来确定流程内容，当异步操作成功石，调用commit方法进入下一步，否则可调用discount中断流程逻辑，第二个参数为日志参数，每一个commit和discount方法被调用的时候，都可以输入对应的日志或者其它参数，该参数都会被传入stream的第二个参数的方法内，进行更细致的统一处理。

2. 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)