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