構建小程式總結
阿新 • • 發佈：2020-05-10
### 1.建立小程式
- 建立小程式：沒註冊過的郵箱
- appid：微信公眾平臺登陸小程式，開發欄可檢視
### 2.小程式專案結構
```css
APP(巨集觀主體):
app.js(建立app例項以及一些全域性相關內容)
app.json（全域性配置：window，tabbar等）
app.wxss (全域性的一些配置)
Page(頁面)：
page.js(建立page例項的程式碼，以及相關內容)
page.json:(業務單獨的配置，比如頁面對應的window配置，usingComponents)
page.wxml:頁面的wxml佈局程式碼
page.wxss：頁面的樣式配置
Component：
component.js : 建立component例項的程式碼以及元件內部的內容
component.json : 元件內部的配置，比如當前元件使用了別的元件
component.wxml : 佈局程式碼
component.wxss : 樣式程式碼
```
### 3.小程式三體驗
```css
1.資料繫結：
在頁面或者元件的中的js檔案中的data定義 ，在wxml中使用{{}} 使用
2.列表渲染：
: student為js中的陣列資料 ，item為微信自動生成的變數，為遍歷出的每一項資料
3.事件監聽：
bindTap:監聽點選事件
注意： 在js中修改資料的時候，不能直接修改，必須使用this.setData({})
```
### 4.**小程式配置檔案：project,sitemap
```css
1.project : 小程式功能版本，一般不手動修改，而是在詳情中修改
2.sitemap : 配置小程式搜尋
3.app.json全域性配置：
1.所有使用的頁面都必須在pages下注冊
2.window預設視窗配置：navigationBarBackgroundColor（導航顏色）navigationBarTextStyle（導航文字顏色） navigationBarTitleText（導航標題） enablePullDownRefresh（開啟全域性下拉重新整理）
3.底部tabbar：（配置圖片可以將iconfont匯出為圖片進行使用）
=>list陣列中每個物件都是一個tabbar，物件中可以配置item選中和未被選中的圖示，和文字，圖片就新建資料夾放在專案中，用絕對路勁使用
=>和list同級，還可以設定選中tabbar的字型顏色，具體查文件
4.page頁面配置：
1.呼叫公共元件
2.配置和全域性不一樣的屬性（如：導航樣式等等，具體檢視文件）
```
### 5.小程式的雙執行緒模型
```css
誰是小程式的宿主環境呢？=>微信客戶端
宿主環境為了執行小程式的各種檔案：wxml wxss js 提供了小程式的雙執行緒模型
wxml和wxss運行於渲染層 ，js執行為邏輯層 ，這兩個執行緒都會經由微信客戶端（native）進行中轉互動
```
### 6.小程式的啟動流程
```css
1.微信下載小程式包 -> 啟動小程式 -> 載入解析app.json -> 註冊App() (也會執行App生命週期) -> 載入自定義元件程式碼（註冊自定義元件）
-> (1.解析page.json 2.渲染層載入渲染page.wxml 3.邏輯層註冊page（）) ->執行Page生命周
2.註冊App做什麼
App生命週期
=> onlaunch：小程式初始化完成執行
=>onShow(options)：小程式頁面顯示之後執行
1.可監聽小程式的進入場景 可以通過options檢視
2. 獲取使用者資訊 wx.getUserInfo(這個介面即將廢棄) 現行方案：使用按鈕，讓使用者自己來確認，按鈕設定 屬性： 然後列印 傳入預設引數的詳情資訊中就有 method(event){ console.log( event.details )}
3.拓展:（可以不再生命週期中使用） 展示使用者資訊： （可以在文件中的元件中檢視使用 ->元件->開放能力）使用：具體檢視文件
=>onHide：介面被隱藏時執行
=>onError:當程式出現錯誤的時候執行
3.註冊Page做什麼：
=>1.在js的onload生命週期中傳送資料請求 （設定this.setData的時候注意this的指向，微信提供的請求api 一般用箭頭函式來解決this指向問題）
=>2.在data中初始化一些資料
=>3.監聽上拉，觸底事件
```
### 7.常用的內建元件
```css
text元件:
行內標籤 其中的文字預設不能被選中
1.可以設定能被選中 ->如果不用mastache語法，傳入的是字串，而不是布林值，
2.還能設定space屬性，設定空格大小 3.解碼屬性 decode ：可用於大於號小於號等其他符號的解碼
button元件:
1.預設塊級元素，如果設定了size='mini',就會變為行內塊元素
2.可以設定type來設定顏色
3.plain屬性 邊框
4.loading屬性，載入小圓圈
5.設定點選樣式，新增屬性hover-class=”ppd“ 然後再wxss中設定樣式 .ppd{ color:red;....}
view元件:
容器元件,常用屬性
1.hover-class 當用戶按下後的屬性 （當用戶鬆手，會恢復原有的屬性）
2.hover-style-time 樣式停留時間
3.hover-stop-propagation 阻止冒泡
image元件:
1.lazy-load屬性:圖片懶載入
2.bindload：監聽圖片載入完成事件
3.還有長按識別小程式二維碼的功能
4.也有能設定圖片在image盒子中的縮放拉伸模式
input元件:
1.value屬性：input中的預設值
2.type屬性：text ....
3.confirm-type屬性:設定彈出鍵盤右下角的文字 還有一些input的事件具體檢視文件
----------------------------------------------------------------------------
scroll-view元件:
實現區域性滾動(水平滾動和垂直滾動)
=>水平滾動：
（scroll-view作為父盒子設定寬高和（white-space: nowrap不換行） ，子盒子inline-block （行內元素））
=>垂直滾動：
=>scroll-view的事件:
bindscroll事件，可監聽滾動的高度 ，還有類似事件和使用檢視具體文件
-------------------------------------------------------------------------------
所有元件的共同屬性： id class style hidden（布林值） data- （自定義屬性） bind/catch 元件的事件
```
### 8.Mustache ，wxss，wxml，wxs
```js
Mustache ：
1.可以寫入多個變數 {{ a + b }}
2.可以寫表示式 {{ age>=10 ? '成年人': '未成年人' }} （題外話：獲取當前時間 new Date().toLocaleString）
3.如何點選按鈕，切換某個元素的樣式（小程式不允許使用DOM操作）:
定義一個布林值bool，在按鈕的點選事件中每次點選都取反， 在需要變換的元素上使用Mustache語法 class=”box {{bool？‘active’：‘’}} “
wxss：
1.支援的選擇器： .class #id element ::after ::before
2.擴充套件單位: rpx 規定螢幕寬度為750rpx （ipone螢幕寬度為375px ，相當於 1rpx = 2px）
3.樣式匯入，有時候可能會將樣式分在多個wxss檔案中 ，在頁面或者元件中新建資料夾存放多個css，然後再主css中 @import ‘./xxx/xxx.css’
4.匯入官方樣式庫：WeUI ，具體將WeUI在github上download下來，用微信開發工具跑起來，用什麼就引用什麼（注意一些元件除了css還綁定了很多js）
wxml：
wx:if wx:elif wx:else hidden wx:for wx:for-item wx:for-index
1.=>使用變數控制某個元素的顯示和隱藏
2.=>
3.=>hidden為true的隱藏 ，為false的時候顯示 ，使用hidden的時候元件依然存在，只是沒有顯示，而使用wx：if元件跟本就沒有被創建出來，當需要頻繁切換的時候，推薦使用hidden
4.=>wx:for 一般用於列