微信小程序开发

小程序相关开发

在去年11月小程序开放内测，公司为能在公测吸引第一波小程序的流量，故要求我们前端开发出一款公司业务的app，这里记录下开发时候遇到的问题～

组件开发

  小程序有三个文件.js(js文件)、wxml(html文件)、wxss(css文件)，怎么来做到组件开发，这里有个merge函数用来合并 Page 对象所有的方法及事件，每个组件是一个Page对象，具体方法如下：

 /*
 * 合并 Page 对象所有的方法及事件
 * 子对象不能使用 data 属性，请在 onLoad 中使用 setData 方法设置
 */
function mergePage(dest, ...src) {
  let args = arguments;
  let eventsStack = {
    onLoad: [],
    onReady: [],
    onShow: [],
    onHide: [],
    onUnload: [],
    onPullDownRefresh: [],
    onReachBottom: [],
  };
  // 保存所有的 事件，从最后一个开始执行
  for(let name in eventsStack) {
    for(let i = args.length - 1; i >= 0; i--) {
      args[i][name] && eventsStack[name].push(args[i][name])
    }
  }
  // Object.assign(...args);
  // Object.assign 需要添加 polyfill 兼容 Android（不支持数组参数展开）
  Object.assign.apply(null, args);
  for(let name in eventsStack) {
    dest[name] = function() {
      for(let i = 0; i < eventsStack[name].length; i++) {
        eventsStack[name][i].apply(this, arguments);
      }
    }
  }
  return dest;
}

  应用组件 每个页面有Page对象

//引入组件 .js
const sku = require('../../components/sku/sku')

Page(util.mergePage({
  //业务代码
},sku)//合并

.wxml,.wxss import组件相应模版(template is名字与name一致)、wxss

  开发组件

.wxml
<tempalte name="xxx"></template>
.wxss 
 就直接写 类似sass less模块化
.js
let sku={}
mould.exports=sku  //CommonJS方式

主要是mergePage这个函数去合并Page对象所有的方法及事件,其它一些输出就是常用的CommonJS方式或es6方式