小程序封装公共方法/组件

封装

小程序通用网络请求加api封装
api封装与调用
当经常需要调用使用这个方法时，如果重复使用会增加代码的冗余，这个时候公共组件的封装就突显了它自身的价值了。
类似于封装请求接口一样

初始封装JS

创建公共方法

封装公共重复请求接口.js参考
封装组件 在小程序项目的根目录，创建一个common文件夹，这个文件夹中创建一个xxx.js
然后在方法的最后module.exports = {}。

// -----------------commonJs.js-----------------
let testTxt = "aaa";

function testFun(bbb) {
  testTxt = bbb;
  return testTxt;
}

module.exports = {
  testFun: testFun
}

使用公共方法

// -----------------index.js-----------------
const commonFun = require('../common/commonJs');
page({
  data: {},
  onLoad: function(options) {
    commonFun.testFun("BBB");
  }
})

初始封装WXSS

创建公共方法

封装组件 在小程序项目的根目录，创建一个common文件夹，这个文件夹中创建一个xxx.wxss
然后在方法的最后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
}

使用公共方法

// -----------------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>

初始封装组件

创建公共组件

封装组件 在小程序项目的根目录，创建一个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: '点击了'
      });
    }
  }
})

使用公共组件

// 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>

最重要的生命周期是 created、attached 和 detached ，包含一个组件实例生命流程的最主要时间点。

created：组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

attached：在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。

detached：在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。