整理資料 第三方組件庫 1.引用組件?
引用第三方組件，和引用自定義組件的方式是一樣的（詳細請看微信小程序官方文檔），以我菜鳥級別的開發經驗來講就是一種自定義控件。這里我就先嘗嘗鮮，使用來練習引用第三方組件（下載地址）。引入全局樣式和導入資源文件的說明請看，附上一張我練習的目錄結構。
接下來來看如何使用組件微信小程序引用外部js，在使用上很簡單。首先就是在當前界面中的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>
用到的樣式如下：
css">/* 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文件中引入，注意路徑不要配錯了。
使用方式如下，該組件有兩個屬性，都是類型的，所以都設置字符串就行。這里為了方便，就不在js文件中設置了，直接在頁面中賦值了。
<mine-view title="測試標題" desc="測試內容"/>
效果如下，如果還想要知道具體的使用方式，一個就是看官方文檔。還有一個方法就是直接查看第三方庫組件的實現代碼。比如“slot”標簽怎么使用，直接看van-cell的實現方式就行了。
3.使用模板?
這個用起來很是方便微信小程序引用外部js，也比較簡單。一般也就兩步就完事，創建一個模板，然后引入模板，只要引入路徑不配錯了，肯定就是好使的。接下來做一個列表，因為列表的item樣式是一樣的，這里就抽取item布局，也就是做一個單元格的模板。
這里為了方便直接用的van-cell組件，注意這個組件需要在使用到它頁面中配置一下。
接下來創建item模板，也就item.wxml文件。創建完模板后準備一下列表的數據源。
在item.wxml文件中設置，item的顯示效果。注意標簽的name屬性，它相當于改模板的唯一標識。在引用該模版時這個屬性起到類似于id屬性的作用。
<template name="item">
<cell title="{{title}}" value="{{value}}" icon="completed" is-link/>
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，對于基本的開發就沒啥了。這些內容在微信的開發文檔和微信小程序社區里的教程里都有說明。如果想要搜索相關資料直接微信小程序，就能搜出一堆資料。唯一注意的就是局部刷新了。比如單獨修改某個對象的某個屬性和某個數組的某個元素的某個屬性。
這里就附上如何局部刷新，效果啥的就不貼出來了。
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`] : '修改索引唯一的元素'
});
},
});