小程序初識(shí)與項(xiàng)目新建
微信小程序（Mini Program）是一種不需要下載安裝既可以使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用”觸手可及“的夢(mèng)想驹马，用戶掃一掃或者搜一下便可以打開應(yīng)用算利，今天我們簡(jiǎn)單的認(rèn)識(shí)一下微信小程序的原生框架（mina）效拭。
環(huán)境準(zhǔn)備
- 使用全新的郵箱注冊(cè)賬號(hào)缎患，在微信小程序后臺(tái)獲取APPID
- 微信開發(fā)者工具
需要在官網(wǎng)上手動(dòng)下載此工具较锡，這是集齊開發(fā)，預(yù)覽俯邓，調(diào)試稽鞭，發(fā)布于一身的完整環(huán)境朦蕴，但是它的編碼體驗(yàn)不是太好弟头，一般我是通過(guò)vscode+微信開發(fā)者工具一同進(jìn)行編碼赴恨，vscode負(fù)責(zé)敲代碼伦连，微信開發(fā)者工具負(fù)責(zé)預(yù)覽~
項(xiàng)目搭建的目錄結(jié)構(gòu)
| 文件夾名稱 | 作用 |
|---|---|
| styles | 存放公共樣式 |
| components | 存放自定義組件 |
| lib | 存放第三方庫(kù) |
| utils | 自己的工具庫(kù) |
| request | 自己的接口相關(guān)的幫助庫(kù) |
| icons | 存放圖標(biāo)的文件 |
小程序的配置文件
一個(gè)小程序會(huì)包含最基本的兩種配置文件，一種是全局的app.json和頁(yè)面自己的page.json,需要注意的是饺窿，配置文件中不能出現(xiàn)注釋短荐。
- 全局配置app.json
是當(dāng)前小程序的全局配置忍宋，包括小程序所有頁(yè)面路徑糠排，界面表現(xiàn)入宦，網(wǎng)絡(luò)超時(shí)時(shí)間乾闰，底部tab等涯肩，具體各項(xiàng)配置推薦查看官網(wǎng)巢钓。歡迎大家訪問 <a target="_blank">微信小程序全局配置詳解</a>硫朦。 - 頁(yè)面配置page.json
是用來(lái)定義頁(yè)面目錄下的page.json這類和小程序頁(yè)面相關(guān)的配置咬展，開發(fā)者可以獨(dú)立定義每個(gè)頁(yè)面的一下屬性瞒斩，比如頂部顏色荠割，是否允許下拉刷新等等蔑鹦，頁(yè)面中的配置只能設(shè)置app.json中window配置項(xiàng)的內(nèi)容，而且頁(yè)面中配置項(xiàng)會(huì)覆蓋app.json中的window中相同的配置項(xiàng)铺纽。
模板語(yǔ)法
WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件锅很，事件體統(tǒng)爆安，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)扔仓。
- 數(shù)據(jù)綁定
<!--text相當(dāng)于是span標(biāo)簽翘簇，view標(biāo)簽相當(dāng)于是div標(biāo)簽 -->
<!-- 在標(biāo)簽中變量的使用, 必須用”“包裹起來(lái) -->
<view data-msg="{{mag}}">
</view>
<!-- 在使用boolean充當(dāng)屬性 checked版保，字符串和花括號(hào)之間一定不要存在空格找筝，否則會(huì)導(dǎo)致識(shí)別失敗 -->
<view>
<checkbox checked="{{isChecked}}"></checkbox>
</view>
<!-- 在標(biāo)簽中變量的使用 -->
<view data-msg="{{msg}}">
自定義屬性
</view>
// js文件中的data{}放的是普通數(shù)據(jù)聲明~
Page({
data: {
msg: 'hello mina',
isChecked: 'true',
})
- 運(yùn)算
所謂的運(yùn)算就是說(shuō)可以 在花括號(hào)中加入表達(dá)式
表達(dá)式： 指的是一些簡(jiǎn)單運(yùn)算袖裕，數(shù)字運(yùn)算急鳄，字符串拼接堰酿，邏輯運(yùn)算坎藐，三元運(yùn)算符
語(yǔ)句： 復(fù)雜的代碼段【if else switch...】具體看相關(guān)代碼
注意：如果花括號(hào)和引號(hào)之間有空格岩馍，將會(huì)被解析成字符串
- 循環(huán)
- 列表循環(huán) wx:for="{{數(shù)組或者對(duì)象}} wx:for-item="循環(huán)項(xiàng)的名稱" wx:for-index="循環(huán)項(xiàng)的索引"
- 對(duì)象循環(huán) wx:for="{{對(duì)象}} wx:for-item="對(duì)象的值" wx:for-index="對(duì)象的屬性" "
wx:key 用來(lái)提高數(shù)組渲染的性能，它綁定的值有如下的選擇
- wx:key="唯一的值" 綁定一個(gè)普通的字符串的時(shí)候双谆，那么這個(gè)字符串名稱肯定是循環(huán)數(shù)組中的對(duì)象的唯一值
- wx:key="this" 表示當(dāng)數(shù)組是一個(gè)普通的數(shù)組比如【1顽馋，2庞呕，3程帕，4】時(shí)讲逛，this表示循環(huán)項(xiàng)本身盏混，*this必須是唯一的字符串和數(shù)組
嵌套循環(huán)许赃，綁定的名稱不要重名混聊，小程序默認(rèn)叫item句喜，和index咳胃，所以默認(rèn)只有一層循環(huán)的時(shí)候可以不用寫wx:for-item="循環(huán)項(xiàng)的名稱" wx:for-index="循環(huán)項(xiàng)的索引"
在循環(huán)中可以巧妙的使用block標(biāo)簽展懈，它相當(dāng)于占位符標(biāo)簽存崖，頁(yè)面渲染的時(shí)候會(huì)被移除掉金句，最終不會(huì)變成真正的dom元素
- 條件渲染
可以有兩種方式① wx:if ②hidden
事件綁定
小程序中的綁定事件贞瞒，是通過(guò)bind關(guān)鍵字來(lái)實(shí)現(xiàn)的军浆，比如常用的bindtap,bindinput,bindchange等，不同的組件支持不同的事件赞季，具體需要參照組件的說(shuō)明奢驯。
<!-- wxml-->
<input type="text" bindinput="handleInput"/>
<!-- page-->
handleInput(e){
console.log(e)
}
需要注意的事件參數(shù)傳值：
綁定事件時(shí)申钩，不能帶參數(shù)，不能帶括號(hào)瘪阁，要通過(guò)標(biāo)簽自定義屬性的方式進(jìn)行傳值撒遣，具體看demo
<!-- wxml-->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<!-- page-->
handletap(e){
console.log(e);
// 獲取自定義屬性，即傳過(guò)來(lái)的參數(shù)operation
const operation = e.currentTarget.dataset.operation;
this.setData({num: Number(this.data.num) + operation})
}
樣式WXSS
WXSS(WeiXin Style Sheets)是小程序的樣式語(yǔ)言管跺，用于描述WXML的組件樣式义黎，但是相比于css，wxss也有一些新的特性：
-
響應(yīng)式長(zhǎng)度單位 rpx
rpx可以根據(jù)屏幕看度進(jìn)行自適應(yīng)豁跑，規(guī)定屏幕寬度未750rpx,如果屏幕寬度未375px,則750rpx = 375px = 750物理像素廉涕，所以換算步驟為：- 確認(rèn)設(shè)計(jì)稿寬度pageWidth
- 計(jì)算比例 750rpx = pageWidth px,所以1px = 750rpx/pageWidth
- 在less文件中壶愤，主要把設(shè)計(jì)稿中的px => 750/pageWidth rpx即可
樣式導(dǎo)入
wxss中直接就支持樣式導(dǎo)入功能，通常使用@import語(yǔ)句來(lái)導(dǎo)入外聯(lián)樣式,而且只支持相對(duì)路徑選擇器
小程序不支持通配符 *-
小程序中使用less
原生小程序是不支持less的治力，但是我們可以通過(guò)以下方式來(lái)實(shí)現(xiàn)- 編輯器vscode
- 安裝插件 easy less
- 在vscode中的setting.json設(shè)置如下代碼马澈，進(jìn)行配置
"less.compile": { "outExt": ".wxss" }- 在編寫樣式的地方新建less文件涤伐，然后正常編輯即可
自定義組件
小程序也像其他前端框架一樣睦尽，可以允許用戶使用自定義組件的方式來(lái)構(gòu)建頁(yè)面，組件的組成也類似于頁(yè)面，由json, wxml, wxss, js四個(gè)文件組成，我們可以在微信開發(fā)者工具中快速創(chuàng)建組件的文件結(jié)構(gòu) ~
- 屏幕快照 2021-05-18 下午4.53.27.png
創(chuàng)建和使用組件的步驟
- 一般在外層components文件夾下欧宜，創(chuàng)建一個(gè)組件文件夾，通過(guò)右鍵快速創(chuàng)建相關(guān)的文件,假如我們創(chuàng)建一個(gè)tab組件
<!--自定義組件的wxml-->
<view class="tabs_content">
<!-- 就是個(gè)占位符挂绰，父調(diào)用子組件，就傳遞相應(yīng)的內(nèi)容 -->
<slot></slot>
</view>
- 在父組件的json中堪侯，聲明引用組件的位置
{
"usingComponents": {
"Tabs": "../../components/tabs/tabs"
}
}
- 在父組件的wxml中引用組件
<Tabs></Tabs>
父子組件傳值
父組件向子組件傳遞數(shù)據(jù)，通過(guò)標(biāo)簽屬性來(lái)傳遞
子向父?jìng)鬟f數(shù)據(jù)，通過(guò)事件的方式傳遞
具體過(guò)程：
父?jìng)髯?/strong>
子傳父
<!-- 子組件 -->
view class="tabs_title">
<view
bindtap="handleTap"
wx:for="{{tabs}}"
wx:key="id"
data-index="{{index}}"
class="tabs_item {{item.isActive ? 'active' : ''}}">
{{item.name}}
</view>
</view>
<view class="tabs_content">
<!-- 就是個(gè)占位符，父調(diào)用子組件届吁，就傳遞相應(yīng)的內(nèi)容 -->
<slot></slot>
</view>
<!-- 子組件js文件中通過(guò)使用triggerEvent方法亮蛔，指定事件名和需要傳的參數(shù)對(duì)象 -->
methods: {
handleTap(e){
const { index } = e.currentTarget.dataset;
// 觸發(fā)父組件自定義函數(shù)锉矢，并傳遞參數(shù)绵估，在父組件中的對(duì)應(yīng)的是binditemChange事件綁定
this.triggerEvent("itemChange", {index});
}
}
<!-- 父組件 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>
</Tabs>
//接受子組件的數(shù)據(jù)
handleItemChange(e){
let { index }=e.detail;
let {tabs}=this.data;
tabs.forEach((v, i) => {
i === index ? v.isActive=true : v.isActive=false;
});
this.setData({tabs})
}
小程序的生命周期
- 應(yīng)用的生命周期即app.js
onLaunch(){} =>應(yīng)用第一次啟動(dòng)觸發(fā)的事件亿遂，獲取用戶個(gè)人信息
onShow(){} => 應(yīng)用被用戶看到 從別的地方切到小程序的時(shí)候，對(duì)應(yīng)用的數(shù)據(jù)或者頁(yè)面效果進(jìn)行重置
onHide(){} => 應(yīng)用隱藏,用來(lái)暫推只玻或者清除定時(shí)器
onError(){} => 應(yīng)用的代碼發(fā)生報(bào)錯(cuò)的時(shí)候會(huì)觸發(fā)纯出，收集用戶的錯(cuò)誤信息，通過(guò)異步請(qǐng)求將錯(cuò)誤信息發(fā)送到后臺(tái)去
onPageNotFound(){} => 頁(yè)面找不到就會(huì)觸發(fā)，應(yīng)用第一次啟動(dòng)的時(shí)候居触，如果找不到第一個(gè)入口頁(yè)面，才會(huì)觸發(fā)床未，我們可以在這里做頁(yè)面不存在的時(shí)候，通過(guò)js的方式來(lái)重新跳轉(zhuǎn)頁(yè)面粮宛，重新跳轉(zhuǎn)到第二個(gè)備選首頁(yè) - 頁(yè)面生命周期：page.js
onLoad(){} => 發(fā)送異步請(qǐng)求，初始化頁(yè)面數(shù)據(jù)
onShow(){} => 頁(yè)面顯示
onReady(){} => 頁(yè)面初次渲染
onHide(){} => 頁(yè)面隱藏刺洒，頁(yè)面跳轉(zhuǎn)的時(shí)候會(huì)觸發(fā)
onUnload(){} => 頁(yè)面卸載的時(shí)候會(huì)觸發(fā)漂问，頁(yè)面跳轉(zhuǎn)的時(shí)候redirect或者其他會(huì)關(guān)閉當(dāng)前頁(yè)面的屬性會(huì)觸發(fā)這個(gè)生命周期
onPullDownRefresh(){} => 用戶下拉頁(yè)面灶平，頁(yè)面數(shù)據(jù)或者效果重新刷新
onReachBottom(){} =>用戶上拉觸底的時(shí)候觸發(fā)侧但，數(shù)據(jù)量足夠多出現(xiàn)滾動(dòng)條的時(shí)候趾娃，所以 當(dāng)頁(yè)面上下滾動(dòng)才行，上拉加載下一頁(yè)數(shù)據(jù)
onShareAppMessage(){} => 用戶轉(zhuǎn)發(fā)的時(shí)候觸發(fā)
onPageScroll(){} => 頁(yè)面滾動(dòng)就會(huì)觸發(fā)，只要一滾動(dòng)就要觸發(fā), 反復(fù)觸發(fā)晤锥，最好少用
onResize(){} =>頁(yè)面的尺寸發(fā)生改變的時(shí)候觸發(fā)，當(dāng)小程序發(fā)生橫屏挽绩，豎屏的時(shí)候會(huì)觸發(fā)
onTabItemTap(){} => 只存在tabbar頁(yè)面灶搜，只有點(diǎn)擊tabbar才會(huì)觸發(fā)
總結(jié)
這篇文章是在具備其他前端框架的基礎(chǔ)上進(jìn)行學(xué)習(xí)的，假如是完全零基礎(chǔ)的同學(xué)初婆，這篇文章可能介紹的還不夠詳細(xì)紫皇，歡迎大家積極查閱官網(wǎng)文檔凤类，但是也希望這篇文章可以幫助大家快速的認(rèn)識(shí)小程序~
