知识点
三方组件库的安装与使用 computed 的安装与使用
新建代码分支
我们以 master 为基准，在 gitee 上新建代码分支 component，并在该分支上进行代码开发。命令如下：
git pull // 拉取 component 分支
git checkout component // 切换到 component 分支进行开发
一、Mind UI Weapp 组件库
1. 组件库的介绍
本项目使用的组件库为 Mind UI Weapp，该组件库是我为本项目所开发的原生 UI 组件库，支持 npm 方式安装。
2. 组件库的安装
-
组件库安装
npm i mind-ui-weapp -S* 组件库构建安装完毕后，会生成node_modules文件夹，点击 微信开发者工具 的 本地设置 ，勾选 使用 npm 模块 选项，再点击顶部菜单 工具 -> 构建 npm，构建完成后，会生成miniprogram_npm目录，该目录下可查看构建后的组件库文件包，之后便可引入与使用组件。 -
全局注册在
app.json文件中的usingComponents对象下引入注册，便可在全局中使用。一般会将使用频率高的组件在全局中注册。{"usingComponents": {"m-button": "mind-ui-weapp/button/index",}}* 页面/组件注册在页面或组件的xxx.json文件中注册组件（以button组件为例）"usingComponents": {"m-button": "/mind-ui-weapp/button/index"}在模板中使用<m-button type="primary">按钮</m-button>*border.wxss组件库中内置Retina屏幕下的1px边框，样式基于css伪类::before与::after的transform实现。如果模板中的样式已使用伪类，请在其外层增加一层元素进行包裹，防止样式冲突覆盖。/* app.wxss 或 app.scss */@import "miniprogram_npm/mind-ui-weapp/assets/style/border.wxss";* 样式覆盖*Mind UI Weapp中的所有组件都开启了addGlobalClass: true，外部页面样式可以直接覆盖组件内部样式，组件样式命名空间为m-，请避免项目中样式名称与其产生冲突。* 在自定义组件中使用组件Mind UI Weapp组件时，如果需要覆盖样式，需要开启styleIsolation: 'shared' -
JS 方法组件的使用目前支持
JS调用的组件有toastmessagemodal三种。虽然可以在页面或组件的.js文件中，通过import方式引入组件代码，但我还是强烈建议在app.js引入并挂载在全局属性wx上，并将组件在app.json中注册为全局组件，可以避免使用时需要引入，且引入路径需要使用相对位置的麻烦。// app.jsimport Toast from 'mind-ui-weapp/toast/toast'import Message from 'mind-ui-weapp/message/message'import Modal from 'mind-ui-weapp/modal/modal'wx.$toast = Toast; wx.$message = Message;wx.$modal = Modal;任意页面或组件的js中使用wx.$toast('simple toast');使用时需要在页面模板中写入对应组件<m-toast id="toast" />注意：如果在组件中使用时，需要在引入组件的页面模板中写入对应的组件，在组件中写入是无效的。### 二、miniprogram-computed插件
1. miniprogram-computed 的介绍
该插件是由微信小程序官方提供，官方解释：小程序自定义组件扩展 behavior，计算属性 computed 和监听器 watch 的实现。在 data 或者 properties 改变时，会重新计算 computed 字段并触发 watch 监听器。通俗说就是类似 vue 的 computed 与 watch 的实现，与 vue 的差异是 computed 中不能使用 this，data 中的值可通过 computed 参数传入；watch 无 Vue 的 handle 支持。
2. miniprogram-computed 的安装
npm i miniprogram-computed -S
安装完成后同样需要使用开发者工具进行 npm 构建 才可使用。
3. miniprogram-computed 的使用
const = require('miniprogram-computed').behavior; // 引入计算属性组件
Component({behaviors: [computedBehavior],// 注入 mixins...
})
为避免 computedBehavior 每次在使用处引入，我们可以将它在 app.js 中挂载到 wx 对象上。
// app.js
const computedBehavior = require('miniprogram-computed').behavior;
wx.computedBehavior = computedBehavior;
使用：
// 组件中
Component({behaviors: [wx.computedBehavior],// ...
})
// 页面中
Page({behaviors: [wx.computedBehavior],data: {a: 1,b: 1,},computed: {sum(data) {// 注意： computed 函数中不能访问 this ，只有 data 对象可供访问// 这个函数的返回值会被设置到 this.data.sum 字段中return data.a + data.b;}},// ...
})
三、Git 设置
安装的三方包文件不需要 git 进行托管，所以需要在 .gitignore 中将相关文件进行忽略：
# .gitignore 文件中新增以下文件名称
package-lock.json// 本地包管理文件
/node_modules// 三方包
/miniprogram_npm // npm 构建后的三方包
将本地代码提交到线上：
git add . // 将本地代码添加到缓存区
git commit -m "UI 组件库与 computed 组件的安装与使用"// 将缓存区代码添加到本地仓库
git pull // 拉取远程代码
git push // 将代码提交到远程仓库
将 component 分支代码合并到 master
git checkout master // 切换到主分支
git merge component // 将 copmponent 分支代码合并到当前分支
git push// 将合并后的代码提交到远程分支
最后
以上即为本项目中所使用到的三方组件库的介绍，更多使用细节，将会在之后的开发代码中体现。
最后
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
有需要的小伙伴，可以点击下方卡片领取，无偿分享