微信小程序
簡(jiǎn)介
騰訊在微信中推出的一種介于 Native App 和 Web App 之間的程序
程序中的程序岸夯，生態(tài)中的生態(tài)
開發(fā)工具的下載與使用
下載地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
工具的使用是比較簡(jiǎn)單的猜扮，可以參照官方提供的文檔https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/debug.html
目錄結(jié)構(gòu)的說明
創(chuàng)建項(xiàng)目的時(shí)候勾選在當(dāng)前目錄中創(chuàng)建 quick start 項(xiàng)目监婶，可以生產(chǎn)一個(gè)基礎(chǔ)的項(xiàng)目，文件結(jié)構(gòu)如下：
pages
index
index.js
inde.json
inde.wxml
index.wxss
logs
logs.js
logs.json
logs.wxml
logs.wxss
utils
util.js
app.js
app.json
app.wxss
結(jié)構(gòu)解釋說明
-
pages小程序中所有的頁(yè)面都會(huì)存在此文件夾下鲜漩，每個(gè)頁(yè)面都以一個(gè)文件夾的形式存在集惋，里面文件分為四種 -
index/index.jsindex頁(yè)面的邏輯代碼 -
index/inde.jsonindex頁(yè)面的數(shù)據(jù)代碼 -
Index/index.wxmlindex頁(yè)面的結(jié)構(gòu)代碼 -
index/index.wxssindex頁(yè)面的樣式代碼 -
utils一些工具類，放在此文件夾下 -
app.js小程序主文件喉祭，配置app相關(guān)的信息。整個(gè)app的生命周期方法也在此文件中 -
app.json配置整個(gè)程序相關(guān)信息泛烙。例如：主題顏色翘紊，tabbar如何切換等等 -
app.wxss配置整個(gè)微信小程序的全局樣式，可以認(rèn)為是所有頁(yè)面的根樣式
特殊文件格式說明
在微信小程序中，不是直接使用HTML和CSS進(jìn)行頁(yè)面的編寫宇立，而是進(jìn)行了一定的升級(jí)
*.wxml代表小程序中頁(yè)面的結(jié)構(gòu)文件自赔，*.wxss代表小程序中頁(yè)面的樣式文件，每個(gè)頁(yè)面都應(yīng)該有這兩個(gè)同名文件
index.wxml
在wxml文件中绍妨，可以發(fā)現(xiàn)，不再是html中的div他去、img、span等標(biāo)簽尔苦，而是使用了view行施、image、text等標(biāo)簽
view === divimage === imgtext === p
wxml中的標(biāo)簽和HTML中的標(biāo)簽作用一致蛾号，只是要求這么編寫而已
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
index.wxss
wxss和css變化到不是很大涯雅，除了新增一個(gè)單位 rpx以外，其它基本一致
rpx是小程序中的長(zhǎng)度單位活逆，好處就是會(huì)跟著屏幕變化而變化
如果在iPhone6上，屏幕寬度為375px怒允，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素锈遥，即1rpx = 0.5px
換算規(guī)則如下：
| 設(shè)備 | rpx => px | px => rpx |
|---|---|---|
| iPhone 5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone 6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone 6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
注意：開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn),單位換算相對(duì)簡(jiǎn)單
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
更換項(xiàng)目首頁(yè)所灸、動(dòng)態(tài)數(shù)據(jù)、事件綁定
創(chuàng)建的項(xiàng)目中爬立，有個(gè)默認(rèn)的首頁(yè)，我們把它換掉知纷，換成垂直和水平居中的一個(gè)大文字
-
在
app.json文件中添加新頁(yè)面
app.json文件中有個(gè)pages的位置，里面放置的小程序頁(yè)面的路徑琅轧。
在小程序中，所有的頁(yè)面乍桂，都需要在app.json的pages中進(jìn)行注冊(cè)。
為了提高開發(fā)效率权谁，沒必要分別創(chuàng)建home.js憋沿、home.json、home.wxml辐啄、home.wxss這些文件，只需要修改app.json中pages后面的內(nèi)容即可{ "pages":[ "pages/home/home", "pages/index/index", "pages/logs/logs" ] }pages對(duì)應(yīng)的是一個(gè)數(shù)組壶辜，在第一個(gè)位置添加
"pages/home/home"，意為在pages文件夾下創(chuàng)建home文件夾抵怎，后面的home代表文件夾中所有文件的名稱?
注意: 路徑的位置很重要，小程序會(huì)認(rèn)為在pages對(duì)應(yīng)的數(shù)組中
第一個(gè)元素的路徑為首頁(yè) -
添加結(jié)構(gòu)
打開pages/home/home.wxml文件反惕，修改里面的代碼為如下：<view class="home"> <text>HOME PAGE</text> </view> -
添加樣式
打開pages/home/home.wxss文件演侯，修改里面的代碼如下：/* pages/home/home.wxss */ .home { height: 100%; height: 100%; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; background-color: #333; } .home text { font-size: 100rpx; color: white; font-weight: bold; }把頁(yè)面設(shè)置高度為
100%，然后彈性布局蚌本，讓內(nèi)容居中，發(fā)現(xiàn)頁(yè)面并沒有居中程癌，還需要添加另外一段代碼
打開app.wxss文件，在最上面添加如下代碼：page { height: 100%; }因?yàn)樵谛〕绦虻木W(wǎng)頁(yè)中进萄，
最外層的標(biāo)簽是page，然后內(nèi)部才是home.wxml中的內(nèi)容可婶，所以想要讓home.wxml中的view高度和屏幕一致，即需要先設(shè)置page高度和屏幕一致 -
頁(yè)面效果如下
-
把頁(yè)面數(shù)據(jù)改為動(dòng)態(tài)數(shù)據(jù)
頁(yè)面中的HOME PAGE文字為寫死的矛渴，改為動(dòng)態(tài)數(shù)據(jù)惫搏，方便后續(xù)更改
把數(shù)據(jù)放在home.js文件中，然后渲染到頁(yè)面上
打開pages/home/home.js文件筐赔，自動(dòng)生成了相關(guān)生命周期方法，找到data达皿，添加數(shù)據(jù)data: { title: 'HOME PAGE' }打開
pages/home/home.wxml文件贿肩，修改代碼如下：<view class="home"> <text>{{ title }}</text> </view>使用
{{ }}作為表達(dá)式，內(nèi)部直接寫變量尸曼，就可以進(jìn)行變量的解析（和AngularJS萄焦、VueJS的表達(dá)式是一樣的） 查看頁(yè)面效果和網(wǎng)頁(yè)中是完全一樣的
-
添加行為 在頁(yè)面中添加一個(gè)按鈕，然后點(diǎn)擊彈框顯示
打開pages/home/home.js文件拂封，在data后面添加事件data: { title: 'HOME PAGE' }, showInfo() { // 注意，添加的方法和data是同級(jí)的 wx.showModal({ title: '標(biāo)題', content: '內(nèi)容', success: function(res) { console.log('點(diǎn)擊了確定的回調(diào)') }, fail: function(res) { console.log('點(diǎn)擊了取消的回調(diào)') }, complete: function(res) { console.log('無論點(diǎn)擊確定還是取消在抛，都會(huì)執(zhí)行的回調(diào)') } }) }打開
pages/home/home.wxml文件，添加代碼和綁定事件<view class="home"> <text>{{ title }}</text> <button bindtap="showInfo">彈框顯示</button> </view>頁(yè)面效果如下：
-
添加新事件刚梭，修改數(shù)據(jù)
打開pages/home/home.js文件票唆，添加事件，目的是修改數(shù)據(jù)衅金，改變頁(yè)面changeTitle() { // 修改數(shù)據(jù) this.setData({ title: 'home page' }) },打開
pages/home/home.wxml文件，添加button，并綁定按鈕<button bindtap="changeTitle">修改文件</button>頁(yè)面效果
點(diǎn)擊修改文字按鈕鉴吹，上面的文字就會(huì)更新
修改整個(gè)小程序的樣式
app.json是對(duì)整個(gè)小程序的全局配置
可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成惩琉，配置小程序的窗口?背景色，配置導(dǎo)航條樣式瞒渠，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋
更多可配置項(xiàng)可參考配置詳解
{
"pages":[
"pages/home/home",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "微信 小程序",
"navigationBarTextStyle":"black"
},
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "home",
"iconPath": "imgs/icon.png",
"selectedIconPath": "imgs/icon_selected.png"
},{
"pagePath": "pages/index/index",
"text": "index",
"iconPath": "imgs/icon.png",
"selectedIconPath": "imgs/icon_selected.png"
},{
"pagePath": "pages/logs/logs",
"text": "logs",
"iconPath": "imgs/icon.png",
"selectedIconPath": "imgs/icon_selected.png"
}]
},
"networkTimeout": {
"request": 20000,
"connectSocket": 20000,
"uploadFile": 20000,
"downloadFile": 20000
}
}
pages
接受一個(gè)數(shù)組诚啃，每一項(xiàng)都是字符串私沮，來指定小程序由哪些頁(yè)面組成
每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的【路徑+文件名】信息
數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面。小程序中新增/減少頁(yè)面造垛，都需要對(duì) pages 數(shù)組進(jìn)行修改
文件名不需要寫文件后綴，因?yàn)榭蚣軙?huì)自動(dòng)去尋找路徑
.json,.js,.wxml,.wxss的四個(gè)文件進(jìn)行整合
window
用于設(shè)置小程序的狀態(tài)欄五辽、導(dǎo)航條、標(biāo)題杆逗、窗口背景色
tabBar
如果我們的小程序是一個(gè)多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁(yè)面）鳞疲，那么我們可以通過 tabBar 配置項(xiàng)指定 tab 欄的表現(xiàn)，以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面
- 當(dāng)設(shè)置 position 為 top 時(shí)悔橄，將不會(huì)顯示 icon
- tabBar 是一個(gè)數(shù)組腺毫，只能配置最少2個(gè)癣疟、最多5個(gè) tab睛挚，tab 按數(shù)組的順序排序
networkTimeout
可以設(shè)置各種網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間
修改單個(gè)頁(yè)面相關(guān)信息
除了app.json以外澈灼，每個(gè)頁(yè)面也都有自己的*.json文件店溢，可以設(shè)置相關(guān)信息委乌，只對(duì)當(dāng)前頁(yè)面有效
頁(yè)面的配置比app.json全局配置簡(jiǎn)單得多，只是設(shè)置app.json中的 window配置項(xiàng)的內(nèi)容遭贸，頁(yè)面中配置項(xiàng)會(huì)覆蓋 app.json 的 window中相同的配置項(xiàng)戈咳。
{
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "light",
"navigationBarTitleText": "導(dǎo)航欄標(biāo)題文字",
"backgroundColor": "#fff",
"backgroundTextStyle": "light"
}
小程序主文件 app.js
在app.js文件中著蛙，App() 函數(shù)用來注冊(cè)一個(gè)小程序
接受一個(gè) object 參數(shù)耳贬，其指定小程序的生命周期函數(shù)等
App({
onLaunch: function(options) {
// 當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā) onLaunch（全局只觸發(fā)一次）
// Do something initial when launch.
},
onShow: function(options) {
// 當(dāng)小程序啟動(dòng)顷蟆，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā) onShow
// Do something when show.
},
onHide: function() {
// 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)帐偎，會(huì)觸發(fā) onHide
// Do something when hide.
},
onError: function(msg) {
// 當(dāng)小程序發(fā)生腳本錯(cuò)誤蛔屹，或者 api 調(diào)用失敗時(shí)，會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息
console.log(msg)
},
globalData: { // 全局的數(shù)據(jù)兔毒，在任何頁(yè)面中都可以訪問到
info: 'I am global data'
}
})
在子頁(yè)面中可以獲取代表小程序的App對(duì)象：
// 直接調(diào)用getApp()函數(shù)
let app = getApp()
// 可以從app中訪問全局?jǐn)?shù)據(jù)，可讀可寫
console.log(app.globalData.info)
注意：
-
App()必須在app.js中注冊(cè)绕辖，且不能注冊(cè)多個(gè) - 不要在定義于
App()內(nèi)的函數(shù)中調(diào)用getApp()擂红，使用this就可以拿到 app 實(shí)例 - 不要在 onLaunch 的時(shí)候調(diào)用
getCurrentPages()围小，此時(shí) page 還沒有生成 - 通過
getApp()獲取實(shí)例之后昵骤，不要私自調(diào)用生命周期函數(shù)
