微信小程序实践总结

矫情吗；* 2023-02-12 08:28 13阅读 0赞

## **【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"
    }

通常使用微信默认的窗口即可，但是如果想实现特殊效果就需要自定义样式，如下所示实现头部背景图效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70]  
这里可以看到只保留了右上角的胶囊图标。

--------------------

**② 自定义window**

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

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

如果不配置`"navigationStyle": "custom",`，那么将会微信小程序将会默认window，即使你在页面json文件中什么也不配置，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 1]  
可以看到头部仍有保留了默认window占位。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 2]

在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~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020052917432670.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200529175436615.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200529175508962.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0owODA2MjQ=,size_16,color_FFFFFF,t_70