微信小程序实践总结

【1】module.exports、exports、export、import、export default使用与区别

① module.exports与exports

module.exports和exports 是commonJs的语法，大家熟知的node就是基于CommonJs语法设计的，node将每个文件视为一个拥有独立作用域链的模块，每个木块的类，变量，函数等都是私有的，对其他文件不可见。但是，如果别的模块想要使用另一个模块的函数应该如何处理呢，这时我们就会用到module.exports、exports了。

node将每个独立的文件视为一个mudule，而exports是为了将本模块内的变量函数暴露给外面使用的写在mudule对象上的接口，因此使用时可以通过module.exports来说暴露内部接口道外面。

function tapName(event, ownerInstance) {
  console.log('tap wechat', JSON.stringify(event))
}
function catchName(event, ownerInstance) {
  console.log('catchwechat', JSON.stringify(event))
}
module.exports = {
  tapName: tapName,
  catchName:catchName
}

module.exports既可以通过点语法，也可以直接赋值一个对象:

module.exports.tapName=tapName

页面require引入使用实例

// page-common-behavior.js
module.exports = Behavior({
  attached: function() {
    // 页面创建时执行
    console.info('Page loaded!')
  },
  detached: function() {
    // 页面销毁时执行
    console.info('Page unloaded!')
  }
})
// 页面 A
var pageCommonBehavior = require('./page-common-behavior')
Component({
  behaviors: [pageCommonBehavior],
  data: { /* ... */ },
  methods: { /* ... */ },
})

node为了方便使用会给每个模块头部提供一个exports变量，内部实现很简单var exports = module.exports。

function tapName(event, ownerInstance) {
  console.log('tap wechat', JSON.stringify(event))
}
exports.tapName = tapName

---

② export、import、export default

ES6使用 export 和 import 来导出、导入模块：

// test.js
var name = 'jane';

export {name};

其他js文件可以使用import引入使用：

//在index.js里面引入并使用
import {name} from '../../modules/test.js'

Notes:

• export与export default均可用于导出常量/函数/文件/模块等；

• 在一个文件或模块中，export/import可以有多个，export default只有一个；

• 通过export方式导出，在导入时需要加{}，export default不需要；

• export能导出变量/表达式，export default不可以。

• CommonJS模块输出是一个值的拷贝，ES6模块输出是值的引用。

• CommonJS模块是运行时加载，ES6模块是编译时输出接口。

• CommonJS模块无论require多少次，都只会在第一次加载时运行一次，然后保存到缓存中，下次在require，只会去从缓存取。

---

③ export default使用实例

NumberAnimate.js

class NumberAnimate {

  constructor(opt) {
    let def = {
      from: 50,//开始时的数字
      speed: 2000,// 总时间
      refreshTime: 100,// 刷新一次的时间
      decimals: 2,// 小数点后的位数
      onUpdate: function () { }, // 更新时回调函数
      onComplete: function () { } // 完成时回调函数
    }
    this.tempValue = 0;//累加变量值
    this.opt = Object.assign(def, opt);//assign传入配置参数
    this.loopCount = 0;//循环次数计数
    this.loops = Math.ceil(this.opt.speed / this.opt.refreshTime);//数字累加次数
    this.increment = (this.opt.from / this.loops);//每次累加的值
    this.interval = null;//计时器对象
    this.init();
  }
  init() {
    this.interval = setInterval(() => { this.updateTimer() }, this.opt.refreshTime);
  }

  updateTimer() {

    this.loopCount++;
    this.tempValue = this.formatFloat(this.tempValue, this.increment).toFixed(this.opt.decimals);
    if (this.loopCount >= this.loops) {
      clearInterval(this.interval);
      this.tempValue = this.opt.from;
      this.opt.onComplete();
    }
    this.opt.onUpdate();
  }
  //解决0.1+0.2不等于0.3的小数累加精度问题
  formatFloat(num1, num2) {
    let baseNum, baseNum1, baseNum2;
    try {
      baseNum1 = num1.toString().split(".")[1].length;
    } catch (e) {
      baseNum1 = 0;
    }
    try {
      baseNum2 = num2.toString().split(".")[1].length;
    } catch (e) {
      baseNum2 = 0;
    }
    baseNum = Math.pow(10, Math.max(baseNum1, baseNum2));
    return (num1 * baseNum + num2 * baseNum) / baseNum;
  };
} export default NumberAnimate;

index.js引入

//index.js
//获取应用实例
import NumberAnimate from "../../utils/animate.js";
let numberAnimate =new NumberAnimate ()

---

【2】全局/自定义window

① 微信默认全局配置

json文件配置中有一块针对于window的配置，如全局配置文件app.json中配置如下：

  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#3cb371",
    "navigationBarTitleText": "企业助手",
    "navigationBarTextStyle": "white"
  },

如果页面得json文件没有配置window属性，那么将会采用默认app.json中的配置。如果页面json文件中配置了当前页面窗口的属性，将会覆盖掉app.json中的配置：

//leave.json
{
  "usingComponents": {},
    "enablePullDownRefresh": true,
    "backgroundTextStyle": "dark",
    "onReachBottomDistance": 50,
  "navigationBarTitleText": "请假列表",
  "navigationBarTextStyle": "white"
}

通常使用微信默认的窗口即可，但是如果想实现特殊效果就需要自定义样式，如下所示实现头部背景图效果：

这里可以看到只保留了右上角的胶囊图标。

---

② 自定义window

自定义window就是去掉了微信小程序默认的头部window，将空间让出来给你使用(可以理解为将page进行了拉伸)。自定义window样式需要在app.json里面配置，如下所示"navigationStyle": "custom",：

  "window": {
    "navigationBarBackgroundColor": "#39b54a",
    "navigationBarTitleText": "yd",
    "navigationStyle": "custom",
    "navigationBarTextStyle": "white"
  },

如果不配置"navigationStyle": "custom",，那么将会微信小程序将会默认window，即使你在页面json文件中什么也不配置，如下：

可以看到头部仍有保留了默认window占位。

在app.json对window进行了自定义配置后，可以在页面wxml里面配置自己window样式，如下所示：

//如下，在页面最上面放一个背景图

  

//...

这时候(即在app.json中配置了"navigationStyle": "custom",)即使你在页面json中配置了window样式也不会起作用。将会直接渲染页面wxml~