微信小程序实践总结

【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样式,如下所示:

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

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

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值