网站怎么做流量,移动宽带续费网上营业厅,网站建设书籍资料,php网站开发实例教程 源码抽取重复样式
样式复用
我们会发现很多时候在开发的过程中会存在多个页面中都用到了同样的样式#xff0c;那么其实之前有提到过#xff0c;公用样式可以放在app.wxss里面这样就可以直接复用。
如#xff1a;flex布局的纵向排列#xff0c;定义在app.wxss里面
.flex-co…抽取重复样式
样式复用
我们会发现很多时候在开发的过程中会存在多个页面中都用到了同样的样式那么其实之前有提到过公用样式可以放在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.msgslet 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查找相关的开源库找到合适的就需要进行使用。使用通常有两种方式
直接复制原来到自己的项目中使用 npm 包进行远程引用
具体引用可以查看我之前写过的文章《微信小程序如何引入npm包》
总结
无论是 css 样式还是 js 方法都要尽可能的抽象复用这样才能提升整体效率。在优化的过程中先局部再整体没有最好只有更好基于业务场景来做优化。常用的工具类就不需要重复发明轮子学会使用已有第三方开源库可提升效率。
