微信小程序开发
下載地址：https://mp.weixin.qq.com/
新建一個項目，效果如下：
微信小程序的各級目錄介紹：
app.js是全局的JavaScript代碼，app.json是全局的配置文件，app.wxss是全局css文件
如果全局代碼和局部代碼沖突時，全局代碼優先級高
資源管理器中有幾個頁面，在app.json中的pages當中就得寫幾個頁面，完全相同，第一個表示首頁的路徑，可以在pages當中增加路徑，保存之后自動生成對應的文件，app.json當中的window就是頁面外觀的樣式
js文件當中的代碼都要寫在page()函數當中
onLaunch()：小程序第一次加載時執行的代碼
navigationBarBackgroundColor：導航欄背景顏色設置
微信小程序規定頁面當中的js配置文件如果是空的，就要刪除
頁面結構：
各文件夾當中的json和js文件的作用是替代app.json和app.js文件
window當中的屬性：
nBBC:導航條的背景顏色
nBTS:導航條當中的文字顏色
nBTT:導航條當中的文字內容
bC:窗口的背景顏色（當開啟下拉刷新時才能看見顏色）
bTS:下拉刷新時小點的背景色（light和dark）
ePDR:開啟下拉刷新
頁面當中的json配置文件只能設置window內容
標簽欄的配置：app.json當中的tabBar屬性
tabBar屬性必須是2個以上5個以下，text為內容，pagePath為超鏈接，selected表示被選中的
數據綁定：類似vue框架當中的插值表達式，只不過不需要id屬性，更加方便
插值表達式可以用在元素的內部，并且不需要v-bind屬性來綁定內容
插值表達式的其他用途：
pages當中的函數
循環結構：wx：for ="{{ 對象 }}"類似vue的v-for循環
在循環中{{ index }}可以拿到循環數組的下標
基本的事件是bind+事件名組成
點擊事件：bindtap，微信小程序的函數也可以接受參數
阻止冒泡的方法：把內部的點擊事件設置為catchtap，不會產生冒泡事件
微信小程序在函數當中的this指向的還是頁面
微信小程序想要給函數傳遞參數不能使用函數名+()的形式，但是可以通過e.target.dataset可以拿到自定義屬性，自定義屬性用data-屬性名=‘屬性值’的方式定義
頁面對象也就是page，this.data.屬性可以拿到插值表達式當中定義的屬性和數據
雙向數據綁定的方法（類似Vue當中的v-model）：
插值表達式是一次性的過程，頁面顯示完數據之后再更改數據的值時，頁面不會發生變化，需要使用
this.setData({ 屬性:新值 })函數改變數據值，才能實時響應到頁面當中，這個屬性是data數據當中的屬性，如果想給數組對象當中的某個屬性賦值，這個屬性必須加引號
e.detail.value可以拿到表單的內容，e就是頁面對象
獲取表單當中輸入的數據：form標簽綁定事件bindsubmit，button按鈕綁定form-type事件，input當中要有name屬性
條件渲染：wx：if
標簽的作用：把需要被控制的代碼塊（wx：開頭的代碼）寫在block標簽當中，可以起到同時控制的作用，但是block標簽不會顯示，也沒有任何額外的功能，類似span標簽
微信小程序獨有的尺寸單位：rpx ；
小程序UI開發：組件的使用方法，size屬性可以控制圖標和表單的大小
進度條：progress（類似mui框架的進度條）
在微信小程序中，hover表示按下，hover-class表示按下之后的class屬性
操作反饋：交互操作組件，必須通過調用API方式使用
flex伸縮布局：flex布局就是一個彈性的盒子，當盒子內的內容增多時，不需要更改代碼也能實現很好的布局方式
子盒子會以主軸為方向，占滿整個側軸的空間，如果給最右邊盒子添加flex：1屬性，則會占滿右邊的內容，如果給全部的子盒子都添加flex：1屬性，則每個子盒子會平分父盒子。這個flex的值可以設置為任何數，它占多少取決于自身的值/總值，彈性盒子是可以相互嵌套的
頁面跳轉：
微信小程序的超鏈接標簽是navigator，url是鏈接地址，如果在navigator標簽當中添加redirect屬性，則頁面沒有返回按鈕，直接替換，并且不會產生訪問記錄。navigator當中的hover-class屬性為點擊添加的類名屬性
微信小程序和網頁一樣，在跳轉頁面時如果想要傳遞參數，則需要在url鏈接之后使用？+參數名=‘參數值’的形式傳遞，在對應網頁的js文件當中的onLoad函數中，option為第一個頁面傳遞過來的參數值
頁面跳轉API：wx.navigateTo函數
頁面返回AIP：wx.navigateBack({ delta:1 }),delta可以設置返回到第幾個頁面
微信小程序中標簽的class等屬性可以通過對數據的三元表達式來判斷布爾值來設置不同的屬性
輪播圖：微信小程序自帶一個輪播圖的組件
//定義輪播圖的組件 <swiper class='slides'>//每一個被輪播的單項，當中放的是圖片<swiper-item><image src=""></image></swiper-item> </swiper>微信小程序對服務器端發送請求：發送的請求不在是ajax，微信小程序沒有跨域的概念，請求地址可以寫任意的地址。請求的地址必須在后臺添加白名單，域名必須備案，而且必須是https。
自己開發可以在微信小程序開發工具勾選不檢驗合法域名
wx.request：
wx.request({url: 'url',header:{'Content-Type':'json'},/*success函數的三種方法：success:function(res){console.log(res);}success(res){console.log(res);}*/success:res =>{console.log(res);}fail:function(res){}})把請求函數封裝在公共文件utils當中，通過es6的方法導出使用
util.js代碼部分：
module.exports = (url,data) => {return new Promise((resolve,reject) => {wx.request({url: `https://www.baidu.com/${url}`,success:resolve,fail:reject})}) }index.js部分代碼：
//引入util.js，require當中為字符串類型的數據，并且該行代碼寫在js文件最上方 const fetch = require("../../utils/util");使用方法：
fetch('url').then( res => {執行代碼 })微信小程序下拉加載更多信息：移動端的下拉加載信息本質也是PC端的分頁加載，觸底時加載第二頁的數據
原理：
服務器端：在數據庫中有很多表，每個表中都有一個id屬性，并且從1遞增
頁面端：在data中定義一個空數組和第幾次查詢，在給服務器端發送請求時附帶一個請求參數。這個請求參數表示第幾次查詢，并且用limit限制查詢的數據，把每次請求過來的全部數據都追加到這個數組當中。在頁面端使用wx：for循環渲染數組當中的數據
頁面上拉觸底事件的處理函數：
onReachBottom：function(){
}
img標簽的圖片如果只給高度或者寬度的其中一個屬性時，再給一個屬性mode=‘widthFix’/mode=‘heightFix’，可以讓圖片自適應
總結
- 上一篇： VCPKG 常用命令
- 下一篇： pwnable.tw dubblesor