整理資料

第三方元件庫

• ZanUI這個是老版的，新版的現在是vant-weapp，現在來看這兩個可以互補。
• wux-weapp這個沒用過，但是光看效果功能比上面的多。
• weui-wxss微信官方的UI庫，瞭解下就行。因為上面三個隨便選一個，基本也就用不到它了。

1.引用元件➡Component

  引用第三方元件，和引用自定義元件的方式是一樣的（詳細請看微信小程式官方文件），Component以我Android菜鳥級別的開發經驗來講就是一種自定義控制元件。這裡我就先嚐嚐鮮，使用vant-weapp來練習引用第三方元件（下載地址）。引入全域性樣式和匯入資原始檔的說明請看vant-weapp官方文件

{
  "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中使用標籤，設定上相應的屬性就可以了。

<!--pages/test/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/view.wxml-->
<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屬性對應上。引入後介面中的程式碼如下：

<!--pages/test/index.wxml-->
<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`] : '修改索引唯一的元素'
        });
    },
});