微信小程式框架與元件

版權宣告：未經博主允許不得轉載

檢視官方文件：https://developers.weixin.qq.com/miniprogram/dev/component/

前言：

學習微信小程式應該不怎麼難吧~下面我來記錄一下學習筆記，在學微信小程式的時候，如果你有html+css+javascript的基礎，那麼你就很快地上手掌握的。下面提供微信小程式官方地址：https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html

下面一起學一學，微信小程式的框架吧~看文件，別學別理解。在下的講述如果不正確的話，可以參考官方文件，也可以幫忙改正。具體還得看官方文件。

正文：

微信小程式的檔案結構，有一個描述整體的app和描述多個頁面的檔案組合在一起的。給大家看一下開啟微信小程式一般由什麼：

一個檔案專案中主體有 app.js 為小程式的邏輯程式碼 app.json 為小程式的公共設定 app.wxss 為小程式的樣式 一個檔案中如logs,index等，一般都有 xxx.js 頁面邏輯程式碼如JavaScript xxx.wxml 如html xxx.wxss 如css樣式 json 為該頁面的配置 在app.json中的程式碼，我提供的程式碼是剛建立時的程式碼模組： { //這部分為頁面的路徑 "pages":[ "pages/index/index", "pages/logs/logs" ], //視窗表現 "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } } 在文件中還提供了tabBar，networkTimeout等。 tabBar "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首頁" }, { "pagePath": "pages/logs/logs", "text": "日誌" }] } networkTimeout網路超時 "networkTimeout": { "request": 10000, "downloadFile": 10000 }, window的屬性： （navigationBar-BackgroundColor） navigationBarBackgroundColor為導航欄的背景顏色 （navigationBar-TextStyle） navigationBarTextStyle為導航欄標題顏色 僅支援 black/white （navigationBar-TitleText） navigationBarTitleText為導航欄標題文字內容 navigationStyle為導航欄樣式 僅支援 default/custom backgroundColor視窗的背景色 backgroundTextStyle下拉 loading 的樣式，僅支援 dark/light

tabBar可以切換頁面（最少2，最多5）

color文字顏色 selectedColor文字選中時的顏色 backgroundColor背景色 borderStyle 僅支援 black/white iconPath selectedIconPath networkTimeout設定各種網路請求 wx.request wx.connectSocket xxx.json： navigationBarBackgroundColor navigationBarTextStyle navigationBarTitleText backgroundColor backgroundTextStyle 等 App() 用來註冊小程式。生命週期函式 onLaunch onShow onHide onError object引數說明： data:初始資料 生命週期函式 onLoad onReady onShow onHide onUnload 組是檢視的基本組成單元。 知識點： 資料繫結 Page({ data: { ... } }) 列表渲染： <view wx:for="{{array}}"> {{item}} </view> 條件渲染 模板

資料繫結

{{ message }}

"{{flag ? true : false}}"

wx:for

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view> //wx:for="{{[1, 2, 3]}}" <view> {{index}}: </view> <view> {{item}} </view> 提供兩種檔案引用方式import和include。

識別符號 ``` delete void typeof

null undefined NaN Infinity var

if else

true false

require

this function arguments return

for while do break continue switch case default ``` 資料型別

1. number ： 數值 toString toLocaleString valueOf toFixed 2. string ：字串 3. boolean：布林值 toString valueOf 4. object：物件 5. function：函式 6. array : 陣列 7. ate：日期 8. regexp：正則 選擇器 view::after 在 view 元件後邊插入內容 view::before 在 view 元件前邊插入內容

元件

view檢視容器 scroll-view滾動檢視 swiper滑塊檢視容器 movable-area可移動區域 movable-view可移動的檢視容器 cover-view覆蓋在原生元件之上的文字檢視 cover-image覆蓋在原生元件之上的圖片檢視 rich-text富文字 label用來改進表單元件的可用性 picker從底部彈起的滾動選擇器 picker-view嵌入頁面的滾動選擇器 navigator頁面連結 functional-page-navigator用於跳轉到外掛功能頁 live-player實時音視訊播放 live-pusher實時音視訊錄製