知识点

三方组件库的安装与使用 computed 的安装与使用

新建代码分支

我们以 master 为基准，在 gitee 上新建代码分支 component，并在该分支上进行代码开发。命令如下：

git pull // 拉取 component 分支
git checkout component // 切换到 component 分支进行开发 

一、Mind UI Weapp 组件库

1. 组件库的介绍

本项目使用的组件库为 Mind UI Weapp，该组件库是我为本项目所开发的原生 UI 组件库，支持 npm 方式安装。

• 组件库源码：https://github.com/NameLi/mind-ui-weapp
• 组件库文档：https://mind-ui-weapp.ixook.com

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 调用的组件有 toast message modal 三种。虽然可以在页面或组件的 .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 支持。

• 官方源码：https://github.com/wechat-miniprogram/computed

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的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享