微信小程序：封装公共复用方法（js及wxs）、封装组件
简介
在进行业务交互时，大概率都会重复使用同样的代码。这种时候，为了提交代码有效性，就需要小伙伴们把重复的代码封装到公共方法中，方便重复使用，也就是封装JS。
但是有的时候，数据比较复杂，来源比较多，业务处理不一样，这种时候，直接在显示数据的时候处理是比较方便的，也就是封装过滤的方法。
具体实现
1.封装JS
（1）创建公共方法
在小程序项目的根目录，创建一个common文件夹，这个文件夹中创建一个commonJs.js（命名规范一点即可），然后重点是规范的方法及最后的module.exports = {}。
// -----------------commonJs.js-----------------
let testTxt = "aaa";
function testFun(bbb) {
testTxt = bbb;
return testTxt;
}
module.exports = {
testFun: testFun
}
（2）使用公共方法
然后在要调用的JS文件里进行引入：
// -----------------index.js-----------------
const commonFun = require('../common/commonJs');
page({
data: {},
onLoad: function(options) {
commonFun.testFun("BBB");
}
})
2.封装WXS
（1）创建公共方法
在小程序项目的根目录，新建一个wxs文件夹，这个文件夹中新建wxs，命名commonWxs.wsx（命名规范一点即可），然后重点也是规范的方法及最后的module.exports = {}。
// -----------------commonWxs.wsx-----------------
var subStr = function (value) {
if (value.length == 0 || value== undefined) {
return;
}
if (value.length > 6) {
return value.substring(0, 5) + "...";
} else {
return value;
}
}
module.exports = {
subStr: subStr
}
（2）使用公共方法
在.wxml文件中通过wxs标签引用wxs文件，module="" 是定义一个别名（因为有可能引入多个wxs文件），使用的时候 别名.方法名 即可。
// -----------------index.js-----------------
data: {
txtMsg: "这里是测试文本字样，这里是测试文本字样，这里是测试文本字样"
}
// -----------------index.wxml-----------------
<view>
<!-- 引入wxs脚本 -->
<wxs src="../wxs/commonWxs.wxs" module="comTools" />
<!-- 使用wxs脚本前、后 -->
<text>{{txtMsg}}</text>
<text>{{comTools.subStr(txtMsg)}}</text>
</view>
3.封装组件
（1）创建公共组件
在小程序项目的根目录，创建一个components文件夹，然后新建一个文件夹，右键这个文件夹“新建 Components” ，可命名为test（注意命名规范一点即可）。
// test.wxml
<view>
<button style="color:blue;" bindtap="clickedFun">按钮</button>
<!-- 自定义插槽，添加其他内容 -->
<slot name="contentHeader"></slot>
<slot name="contentBody"></slot>
<slot name="contentFooter"></slot>
</view>
// test.js
Component({
/**启用多个插槽 */
options: {
multipleSlots: true
},
/**
* 组件的属性列表
*/
properties: {
title: {
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '' // 属性初始值（可选），如果未指定则会根据类型选择一个
}
},
/**
* 组件的初始数据
*/
data: {},
/**
* 组件的方法列表
*/
methods: {
clickedFun() {
console.log("点击了");
wx.showToast({
title: '点击了'
});
}
}
})
（2）使用公共组件
在需要调用的页面的js中引入组件，然后wxml中使用引入的标签，并传递需要的值，注意路径与命名。
// JSON文件中
{
"usingComponents": {
"test-demo": "/components/test/test"
}
}
// wxml文件中
<view>
<test-demo title="这里是参数">
<view slot="contentBody" style="border: 1rpx solid #999;height: 100rpx;width: 100%;background:red">这里是插槽</view>
</test-demo>
</view>
（3）组件的生命周期
最重要的生命周期是 created、attached 和 detached ，包含一个组件实例生命流程的最主要时间点。
created：组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
attached：在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
detached：在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
注意：组件在created的时候是不能调用setData的。
注意
文件命名可以任意，但是注意尽量规范合理，代码还是严谨一点的好，以后再来增删改查的时候方便读懂。
最后
觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！