微信小程序代码优化3个小技巧
发布于 3 年前 作者 ofan 188 次浏览 来自 分享

抽取重复样式

样式复用

我们会发现很多时候在开发的过程中会存在多个页面中都用到了同样的样式，那么其实之前有提到过，公用样式可以放在app.wxss里面这样就可以直接复用。

如：flex布局的纵向排列，定义在app.wxss里面

.flex-col{
  display: flex;
  flex-direction: column;
}

然后其他页面可以直接使用组合样式：

通用的写在app.wxss里面，个性化的在具体页面编写。

以上是样式的复用，还有一种是样式中常用的具体属性值设置成变量，便于复用。

属性复用

使用CSS自定义属性（变量）
声明一个自定义属性，属性名需要以两个减号（–）开始，属性值则可以是任何有效的CSS值。

page {
  --color:#F8D300
}

注意：需要在app.wxss定义，这样所有页面的wxss才能使用。
使用一个局部变量时用 var() 函数包裹以表示一个合法的属性值：

.content-btn {
  background: var(--color);
}

同样的除了颜色，还有一些统一的边距、大小、等等属性都可以。

抽取重复方法

做过小程序开发的同学应该都知道都知道app.js是可以全局共享的。那么这个时候如果有多个页面都需要用到的方法和属性就可以全部写在app.js里面。
如下所示：

// app.js
App({
  randomMsg(){
    let msgs = this.globalData.msgs
    let msg = msgs[Math.floor(Math.random() * msgs.length)];
    return msg
  },
  globalData: {
    msgs:["你好吗？","加油鸭！","早点睡！","奥利给！","别熬夜！"]
  }
})

页面使用方法：

const app = getApp()

Page({
  onLoad: function (options) {
	console.log(app.globalData)
    console.log(app.randomMsg())
  },
})

适用场景：在小程序里面共享都是一次应用生命周期中会有多个页面使用到的数据，小程序重启后将全局变量会重新初始化。

安装第三方包

除了可以提取方法到utils里面达到了便于复用。有时候我们维护常用工具类成本很高，而且我们要去深入去了解里面的API，这个时候我们用别人维护的工具类。

这个时候我们就会去github查找相关的开源库，找到合适的就需要进行使用。使用通常有两种方式：

  1. 直接复制原来到自己的项目中
  2. 使用 npm 包进行远程引用

具体引用可以查看我之前写过的文章：《微信小程序如何引入npm包？》

总结

  1. 无论是 css 样式还是 js 方法都要尽可能的抽象复用，这样才能提升整体效率。
  2. 在优化的过程中先局部再整体，没有最好只有更好，基于业务场景来做优化。
  3. 常用的工具类就不需要重复发明轮子，学会使用已有第三方开源库可提升效率。
回到顶部