Ø 簡介

本文主要記錄微信小程式的開發筆記（上），主要包括以下內容：

1. 微信小程式基礎

2. 佈局

3. 檢視容器

4. 檢視層技術

5. 基礎元件

6. 表單元件

1. 微信小程式基礎

1) 微信小程式介紹

具有出色的體驗，可以被便捷地獲取與傳播，適合有服務內容的企業和組織註冊。

2) 開發環境安裝與配置

1. 首先，下載開發IDE（微信開發者工具）

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2. 下載之後進行安裝即可。

3) 註冊微信小程式賬號

註冊微信小程式分為有公眾號和無公眾號（已認證），這兩種情況下注冊小程式是不一樣的

，下面分別介紹：

1. 無公眾號

1) 進入微信公眾平臺：https://mp.weixin.qq.com/，點選立即註冊

2) 選擇“小程式”，按照註冊步驟進行即可。

2. 有公眾號（已認證）

1) 登入微信公眾平臺：https://mp.weixin.qq.com/

2) 左側小程式中-> 小程式管理 ->新增 -> 快速註冊並認證小程式，根據註冊流程即可。

注：需要新的郵箱作為登入小程式的賬號。

3. 繫結開發者和體驗者

進入微信公眾平臺-小程式，成員管理新增即可。

4) 開發微信小程式

5) 預覽和上傳小程式

1. 預覽小程式可以使用管理員微信或者開發者微信掃描預覽二維碼，在真機上進行預覽。

2. 上傳的微信小程式“微信公眾平臺-小程式”的版本管理中檢視到。

2. 佈局

1) 水平排列布局，設定父試圖樣式：

height: 100px;

display: flex; /*表示彈性佈局*/

flex-direction:row;

2) 水平折行排列布局，設定父試圖樣式：

flex-wrap:wrap;

3) 水平排列對齊佈局，設定父檢視樣式：

justify-content: center;

可選值：flex-start:左對齊（預設值）；center:居中對齊；flex-end:右對齊

4) 水平等間隔排列布局，設定父試圖樣式：

justify-content: space-between;

/*無邊距*/

5) 帶邊距的水平等間隔排列布局，設定父試圖樣式：

justify-content: space-around; /*有邊距*/

6) 垂直排列布局（預設為該佈局方式），設定父檢視樣式：

height:300px;

display: flex; /*表示彈性佈局*/

flex-direction:column;

7) 垂直折列排列布局，設定父檢視樣式：

flex-wrap:wrap;

8) 垂直排列對齊佈局，設定父檢視樣式：

align-items: center;

可選值：flex-start:左對齊（預設值）；center:居中對齊；flex-end:右對齊

3. 檢視容器

可以在檢視容器中放置子元件，小程式中的檢視容器分為三類：view、scroll-view、swiper.

1) scroll-view（滾動條）

scroll-view 支援垂直滾動和水平滾動。

1. 垂直滾動檢視

1) 設定scroll-view 的樣式：height:200px;

2) 設定scroll-view 的屬性：scroll-y="true"

3) 定位到指定的位置或子檢視

1. 滾動到指定的位置，預設值為0

scroll-top="100"

2. 滾動到指定的子檢視，"yellow"為子檢視Id

scroll-into-view="yellow"

2. 水平滾動檢視

1) 設定scroll-view 的樣式：width:100%; white-space:nowrap;

2) 設定scroll-view 的屬性：scroll-x="true"

3) 設定子元素的樣式：display:inline-block; width:200px; height:200px;

4) 定位到指定的位置或子檢視

1. 滾動到指定的位置，預設值為0

scroll-left="100"

2. 滾動到指定的子檢視，"yellow"為子檢視Id

scroll-into-view="yellow"

3. 滾動條事件

1) bindscrolltoupper

滾動到最上端或者最左端觸發的事件。

1. 在事件處理函式中可以使用 e.detail.direction 屬性獲取top 或left 來區分。

2. 可以使用 upper-threshold 屬性指定滾動條與最上端或者最左端相差多少距離時觸發，例如：upper-threshold="100"

2) bindscrolltolower

滾動到最下端或者最右端觸發的事件。

1. 在事件處理函式中可以使用 e.detail.direction 屬性獲取bottom 或 right 來區分。

2. 可以使用 lower-threshold 屬性指定滾動條與最下端或者最右端相差多少距離時觸發，例如：lower-threshold="100"

3) bindscroll

當滾動條滾動時觸發的事件。

1. 事件處理函式中 e.detail 屬性中屬性值如下：

1) scrollTop：垂直滾動時滾動條的當前位置，在水平滾動時該值為0。

2) scrollHeight：垂直滾動時所有子檢視的總高度。

3) deltaY：垂直滾動時的增量，也就滾動前與滾動後的位置。向下滾動時小於0；向上滾動時大於0。

4) scrollLeft：水平滾動時滾動條的當前位置，在垂直滾動時該值為0。

5) scrollWidth：水平滾動時所有子檢視的總寬度。

6) deltaX：水平滾動時的增量，也就滾動前與滾動後的位置。向右滾動時小於0；向左滾動時大於0。

2) swiper（輪播、輪詢圖檢視容器）

1. 屬性

1) indicator-dots: 是否顯示圓點，預設為false。

2) vertical: 是否顯示為垂直輪詢圖，預設為false。

3) current: 預設顯示第幾項（從0開始），預設為0。

4) autoplay: 是否自動切換輪詢頁面，預設為false。

5) interval: 自動切換的時間間隔，單位為毫秒，預設為5000 ms。

6) duration: 相鄰兩個頁面之間切換的動畫所經歷的時間，預設為1000ms。

7) circular: 是否採用銜接滑動，預設為false。

2. 事件

1) bindchange

當輪詢圖開始滾動時觸發。

4. 檢視層技術

1) 雙向繫結

<inputmodel:value="{{value1}}" />

注意事項：

1) 該元素如果沒有定義 bindinput 事件處理程式，會出現警告；

2) 不能繫結data 中物件中的屬性，例如：data.form.value1

參考：https://www.mnjblog.cn/article/51

2) 條件屬性

1. if 滿足條件時，比如：

<view wx:if="{{condition}}">滿足條件我就顯示</vie

2. if-elif-else 滿足某一個條件時，比如：

<view wx:if="{{count > 0 && count <= 10}}">count為1~10的數字</view>

<view wx:elif="{{count < 20 || count <= 30}}">count為11~30的數字</view>

<view wx:else>count不在1~30的數字</view>

3. block if-elif-else 滿足某個條件時，以塊顯示。

3) 迴圈屬性

1) for 迴圈輸出，例如：

<view wx:for="{{provinces}}">

provinces[{{index}}] = {{item}}

</view>

2) for-item 與for-index 屬性的使用

<view wx:for="{{provinces}}" wx:for-item="name" wx:for-index="i">

provinces[{{i}}] = {{name}}

</view>

3) block 巢狀迴圈

<block wx:for="{{[1,2,3]}}" wx:for-item="i">

<view wx:for="{{[1,2,3]}}" wx:for-item="j">

<view wx:if="{{i <= j}}">

i({{i}}) 小於等於 j({{j}})

</view>

<view wx:elif="{{i > j}}">

i({{i}}) 大於 j({{j}})

</view>

</view>

</block>

4) wx:key 屬性

1. 迴圈指定【物件陣列】輸出switch，以【屬性】為wx:key的值（需要唯一）

<switch wx:for="{{objectArray}}" style="display:block;" wx:key="unique">

item-{{item.id}}

</switch>

2. 迴圈指定【數字陣列】輸出switch，以【值】為wx:key的值（需要唯一）

<switch wx:for="{{numberArray}}" style="display:block;" wx:key="*this">

item-{{item}}

</switch>

5) 模板

1. 定義模板

<template name="rowSquares">

<view style="display:flex;flex-direction:row;">

<view class="bc_{{color1}}" style="width:100px;height:100px;"></view>

<view class="bc_{{color2}}" style="width:100px;height:100px;"></view>

<view class="bc_{{color3}}" style="width:100px;height:100px;"></view>

</view>

</template>

2. 引用模板

1) 方式一：傳遞固定個數的變數

<template is="rowSquares" data="{{ color1, color3, color2}}" />

2) 方式二：傳遞一個物件

<template is="rowSquares" data="{{ ...colorItem1}}" />

3. 定義未知數量的模板並引用

1. 定義資料

colorCountItem1: { colorArray: ['blue', 'yellow', 'red'] },

colorCountItem2: { colorArray: ['yellow', 'red'] },

colorCountItem3: { colorArray: ['red'] }

2. 定義與引用模板

<!--定義模板-->

<template name="rowCountSquares">

<view style="display:flex;flex-display:row">

<block wx:for="{{colorArray}}">

<view class="bc_{{item}}" style="width:100px;height:100px;" />

</block>

</view>

</template>

<!--引用模板-->

<template is="rowCountSquares" data="{{...colorCountItem1}}"/>

<template is="rowCountSquares" data="{{...colorCountItem2}}"/>

<template is="rowCountSquares" data="{{...colorCountItem3}}"/>

6) 引用

1. import 引用外部模板

1) 定模模板檔案，例如：mytemplate.wxml，在該檔案中寫入模板程式碼（同上）。

2) 匯入模板

<!--引用外部模板-->

<import src="mytemplate.wxml"/>

<template is="rowCountSquares" data="{{...colorCountItem1}}"/>

2. include 引用外部檔案程式碼內容

1) 定義程式碼檔案，比如：templateCode.wxml

<!--除了模板，其他程式碼都將被引入-->

<view>This is the code in the template file</view>

2) 引入外部程式碼

<include src="../template/templateCode.wxml"/>

<view>這是當前檔案的程式碼</view>

5. 基礎元件

1) text 文字元件

用於顯示文字，沒有什麼屬性，它支援轉義符"\n"（可用於換行）。text 中可以巢狀text, 例如：

<text style="margin:50px;font-size:20px;color:{{text_color}}">

這一段文字，變數：{{text1}}

<text sytle="color:#00ffff">這是巢狀文字</text>

</text>

2) icon 系統圖標元件

icon 用於顯示系統內建的一些圖示。

1. 屬性

1) size: Number 型別，用於設定圖示顯示的尺寸，預設為23。

2) type: String 型別，用於設定系統圖標的型別，包含15種類型的圖示，包括：success, info,warn, waiting, safe_success, safe_warn, success_circle, success_no_circle, waiting_circle, circle, download, info_circle, cancel, search, clear

3) color: Color 型別，用於設定圖示的顏色，與 css 中的 color 是一樣的。

3) progress 進度條

progress 用於顯示進度。

1. 屬性

1) percent: Float 型別，取值1~100之間數值，預設值為0。

2) show-info: Boolean 型別，是否顯示數值，預設值為false。

注意：只要設定了該屬性，無論設定什麼值都以true 值處理。

3) color: Color 型別，用於設定進度條的顏色，預設值為綠色：#09BB07。

4) active: Boolean 型別，是否從左向右動畫顯示，預設值為false。

5) stroke-width: Number 型別，用於設定進度條的寬度，預設值為6。

6. 表單元件

與 Web 中的表單類似，一系列的可錄入資料的元件，使用表單可以將這就元件中的資料統一提交。

1) button 按鈕（提交和重置）

1. 屬性

1) size: String 型別，用於設定按鈕大小，可以設定值為mini，預設值為 default。

2) type: String 型別，用於設定按鈕的樣式型別，可以設定值為primary、warn, 預設值為default。

3) plain: Boolean 型別，設定按鈕是否鏤空，背景色是否透明。預設值為false。

4) disabled: Boolean 型別，是否禁用按鈕，預設為false。

5) loading: Boolean 型別，是否在左側顯示載入的圓圈，預設為false。

6) form-type: String 型別，設定表單中按鈕的型別，可選值：submit、resset。

7) haver-class: 用於指定按鈕按下去的 class 樣式名稱，預設值為：button-hover:{background-color:rgba(0,0,0,0.1);opacity:0.7;}

8) hover-stop-propagation: 指定是否阻止本節點的祖先節點出現點選態，預設值為 false.

2. 事件

1) bindtap

按鈕點選事件，當點選按鈕是觸發。

2) checkbox 複選框元件

checkbox 必須與 checkbox-group 一起使用，checkbox-group 是checkbox 元件的容器，它有一個 bindchange 事件，在選擇任意一個checkbox 時被觸發。

1. 屬性

1) value: 選中某個checked 的返回值。

2) disabled: 是否禁用checked 元件。

3) checked: 表示 checkbox 是否被選中。

3) input 單行文字錄入元件

1. 屬性

1) value: 文字輸入框的值。

2) placeholder: 佔位符字串，用於提示輸入的文字，預設顯示為灰色。

3) placeholder-style: 用於設定佔位符的樣式，比如字型顏色。

4) placeholder-class: 用於設定佔位符的class 名稱。

5) auto-focus: 使用者標記獲得焦點的文字框，注意：一個form 中只能一個input 元件設定該屬性。該屬性不需要設定任何值。

6) focus: 該屬性通常設定為變數，可以在程式碼中使其獲取焦點。

7) maxlength: 設定最大可以輸入多少個字元，-1表示不限制，預設（未設定時）為140個。

8) password: 顯示為密碼輸入鍵盤。

9) type: 顯示不同型別的輸入鍵盤：包含如下值：

1. emoji: 輸入鍵盤中顯示錶情輸入選項。

2. digit: 顯示帶小數點的數字鍵盤。

3. idcard: 顯示身份證輸入鍵盤。

10)disabled: 禁用，disabled="disabled"。

11)confirm-type: 設定為 search 顯示搜尋鍵盤。

2. 事件

1. bindinput

當輸入框中的值發生改變時觸發。

2. bindfocus

輸入框獲取焦點時觸發。

3. bindblur

輸入框失去焦點時觸發。

4. bindconfirm

點選完成按鈕時觸發。

1) label 元件

label 並不是用於錄入資訊的，而是用於將元件和文字進行繫結。

1. label 可繫結的元件：button、checkbox、radio、switch。

2. 繫結的方式：

1) 第一種方式，將待繫結的元件放在 label 中。

<view style="margin:20px;" wx:for-items="{{checkboxItems}}">

<label>

<checkbox value="{{item.name}}" checked="{{item.checked}}" />

<text>{{item.value}}</text>

</label>

</view>

注意：如果label 中有多個可繫結的元件（例如多個checkbox），則只會繫結到第一個 checkbox 之上。

2) 第二種方式，使用label 的for 屬性指定要繫結的元件id。如果指定了for 屬性，繫結的元件就可以不需要再label 中了。

<radio-group>

<view style="margin:20px;" wx:for-items="{{radioItems}}">

<radio id="{{item.name}}" value="{{item.name}}" checked="{{item.checked}}" />

<label for="{{item.name}}">

<text>{{item.name}}</text>

</label>

</view>

</radio-group>

2) radio 單選按鈕元件

radio 必須與 radio-group 一起使用，radio-group 是radio 元件的容器，它有一個 bindchange 事件，在選擇任意一個radio 時被觸發。

1. 屬性

1) value: 選中某個 radio 的返回值。

2) disabled: 是否禁用 radio 元件。

3) checked: 表示 radio 是否被選中。

3) switch 開關元件

用於兩個值之間進行切換，switch 有兩種風格：iOS 和 Android 風格。

1. 屬性

1) type: 設定為checkbox 時則顯示為 Android 風格（即：複選框）。

2) disabled: 是否禁用radio 元件。

3) checked: 表示 switch 是否被選中。

2. 事件

1) bindchange

當 switch 選擇狀態改變時觸發。

4) picker 列表選擇元件

picker 是一個選擇器元件，支援三種類型的資料選擇：資料列表選擇器、日期選擇器、時間選擇器。

1. 屬性

1) value: 用於獲取或設定picker 的值。

2) mode: 用於設定picker 列表的型別：date 為日期選擇器，time 為時間選擇器，預設為資料列表選擇器。

3) range: 該屬性用於資料列表，用於定義資料列表展示的資料。

4) start: 該屬性用於日期或時間選擇器，用於定義可選擇的最小值，格式為：2019、2019-07、2019-07-12；21:05.

5) end: 該屬性用於日期或時間選擇器，用於定義可選擇的最小值，格式為：2019、2019-07、2019-07-12；21:05.

6) fields: 該屬性用於日期選擇器，用於指定日期選擇器將要顯示的日期格式：year 表示只顯示年；month 表示顯示年和月；預設顯示年月日。

2. 事件

1) bindchange

選擇某一項是被觸發。

3. 使用示例

<view style="margin:20px;">

<view style="margin-left:15px;">地區選擇器</view>

<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">

<view style="padding:13px;">

請選擇城市：{{array[index]}}

</view>

</picker>

</view>

5) slider 滑桿元件

用於左右滑動的功能，比如調解音量等。

1. 屬性

1) value: 設定slider 的值。

2) setp: 用於設定slider 滑動的步長。

3) show-value: 表示是否顯示slider 的當前值，該屬性不需要設定值。

4) min: 設定slider 可調解的最小值。

5) max: 設定slider 可調解的最大值。

2. 事件

1) bindchange

改變當前滑動條的值時被觸發。

6) textarea 多行輸入元件

textarea 與input 元件很多事件和屬性類似，只是 input 用於輸入單行文字，而textarea 可以輸入多行文字。所以其他屬性和事件可以參考input 元件。

1. 屬性

1) auto-height: 設定是否根據輸入的內容自動擴充套件高度，不設定該屬性，超過 textarea 的輸入內容時將出現滾動條。該屬性不需要設定值。

2) auto-focus: 設定是否第一個獲得焦點。

3) 其他屬性與input 元件類似。

7) form 提交和重置元件

form 用於統一提交form 表單內資料，在提交按鈕的處理函式中可以使用e.detail.value 獲取所有的表單資料。

1. 事件

1) catchsubmit

當點選提交按鈕時，將觸發事件所繫結的函式。

2) catchreset

當點選重置按鈕時，將觸發事件所繫結的函式。注意：當點選重置按鈕時，將重置為元件的預設值，並不是初始值。