構建小程序總結

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?...'})
    ...還有不少種方式的跳轉，具體查看文檔
}