Weapp影视评分项目开发（04）：三方组件的使用

theme: devui-blue

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

微信小程序从基础库 2.2.1 版本开始支持使用 npm 方式安装三方组件，本篇文章介绍如何在开发者工具中安装与使用三方组件。
关于如何实现一个微信小程序的 npm 包，请查看我的另一篇文章：详解：实现微信小程序组件库并发布到npm。
本篇文章对应代码分支为：component

知识点

三方组件库的安装与使用 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 目录，该目录下可查看构建后的组件库文件包，之后便可引入与使用组件。

  

3. 组件库的使用

• 全局注册
  在 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.js
  import 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              // 将合并后的代码提交到远程分支

最后

以上即为本项目中所使用到的三方组件库的介绍，更多使用细节，将会在之后的开发代码中体现。