微信小程式api列表彙總包括網路API,媒體API,檔案API ,微信小程式支付流程,位置API,介面API等

wx.request 發起網路請求
wx.uploadFile 上傳檔案
wx.downloadFile 下載檔案
wx.connectSocket 建立 WebSocket 連線
wx.onSocketOpen 監聽 WebSocket 開啟
wx.onSocketError 監聽 WebSocket 錯誤
wx.sendSocketMessage 傳送 WebSocket 訊息
wx.onSocketMessage 接受 WebSocket 訊息
wx.closeSocket 關閉 WebSocket 連線
wx.onSocketClose 監聽 WebSocket 關閉

wx.chooseImage 從相簿選擇圖片，或者拍照
wx.previewImage 預覽圖片
wx.startRecord 開始錄音
wx.stopRecord 結束錄音
wx.playVoice 播放語音
wx.pauseVoice 暫停播放語音
wx.stopVoice 結束播放語音
wx.getBackgroundAudioPlayerState 獲取音樂播放狀態
wx.playBackgroundAudio 播放音樂
wx.pauseBackgroundAudio 暫停播放音樂
wx.seekBackgroundAudio 控制音樂播放進度
wx.stopBackgroundAudio 停止播放音樂
wx.onBackgroundAudioPlay 監聽音樂開始播放
wx.onBackgroundAudioPause 監聽音樂暫停
wx.onBackgroundAudioStop 監聽音樂結束
wx.chooseVideo 從相簿選擇視訊，或者拍攝

wx.saveFile 儲存檔案
wx.getSavedFileList 獲取已儲存的檔案列表
wx.getSavedFileInfo 獲取已儲存的檔案資訊
wx.removeSavedFile 刪除已儲存的檔案資訊
wx.openDocument 開啟檔案

wx.getStorage 獲取本地資料快取
wx.getStorageSync 獲取本地資料快取
wx.setStorage 設定本地資料快取
wx.setStorageSync 設定本地資料快取
wx.getStorageInfo 獲取本地快取的相關資訊
wx.getStorageInfoSync 獲取本地快取的相關資訊
wx.removeStorage 刪除本地快取內容
wx.removeStorageSync 刪除本地快取內容
wx.clearStorage 清理本地資料快取
wx.clearStorageSync 清理本地資料快取

wx.getLocation 獲取當前位置
wx.chooseLocation 開啟地圖選擇位置
wx.openLocation 開啟內建地圖
wx.createMapContext 地圖元件控制

wx.getNetworkType 獲取網路型別
wx.onNetworkStatusChange 監聽網路狀態變化
wx.getSystemInfo 獲取系統資訊
wx.getSystemInfoSync 獲取系統資訊
wx.onAccelerometerChange 監聽加速度資料
wx.startAccelerometer 開始監聽加速度資料
wx.stopAccelerometer 停止監聽加速度資料
wx.onCompassChange 監聽羅盤資料
wx.startCompass 開始監聽羅盤資料
wx.stopCompass 停止監聽羅盤資料
wx.setClipboardData 設定剪貼簿內容
wx.getClipboardData 獲取剪貼簿內容
wx.makePhoneCall 撥打電話
wx.scanCode 掃碼

wx.showToast 顯示提示框
wx.showLoading 顯示載入提示框
wx.hideToast 隱藏提示框
wx.hideLoading 隱藏提示框
wx.showModal 顯示模態彈窗
wx.showActionSheet 顯示選單列表
wx.setNavigationBarTitle 設定當前頁面標題
wx.showNavigationBarLoading 顯示導覽列載入動畫
wx.hideNavigationBarLoading 隱藏導覽列載入動畫
wx.navigateTo 新視窗開啟頁面
wx.redirectTo 原視窗開啟頁面
wx.switchTab 切換到 tabbar 頁面
wx.navigateBack 退回上一個頁面
wx.createAnimation 動畫
wx.createContext 建立繪圖上下文
wx.drawCanvas 繪圖
wx.stopPullDownRefresh 停止下拉重新整理動畫

wx.createSelectorQuery 建立查詢請求
selectorQuery.select 根據選擇器選擇單個節點
selectorQuery.selectAll 根據選擇器選擇全部節點
selectorQuery.selectViewport 選擇顯示區域
nodesRef.boundingClientRect 獲取佈局位置和尺寸
nodesRef.scrollOffset 獲取捲動位置
nodesRef.fields 獲取任意欄位
selectorQuery.exec 執行查詢請求

wx.login 登入
wx.getUserInfo 獲取使用者資訊
wx.chooseAddress 獲取使用者收貨地址
wx.requestPayment 發起微信支付
wx.addCard 新增卡券
wx.openCard 開啟卡券

1. .wxml
    ---是框架設計的一套標籤語言，結合基礎元件，事件系統，可以構建出頁面的結構，內部主要是微信自己定義的一套元件。
2. .wxss
    ---是一套樣式語言，用於描述wxml的元件樣式
3. .js
    ---是邏輯處理，網路請求
4. .json
    --- 而檔案會報錯小恆旭設定，如頁面註冊，頁面標題及tabBar
5. app.json
    ---必須要有這個檔案，因為微信框架把這個檔案作為組態檔入口，整個小程式的全域性設定，包括頁面註冊，網路設定，以及小程式的window背景色，設定導覽列樣式，設定預設標題。
    pages欄位 —— 用於描述當前小程式所有頁面路徑，這是為了讓微信使用者端知道當前你的小程式頁面定義在哪個目錄。
    window欄位 —— 小程式所有頁面的頂部背景顏色，文字顏色定義在這裡的
    tab欄位—小程式全域性頂部或底部tab
6. app.js---可以在這個檔案中監聽並處理小程式的生命週期函數，宣告全域性變數

1.將所有的介面放在統一的js檔案中並匯出
2.在app.js中建立封裝請求資料的方法
3.在子頁面中呼叫封裝的方法請求資料

1.在根目錄下建立utils目錄及api.js檔案和apiConfig.js檔案；
2.在apiConfig.js 封裝基礎的get, post 和 put， upload等請求方法，設定請求體，帶上token和例外處理等；
3.在api中引入apiConfig.js封裝好的請求方法，根據頁面資料請求的urls, 設定對應的方法並匯出；
4.在具體的頁面中匯入；

1.給html元素新增data-*屬性來傳遞我們需要的值，然後通過e.currentTarget.dataset或者是onload的param引數獲取，但data-名稱 不能有大寫字母和不可存放物件
2.設定id的方法標識來傳值，通過e.currentTarget.id獲取設定的id的值，然後通過設定全域性物件的方式傳遞數值
3.在navigator中新增引數傳值

1.提高頁面載入速度
2.使用者行為預測
3.減少預設data的大小
4.元件化方案

小程式除了擁有公眾號的地開發成本，無需下載等優勢，在服務請求延時與使用者使用體驗是都得到了較大幅度的提升，使其能夠承載跟複雜的服務功能以及使用者獲得更好的體驗。

小程式本質就是一個單頁面應用，所有的頁面渲染和事件處理，都在一個頁面內進行，但又可以通過微信使用者端呼叫原生的各種介面；
它的架構，是資料驅動的架構模式，它的UI和資料是分離的，所有的頁面更新，都需要通過對資料的更改來實現；
它從技術講和現有的前端開發差不多，採用JavaScript、WXML、WXSS三種技術進行開發；
功能可分為webview和appService兩個部分；
webview用來展現UI，appService有來處理業務邏輯、資料及介面呼叫；
兩個部分在兩個程序中執行，通過系統層JSBridge實現通訊，實現UI的渲染、事件的處理等。

優勢：
1.無需下載，通過搜尋或者掃一掃就可以開啟；2.良好的使用者體驗，開啟速度快
3.開發成本比app低；4.安卓上可以新增到桌面，與原生app差不多；5.為使用者提供良好的安全保障

劣勢：
1.限制較多，頁面大小不能超過1M,不能開啟超過五個層級的頁面；
2.樣式單一；3.推廣面窄，不能分享到朋友圈，只能分享給朋友；
4.依託於微信，無法開發後臺管理功能

1.執行環境的不同---h5的執行環境是瀏覽器，而微信小程式的執行環境是微信開發團隊基於瀏覽器核心完全重構的一個內建解析器，針對小程式專門做了優化，配合自己定義的開發語言標準
2.開發成本的不同---微信小程式只在微信中執行，所以不用去顧慮瀏覽器相容性問題
3.獲取系統許可權的不同---系統級許可權都可以和微信小程式無縫銜接
4.生產環境的執行流暢度

app.js:
    success:function(info){
        that.apirtnCallback(info)
    }
index.js:
    onLoad:function(){
        app.apirtnCallback=res=>{
            console.log(res)
        }
    }

小程式必須用this.setData({msg:'111'})方法來將資料同步到檢視

都是用來描述頁面的樣子；
WXSS 具有 CSS 大部分的特性，也做了一些擴充和修改；
WXSS新增了尺寸單位，WXSS 在底層支援新的尺寸單位 rpx；
WXSS 僅支援部分 CSS 選擇器；
WXSS 提供全域性樣式與區域性樣式1.wxss的圖片引入需要使用外連地址；2.沒有body,樣式可直接使用import匯入

使用ax.getUserInfo方法的withCredential為true時，可獲取encryptedData,裡面有union_id,
如果開發者擁有多個移動應用、網站應用、和公眾帳號（包括小程式），可通過 unionid 來區分使用者的唯一性，因為只要是同一個微信開放平臺帳號下的移動應用、網站應用和公眾帳號（包括小程式），使用者的 unionid 是唯一的。換句話說，同一使用者，對同一個微信開放平臺下的不同應用，unionid 是相同的

用view代替scroll-view，設定onPullDownRefresh函數實現

1.資料的大小有限制，超過範圍會直接導致整個小程式崩潰，除非重啟；
2.小程式不可以直接渲染文章內容頁這型別的html文字內容，若需顯示要借住外掛，但外掛渲染會導致頁面載入變慢

1.迴圈遍歷的時候：小程式是wx:for="list",而Vue是v-for="info in list"
2.呼叫data模型的時候：小程式是this.data.uinfo,而vue是this.unifo,給模型賦值也不一樣，小程式是this.setData({unifo:1}),而Vue是直接this.unifo=1

1、微信小程式有程式碼大小限制，微信小程式最大為2M
2、提高程式碼的複用率

通過WXML的import和include來使用檔案模版
使用WXSS的@import參照WXSS檔案
使用JS的require來參照JS檔案

wx:if是遇到true的時候顯示，hidden是遇到false的時候顯示
wx:if在隱藏的時候不渲染，而hidden在隱藏的時候仍然渲染，只是不顯示
頻繁切換的話，用wx:if將會消耗更多的資源，因為每次呈現的時候他都會渲染，每次隱藏的時候，他都會銷燬。
如果切換並不頻繁的話，用 wx:if 相對來說較好些，因為它會避免初始就一下渲染那麼多。

微信小程式新定義了一個尺寸單位，可以適配不同解析度的螢幕，它規定螢幕寬為750rpx，如在 iPhone6 上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px =750物理畫素，1rpx = 0.5px = 1物理畫素。

onLoad() 頁面載入時觸發，只會呼叫一次，可獲取當前頁面路徑中的引數。
onShow() 頁面顯示/切入前臺時觸發，一般用來傳送資料請求；
onReady() 頁面初次渲染完成時觸發, 只會呼叫一次，代表頁面已可和檢視層進行互動。
onHide() 頁面隱藏/切入後臺時觸發, 如底部 tab 切換到其他頁面或小程式切入後臺等。
onUnload() 頁面解除安裝時觸發，如redirectTo或navigateBack到其他頁面時。

一個應用同時只能開啟5個頁面，當已經開啟了5個頁面之後，wx.navigateTo不能正常開啟新頁面。請避免多層級的互動方式，或者使用wx.redirectTo

background-image：可以使用網路圖片，或者 base64，或者使用<image/>標籤

相同點：首先他們都是作為點選事件，就是點選時觸發
不同點：主要是bindtap不會阻止冒泡事件，而catchtap會阻止冒泡

wx.navigateTo()：保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面
wx.redirectTo()：關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面
wx.switchTab()：跳轉到 abBar 頁面，並關閉其他所有非 tabBar 頁面
wx.navigateBack()關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層
wx.reLaunch()：關閉所有頁面，開啟到應用內的某個頁面

個人認為，如果是新專案，且沒有舊的 h5 專案遷移，則考慮用小程式原生開發，好處是相比於第三方框架，坑少。
而如果有 老的 h5 專案是 vue 開發 或者 也有 h5 專案也需要小程式開發，則比較適合 wepy 或者 mpvue 來做遷移或者開發，近期看wepy幾乎不更新了，所以推薦美團的mpvue。
而如果如果團隊前端強大，自己做一套框架也沒問題。

都是用來描述頁面的結構；
都由標籤、屬性等構成；
標籤名字不一樣，且小程式標籤更少，單一標籤更多；
多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表示式
WXML僅能在微信小程式開發者工具中預覽，而HTML可以在瀏覽器內預覽
元件封裝不同， WXML對元件進行了重新封裝，
小程式執行在JS Core內，沒有DOM樹和window物件，小程式中無法使用window物件和document物件。

1.域名必須是HTTPS
2. input元件placeholder字型顏色
3. wx.navigateTo無法跳轉到帶tabbar的頁面
4. tabbar在切換時頁面資料無法重新整理
5.如何去掉自定義button灰色的圓角邊框
6.input textarea是APP的原生元件，z-index層級最高
7.一段文字如何換行
8.設定最外層標籤的margin-bottom在IOS下不生效
9.小程式中canvas的圖片不支援base64格式
10.回到頁面頂部
11.wx.setStorageSync和wx.getStorageSync報錯問題
12.如何獲取微信群名稱？
13.new Date跨平臺相容性問題
14.wx.getSystemInfoSync獲取windowHeight不準確
15.圖片本地資源名稱，儘量使用小寫命名

let options=wx.getLanchOptionsSync()

由於此方法呼叫頻繁，不需要時，可以去掉，不要保留空方法，並且使用onPageScroll時，儘量避免使用setData()，儘量減少setData()的使用頻次。

使用setData(data, callback)，在callback回撥方法中新增後續操作程式碼

像wx.setStorageSync這種以Sync結尾的API為同步API，使用時使用try-catch來檢視異常，如果判定API為非同步，可以在其回撥方法success、fail、complete中進行下一步操作。

1.判斷使用者是否登陸過，如果已經登陸過，則直接獲取個人資訊進入主頁
2.未登入則引導登入，直接跳轉到登入頁面，封裝方法獲取code值，呼叫wx.login()方法,獲取到使用者資訊登陸成功就跳轉到個人主頁
//獲取code
wx.login({
    success:function(result){
        console.log(result)
        wx.request({
            url:'/login',
            data:{
                code:result.code
            },
            success:function(myres){
                if(myres.state==='登入成功'){
                    wx.setStorageSync('isLogin',true)
                    wx.navigateBack()
                }else{
                    wx.showToast({
                        title:''
                    })
                }
            }
        })
    }
})

1.小程式呼叫登入介面獲取code，傳遞給商戶伺服器用來獲取使用者的openId
  小程式呼叫wx.login()獲取臨時憑證code,並回轉到開發者伺服器，開發者伺服器以code換取使用者唯一表示openid和對談金鑰session_key
getToken:function(){
    wx.login({
    success:function(res){
            var code=res.code
            wx.request({
                url:商戶伺服器介面地址，
                data:{
                    code:code
                },
                method:'POST',
                success:function(res){
                    wx.setStorageSync('token',res.data)
                },
                fail:function(res){
                conso.sole.log(res.data)
                }
            })
        }
    })
}
2.token的生成以及快取
3.呼叫統一下單介面，獲取prepay_id再次簽名
4.小程式獲取五個引數後，鑑權調起支付
1).下載微信JS-SDK：2).呼叫統一下單api3).再次簽名
5.支付回撥,實際上我們需要重寫WxPayNotify類的Not