微信小程序实践总结

【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来说暴露内部接口到外面。

module.exports实例

utils如下：

const formatTime = date => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()

  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
function recordTime(date) {
  var month = date.getMonth() + 1
  var day = date.getDate()

  var hour = date.getHours()
  var minute = date.getMinutes()

  return [month, day].map(formatNumber).join('/') + ' ' + [hour, minute].map(formatNumber).join(':')
}

const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}


module.exports = {
  formatTime: formatTime,
  recordTime: recordTime
}

其他页面引入

# 如index.js引入util.js使用
const util = require('../../utils/util.js')

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

---

② 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命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名

---

③ export default使用实例之暴露类

NumberAnimate.js

class NumberAnimate {
  constructor(opt) {
    //...
  }
  init() {
  //...
  }
} export default NumberAnimate;

index.js引入

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

④ export暴露匿名函数

//a.js
export default {
    index_slides: [{
            id: 1,
            slide_url: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360"
        }
    ]
}

//b.js引入
import mock from "./utils/a.js";

---

【2】require与import

node编程中最重要的思想就是模块化，import和require都是被模块化所使用。

require的基本语法

在导出的文件中定义module.export,导出的对象的类型不予限定（可以是任何类型，字符串，变量，对象，方法），在引入的文件中调用require()方法引入对象即可。

//a.js中
module.export = {
    a: function(){
     console.log(666)
  }
}
//b.js中
var obj = require('../a.js')
obj.a()  //666

本质上是将要导出的对象赋值给module这个的对象的export属性，在其他文件中通过require这个方法访问该属性。

import的基本语法

导出的对象必须与模块中的值一一对应，换一种说法就是导出的对象与整个模块进行结构赋值。

//a.js中
//最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{}
export default{   
     a: function(){
         console.log(666)
   }
}

export function(){  //导出函数

}
// 解构赋值语法(as关键字在这里表示将newA作为a的数据接口暴露给外部，外部不能直接访问a)
export {newA as a ,b,c}  

//b.js中
//import常用语法（需要export中带有default关键字）可以任意指定import的名称
import  a  from  '...'  

// 基本方式，导入的对象需要与export对象进行解构赋值。
import {...} from '...'  

//使用as关键字，这里表示将a代表biubiubiu引入（当变量名称有冲突时可以使用这种方式解决冲突）
import a as biubiubiu from '...'  

import {a as biubiubiu,b,c}  //as关键字的其他使用方法

require 是赋值过程并且是运行时才执行， import 是解构过程并且是编译时执行。

遵循规范

• require 是 AMD规范引入方式
• import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

调用时间

• require是运行时调用，所以require理论上可以运用在代码的任何地方
• import是编译时调用，所以必须放在文件开头

【3】全局/自定义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样式，如下所示：

//如下，在页面最上面放一个背景图
<view class='UCenter-bg'>
  <image src='/images/logo.png' class='png' mode='widthFix'></image>
</view>
//...

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