微信小程序实践总结

矫情吗；* 2023-02-12 08:28 173阅读 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如下：

  1. const formatTime = date => {
  2.   const year = date.getFullYear()
  3.   const month = date.getMonth() + 1
  4.   const day = date.getDate()
  5.   const hour = date.getHours()
  6.   const minute = date.getMinutes()
  7.   const second = date.getSeconds()
  9.   return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
  10. }
  11. function recordTime(date) {
  12.   var month = date.getMonth() + 1
  13.   var day = date.getDate()
  15.   var hour = date.getHours()
  16.   var minute = date.getMinutes()
  18.   return [month, day].map(formatNumber).join('/') + ' ' + [hour, minute].map(formatNumber).join(':')
  19. }
  21. const formatNumber = n => {
  22.   n = n.toString()
  23.   return n[1] ? n : '0' + n
  24. }
  27. module.exports = {
  28.   formatTime: formatTime,
  29.   recordTime: recordTime
  30. }

其他页面引入

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

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

② export、import、export default

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

  1. // test.js
  2. var name = 'jane';
  4. export {name};

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

  1. //在index.js里面引入并使用
  2. 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

  1. class NumberAnimate {
  2.   constructor(opt) {
  3.     //...
  4.   }
  5.   init() {
  6.   //...
  7.   }
  8. } export default NumberAnimate;

index.js引入

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

④ export暴露匿名函数

  1. //a.js
  2. export default { 
  3.     index_slides: [{ 
  4.             id: 1,
  5.             slide_url: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/37dfdc929ee9a4313facb0b23ebcd721.jpg?thumb=1&w=720&h=360"
  6.         }
  7.     ]
  8. }
  10. //b.js引入
  11. import mock from "./utils/a.js";

【2】require与import

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

require的基本语法

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

  1. //a.js中
  2. module.export = { 
  3.     a: function(){ 
  4.      console.log(666)
  5.   }
  6. }
  7. //b.js中
  8. var obj = require('../a.js')
  9. obj.a()  //666

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

import的基本语法

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

  1. //a.js中
  2. //最常使用的方法,加入default关键字代表在import时可以使用任意变量名并且不需要花括号{}
  3. export default{    
  4.      a: function(){ 
  5.          console.log(666)
  6.    }
  7. }
  9. export function(){   //导出函数
  11. }
  12. // 解构赋值语法(as关键字在这里表示将newA作为a的数据接口暴露给外部，外部不能直接访问a)
  13. export { newA as a ,b,c}  
  15. //b.js中
  16. //import常用语法（需要export中带有default关键字）可以任意指定import的名称
  17. import  a  from  '...'  
  19. // 基本方式，导入的对象需要与export对象进行解构赋值。
  20. import { ...} from '...'  
  22. //使用as关键字，这里表示将a代表biubiubiu引入（当变量名称有冲突时可以使用这种方式解决冲突）
  23. import a as biubiubiu from '...'  
  25. import { a as biubiubiu,b,c}  //as关键字的其他使用方法

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

遵循规范

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

调用时间

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

【3】全局/自定义window

① 微信默认全局配置

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

  1. "window": {
  2.     "backgroundTextStyle": "light",
  3.     "navigationBarBackgroundColor": "#3cb371",
  4.     "navigationBarTitleText": "企业助手",
  5.     "navigationBarTextStyle": "white"
  6.   },

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

  1. //leave.json
  2. {
  3.   "usingComponents": {},
  4.     "enablePullDownRefresh": true,
  5.     "backgroundTextStyle": "dark",
  6.     "onReachBottomDistance": 50,
  7.   "navigationBarTitleText": "请假列表",
  8.   "navigationBarTextStyle": "white"
  9. }

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

② 自定义window

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

  1. "window": {
  2.     "navigationBarBackgroundColor": "#39b54a",
  3.     "navigationBarTitleText": "yd",
  4.     "navigationStyle": "custom",
  5.     "navigationBarTextStyle": "white"
  6.   },

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，173人围观）

还没有评论，来说两句吧...

相关阅读