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: 'http://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:'http://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: 'http://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?...'})
...還有很多種方式的跳轉，具體檢視文件
}