構建小程式總結
1.創建小程式
- 創建小程式：沒註冊過的郵箱
- appid：微信公眾平台登陸小程式，開發欄可查看
2.小程式項目結構
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.小程式三體驗
1.數據綁定：
在頁面或者組件的中的js文件中的data定義 ，在wxml中使用{{}} 使用
2.列表渲染：
<view wx:for='{{student}}'>{{item.name}}+{{item.age}}</view>: student為js中的數組數據 ，item為微信自動生成的變數，為遍歷出的每一項數據
3.事件監聽：
bindTap:監聽點擊事件
注意： 在js中修改數據的時候，不能直接修改，必須使用this.setData({})
4.**小程式配置文件：project,sitemap
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.小程式的雙執行緒模型
誰是小程式的宿主環境呢？=>微信客戶端
宿主環境為了執行小程式的各種文件：wxml wxss js 提供了小程式的雙執行緒模型
wxml和wxss運行於渲染層 ，js運行為邏輯層 ，這兩個執行緒都會經由微信客戶端（native）進行中轉交互
6.小程式的啟動流程
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(這個介面即將廢棄) 現行方案：使用按鈕，讓用戶自己來確認，按鈕設置 屬性：<button open-type=『getUserInfo』 bindgetUserInfo=」method「>獲取資訊</button> 然後列印 傳入默認參數的詳情資訊中就有 method(event){ console.log( event.details )}
3.拓展:（可以不再生命周期中使用） 展示用戶資訊：<open-data></open-data> （可以在文檔中的組件中查看使用 ->組件->開放能力）使用：<open-data type="user..."></open-data>具體查看文檔
=>onHide：介面被隱藏時執行
=>onError:當程式出現錯誤的時候執行
3.註冊Page做什麼：
=>1.在js的onload生命周期中發送數據請求 （設置this.setData的時候注意this的指向，微信提供的請求api 一般用箭頭函數來解決this指向問題）
=>2.在data中初始化一些數據
=>3.監聽上拉，觸底事件
7.常用的內置組件
text組件:
行內標籤 其中的文本默認不能被選中
1.可以設置能被選中 <text selectable=『{{true}}』> helloWorld </text> ->如果不用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 class=」container「 scroll-x>
<view v-for="{{10}}"> 子盒子 </view>
</scroll-view>
=>垂直滾動：
<scroll-view class=」container「 scroll-y>
<view> 子盒子 </view>
</scroll-view>
=>scroll-view的事件:
bindscroll事件，可監聽滾動的高度 ，還有類似事件和使用查看具體文檔
-------------------------------------------------------------------------------
所有組件的共同屬性： id class style hidden（布爾值） data- （自定義屬性） bind/catch 組件的事件
8.Mustache ，wxss，wxml，wxs
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.=>使用變數控制某個元素的顯示和隱藏 <view wx:if="{{isShow}}"></view>
2.=><view wx:if={{score >= 90}}>優秀</view> <view wx:elif={{score >= 90}}>優秀</view>
3.=>hidden為true的隱藏 ，為false的時候顯示 ，使用hidden的時候組件依然存在，只是沒有顯示，而使用wx：if組件跟本就沒有被創建出來，當需要頻繁切換的時候，推薦使用hidden
4.=>wx:for 一般用於列表數據:<view wx:for="{{list}}"> {{item}} <view> :item默認為列表數據中的每一項
5.=>block標籤作用（不是組件）：在使用wx：if，wx:for等指令的時候常常是一組標籤配合使用，此時我們可以用block來包裹，也可以用view，但是使用view會創建額外的屬性
6.=>wx:for-item , wx:for-index一般用於多層遍歷,需要使用多個item和index，此時就要重命名來使用
<block wx:for="{{nums}}" wx:for-item='n'> {{n}} </block>
7.=>列表渲染key：使用wx：for時會報警告，這個提示告訴我們，可以添加一個key提高性能
為什麼？大概闡述就是:沒有key時，一旦涉及改變，被改變的元素以及後面的元素全部會被重新改變渲染，有key時，會識別復用的元素，元素會插入，而不是直接替換後面所有
wxs:
1.在wxml中是不能直接調用page中定義的函數的 {{ myfun( xxx) }}:錯誤 ，但是在某些情況我們需要過濾某些數據的時候，就需要使用wxs
2.定義一些公共方法，供其他地方調用，比如轉換時間戳
3.使用：（詳細步驟可看文檔）根目錄下創建wxs文件夾，創建wxs文件，書寫函數，導出，在需要使用的頁面或者組件中按需導入對應的方法即可
9.事件-對象-傳遞參數-冒泡和捕獲
事件：
1.某些組件會有自己特性的事件類型，大家可以在使用組件時具體查看對應的文檔
比如input有bindinput / bindblur / bindfocus 等 scroll-view有bindscrolltowpper / bindscrolltolower 等 更多的事件查看文檔
事件對象：
當某個事件觸發時，會產生一個事件對象，並且這個對象被傳入到回調函數中，事件對象有哪些常見的屬性呢？
type 事件類型
timeStamp 頁面打開事件觸發經過的事件
target 觸發事件的組件的一些屬性值集合 ：記錄產生事件的元素
currentTarget 當前組件的一些屬性值集合 ：記錄觸發事件的元素
detail 額外的資訊（點擊的位置等）
touches 觸摸事件，當前停留在螢幕中的觸摸點資訊的數組 ：記錄多個手指觸摸
changeedTouches 觸摸事件，當前變化的觸摸點資訊的數組 ：本來有一個手指，再增加一個手指，觸發一次
事件的傳遞參數：
有三個含有文本內容的view，我們需要點擊獲取view中的文本，如何獲取？
首先，小程式中，不能再點擊事件中直接傳入 ，而是要使用data-xxx=『xxx』 例：data-index=『{{index}}』 在js中取值：event.currentTarget.dataset;
事件冒泡和事件捕獲：
1.監聽事件冒泡和捕獲：capture-bind:tap ( 必須使用: ) bind:tap
2.使用bind:一層層傳遞 catch：阻止事件的傳遞
10.組件化開發
一.組件化開發：
1.新建components目錄，創建components組件
=>當創建組件的時候，.json中會默認加上屬性"component": true （此屬性代表這是自定義組件，不要隨意刪除）
2.使用自定義組件
=> 先在需要使用的頁面或者組件的.json文件下的usingComponents下定義需要使用的組件才可以正常使用 { '使用時的組件名': 』調用的組件路徑『 }
二.使用自定義組件和細節:
1.自定義組件的標籤名只能包含 小寫字母，中劃線 ，下劃線 （一般使用中劃線， 因為一些官方組件使用的也是中劃線:scroll-view）
2.自定義組件中也能使用其他自定義組件，步驟和在頁面中一樣
3.在app.json添加usingComponents屬性，可以做到全局註冊，其他頁面和組件直接使用
三.組件的樣式細節:
1.在使用class來修改樣式的時候，默認會有一個隔離，使頁面和組件的樣式相互不衝突，所以為了樣式不錯亂，一般不使用id、屬性、標籤選擇器
2.如何讓組件和頁面樣式能夠被單向或者相互影響，在組件的js文件中，options屬性下設置styleIssolation：』xxx『 （具體查看文檔）
11.給組件傳遞數據和樣式
1.很多時候，組件內的展示內容，並不是在組件內寫死的，而是由使用者來決定
=> 頁面可以向組件傳遞 ： 數據（properties） 樣式（externalClasses） 標籤（slot）
=> 組件向頁面傳遞他發生的行為 ： 自定義事件
2.傳遞數據的具體步驟：
=>1.在自定義組件中的properties中定義一個屬性 title:String ,此屬性可以直接在組件中用{{}}調用使用 , 然後再父組件中傳入title屬性值 <cpn title="哈哈哈" />
=>2.上面那種定義方式是最簡單切無默認值的，可以設置對象值 title：{ type：String ，value：『默認值』 ，observer:function(){...} } observer可以監聽title的每次改變
3.傳遞樣式的具體步驟：
=>1.給組件的標籤添加一個樣式titleclass
=>2.這個樣式並不是自定義組件寫的，而是由父組件傳入 ，在自定義組件中定義一個內置屬性來接收傳入的樣式：externalClasses:['titleclass'] (externalClasses與properties同級)
=>3.在父組件調用時，傳入我們需要訂製的樣式 <cpn titleclass="red" /> <cpn titleclass="ool" />
=>4.傳入的red/ool代表父組件中的類名 .red{color:red; } .ool {font-size:18px}
=>這樣，自定義組件就成功使用了父組件中傳入的樣式
4.組件向外傳遞事件-自定義事件
=>由子組件發出，父組件接收，子組件傳遞的數據，默認在event當中可列印出 （具體使用時查看文檔，和vue很像）
12.獲取組件對象的方式
1.在組件外部修改組件數據，核心就是調用組件內部的this.setData({ }) => 組件對象.setData({})
2.獲取組件對象 ： this.selectComponent('class/id') (文檔搜索selectComponent)
13.插槽slot
1.組件的插槽是為了讓我們封裝的組件更加具有擴展性，讓使用者決定組件內部的一些內容到底展示什麼
2.插槽的使用：
=>單個插槽,直接在自定義組件中使用<slot></slot>
=>多個插槽:
=>在自定義組件中給每一個插槽都添加一個name屬性 <slot name=「slot1」></slot>
=>必須在component對象中添加一個選項：options options:{ multipleSlots:true }
=>使用的時候 <view slot="slot1"></view>
14.總結Component構造器
總結Component構造器：
1.properties:讓使用者傳入數據
2.data:定義組件內部的初始化數據
3.methods:用於定義組件內部的函數 （page頁面中，函數方法可直接寫在data下面，組件里不行，必須寫在methods下）
4.options：組件的配置選項
5.externalClasses:外界給組件傳入額外的樣式
6.observers:可以監聽properties/data的改變
7.pageLifetimes：頁面生命周期 （查看文檔）
8.lefetimes：組件生命周期 （查看文檔）
15.小程式的網路請求
wx.request({
url: '//123.207.32.32:8000/api/xxx',
method:'post' //不設置默認get
data:{
type:'sell',
page:1
},
success:function(res){
console.log(res);
},
fail:function(err){
console.log('獲取失敗')
}
})
除了url,method,data,success等屬性，還有很多其他屬性，具體查看文檔
網路請求的封裝：
新建js文件，使用promise封裝小程式網路請求api，導出方法，在需要的地方直接調用
export default function request(options) {
return new Promise((resolve, reject) => {
wx.request({
url: options.url,
method: options.method || 'get',
data: options.data || {},
success: resolve,
fail: reject
})
})
}
使用：
import request from '../../services/network.js'
request({
url:'//123.207.32.32:8000/api/m3/recommend'
}).then(res=>{
console.log(res)
})
16.彈窗，分享，以及登陸流程
1.彈窗
官方文檔 => API => 介面 => 交互
wx.showToast：顯示提示框 （可設置時間,文本，icon，蒙版）
wx.showModal：顯示模態框 （可以設置標題，內容，以及點擊確定和取消的回調函數，也可以設置只有確定按鈕，和更改按鈕文本）
wx.showLoading：顯示載入框 （需主動調用 wx.hideLoading 才能關閉提示框,一般切換頁面，載入數據，請求數據的時候使用）
wx.showActionSheet：顯示操作菜單 （設置彈出菜單，和菜單項，也有回調函數）
17.小程式中的分享
小程式文檔 => 框架介面 => 頁面 => page => onShareAppMessage
調用小程式api：相當於頁面生命周期：
onShareAppMessage:function(options){
return:
}
分享按鈕：
<button open-type="share"> 分享</button>
18.小程式的登陸流程
官方流程：
1.調用wx.login獲取code
2.調用wx.request發送code到我們自己的伺服器（我們自己的伺服器會返回一個登陸態的標識，比如token）
=>這個code客戶端不需要用，是需要發送給服務端的，wx.request()發送code
=>服務端拿到 code + appid + appsecret (後兩個可在小程式控制台拿到),將這三個通過介面發送給微信官方 伺服器,微信伺服器就會返回session_key + appid
=>服務端自定義登陸態 與 oppenid ，session_key關聯 （項目可能除了微信登陸還需要帳號密碼）
=>伺服器返回自定義登陸態 （token）
3.將登陸態的標識token進行存儲（可保存在storage），以便下次使用
4.請求需要登陸態標識的介面時，攜帶token
=>請求一些需要登陸的介面時，就需要攜帶token
登陸偽程式碼演示：
//1.先從快取中取出token，如果沒有，就需要重新登陸
const token = wx.getStorageSync(token)
//2.判斷token是否有值
if(token && token.length !==0){
//此時已經有token，驗證token是否過期
wx.request({
url: 'xxxx',
header:{
token
},
success:res =>{
if(!res.data.errCode){
this.globalData.token = token
}else{
//重新進行登陸操作，可封裝成一個方法，到時候直接調用方法
}
},
fail:err=>{
}
})
}else{
//登陸操作
wx.login({
//code只有五分鐘的有效期
success: (res) => {
//1.獲取code
const code = res.code;
//2.將code發送給我們的伺服器
wx.request({
url: '//123.207.32.32:8000/api/m3/login',
method: 'post',
data: {
code
},
success: (res) => {
//1.取出token
const token = res.data.token
//2.將token保存到全局globalData中 ：當別的頁面或組件需要獲取的時候=> const app=getApp() => app.globalData.token
this.globalData.token = token
//3.放到對象中，關閉小程式再開又要重新登陸，所以我們要記錄到本地存儲當中
wx.setStorageSync('token', token)
}
})
}
})
}
19.頁面跳轉，跳轉時數據傳遞
頁面跳轉有兩種方法：
1.通過navigator組件
2.通過wx的API跳轉
=>1.通過navigator組件:
還有很多常用的屬性，具體可以查看文檔
<navigator url="xxxx/xxx">跳轉到詳情頁</navigator>
=>跳轉過程中數據的傳遞
<navigator url="xxxx/xxx ？name=why&age=18'>跳轉到詳情頁</navigator>
=>如何在跳轉的頁面中拿到傳過來的數據？
在頁面生命周期函數onload中的默認參數options中可獲取到
onLoad：function(options){
console.log(options)
}
=>如何在跳轉頁面的時候修改數據
可以通過getCurrentPages來獲取所有的頁面，然後使用頁面對象的setData({})函數來修改
=>2.通過程式碼跳轉頁面跳轉
xxx(){
wx.navigaTo({ url:'xxxx?...'})
...還有很多種方式的跳轉，具體查看文檔
}
