微信小程序笔记（二）摆脱不会css的烦恼，快速引用三方UI库

整理资料

第三方组件库

• ZanUI这个是老版的，新版的现在是vant-weapp，现在来看这两个可以互补。
• wux-weapp这个没用过，但是光看效果功能比上面的多。
• iView Weapp功能也是十分的齐全。
• weui-wxss微信官方的UI库，了解下就行。因为上面三个随便选一个，基本也就用不到它了。

1.引用组件➡Component

  引用第三方组件，和引用自定义组件的方式是一样的（详细请看微信小程序官方文档），Component以我Android菜鸟级别的开发经验来讲就是一种自定义控件。这里我就先尝尝鲜，使用vant-weapp来练习引用第三方组件（下载地址）。引入全局样式和导入资源文件的说明请看vant-weapp官方文档，附上一张我练习的目录结构。

  接下来来看如何使用组件，在使用上很简单。首先就是在当前界面中的Json配置文件中配置好要引用的控件的名称和路径。最重要的就是路径，名称随便起就行，但是不能起中文名!这里以组件库提供的【Steps 步骤条】组件为例，在index.json中引入组件。

{
  "usingComponents": {
    "step": "../../dist/steps/index"
  }
}

  然后根据Steps步骤条组件的使用说明来配置数据源。也就是配置Steps组件需要的属性值。在index.js文件中配置功能性代码：

// pages/test/index.js

class StepItem {
    constructor(text, desc) {
        this.text = text;//序号
        this.desc = desc;//描述
    }
}

Page({

    /**
     * 页面的初始数据
     */
    data: {
        steps: [],
        index: 3
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.setData({
            steps: [
                new StepItem('步骤一', '描述一'),
                new StepItem('步骤二', '描述二'),
                new StepItem('步骤三', '描述三'),
                new StepItem('步骤四', '描述四')
            ]
        });
    }

});

  最后一步就简单了，在index.wxml中使用标签，设置上相应的属性就可以了。

<step steps="{{ steps }}" active="{{ index }}"/>

接下来看下Step组件的效果吧。

2.自定义组件的创建和引用

  这里为了让样式显得规整一点，同样在自定义的组件中引入了一些现有的组件。自定义组件的Json配置如下所示：

{
  "component": true,
  "usingComponents": {
    "van-icon": "../dist/icon/index",
    "van-row": "../dist/row/index",
    "van-col": "../dist/col/index"
  }
}

  接下来在自定义组件的js文件中设置，自定义组件的属性名和属性类型。大致如下：

// view/view.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        title: String,
        desc: String
    },

    /**
     * 组件的初始数据
     */
    data: {},

    /**
     * 组件的方法列表
     */
    methods: {}
});

  随后就是设置自定义组件显示的效果。大致如下：

<view class="mine-cell">
    <van-row>
        <van-col span="5">
            <text>{{ title}}text>
        van-col>
        <van-col span="17">
            <text>{{ desc}}text>
        van-col>
        <van-col span="2">
            <van-icon name="arrow" class="pull-right"/>
        van-col>
    van-row>
view>

  用到的样式如下：

/* view/view.wxss */
.mine-cell {
    padding: 12px 15px;
    -webkit-box-align: center;
    align-items: center;
    line-height: 1.4;
    background-color: #fff;
    font-size: 14px;
    border: solid 1px silver;
}

.pull-right {
    float: right;
}

  最后在想要使用该组件的界面的json文件中引入，注意路径不要配错了。

  使用方式如下，该组件有两个属性，都是String类型的，所以都设置字符串就行。这里为了方便，就不在js文件中设置了，直接在页面中赋值了。

<mine-view title="测试标题" desc="测试内容"/>

  效果如下，如果还想要知道具体的使用方式，一个就是看官方文档。还有一个方法就是直接查看第三方库组件的实现代码。比如“slot”标签怎么使用，直接看van-cell的实现方式就行了。

3.使用模板➡template

  这个用起来很是方便，也比较简单。一般也就两步就完事，创建一个模板，然后引入模板，只要引入路径不配错了，肯定就是好使的。接下来做一个列表，因为列表的item样式是一样的，这里就抽取item布局，也就是做一个单元格的模板。
  这里为了方便直接用的van-cell组件，注意这个组件需要在使用到它页面中配置一下。

  接下来创建item模板，也就item.wxml文件。创建完模板后准备一下列表的数据源。

  在item.wxml文件中设置，item的显示效果。注意template标签的name属性，它相当于改模板的唯一标识。在引用该模版时这个属性起到类似于id属性的作用。

<template name="item">
    <cell title="{{title}}" value="{{value}}" icon="completed" is-link/>
template>

  最后在界面中引入模板。这里template标签的is属性正好和之前创建模板的name属性对应上。引入后界面中的代码如下：

<import src="item.wxml"/>
<cell-group>
    <block wx:for="{{items}}" wx:for-item="item" wx:key="item">
        <template is="item" data="{{...item}}"/>
    block>
cell-group>

  最后看下列表的效果：

总结

  再加上一个引用js，对于基本的开发就没啥了。这些内容在微信的开发文档和微信小程序社区里的教程里都有说明。如果想要搜索相关资料直接Github微信小程序，就能搜出一堆资料。唯一注意的就是局部刷新了。比如单独修改某个对象的某个属性和某个数组的某个元素的某个属性。
  这里就附上如何局部刷新，效果啥的就不贴出来了。

1.修改绑定对象的某个属性值:

Page({

    /**
     * 页面的初始数据
     */
    data: {
        obj: {
            key: 'key',
            value: 'value'
        },
    },

    onLoad: function (options) {
        //方式一
        this.setData({
            [`obj.key`]: '方式一'
        });
        //方式二
        this.setData({
            "obj.key": '方式二'
        });
    },
});

2.修改绑定数组的某个元素包括修改元素的某个属性值:

Page({

    /**
     * 页面的初始数据
     */
    data: {
        items: [
            {title: '测试一', value: '测试内容一'},
            {title: '测试二', value: '测试内容二'},
            {title: '测试三', value: '测试内容三'},
            {title: '测试四', value: '测试内容四'},
            {title: '测试五', value: '测试内容五'},
            {title: '测试六', value: '测试内容六'},
            {title: '测试七', value: '测试内容七'},
        ]
    },

    onLoad: function (options) {
        //修改元素 以索引为0的元素为例
        this.setData({
            [`items[0]`] : {title: '修改测试一', value: '修改测试内容一'}
        });
        //修改元素的某个属性 以索引为1的元素为例
        this.setData({
            [`items[1].title`] : '修改索引唯一的元素'
        });
    },
});