微信小程序
簡介
騰訊在微信中推出的一種介于 Native App 和 Web App 之間的程序
程序中的程序，生態中的生態
開發工具的下載與使用
下載地址: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
工具的使用是比較簡單的，可以參照官方提供的文檔https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/debug.html
目錄結構的說明
創建項目的時候勾選在當前目錄中創建 quick start 項目，可以生產一個基礎的項目，文件結構如下：
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
結構解釋說明
-
pages小程序中所有的頁面都會存在此文件夾下，每個頁面都以一個文件夾的形式存在，里面文件分為四種 -
index/index.jsindex頁面的邏輯代碼 -
index/inde.jsonindex頁面的數據代碼 -
Index/index.wxmlindex頁面的結構代碼 -
index/index.wxssindex頁面的樣式代碼 -
utils一些工具類，放在此文件夾下 -
app.js小程序主文件，配置app相關的信息。整個app的生命周期方法也在此文件中 -
app.json配置整個程序相關信息。例如：主題顏色，tabbar如何切換等等 -
app.wxss配置整個微信小程序的全局樣式，可以認為是所有頁面的根樣式
特殊文件格式說明
在微信小程序中，不是直接使用HTML和CSS進行頁面的編寫，而是進行了一定的升級
*.wxml代表小程序中頁面的結構文件，*.wxss代表小程序中頁面的樣式文件，每個頁面都應該有這兩個同名文件
index.wxml
在wxml文件中，可以發現，不再是html中的div、img、span等標簽，而是使用了view、image、text等標簽
view === divimage === imgtext === p
wxml中的標簽和HTML中的標簽作用一致，只是要求這么編寫而已
<!--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變化到不是很大，除了新增一個單位 rpx以外，其它基本一致
rpx是小程序中的長度單位，好處就是會跟著屏幕變化而變化
如果在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，即1rpx = 0.5px
換算規則如下：
| 設備 | 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 |
注意：開發微信小程序時設計師可以用 iPhone6 作為視覺稿的標準,單位換算相對簡單
/**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;
}
更換項目首頁、動態數據、事件綁定
創建的項目中，有個默認的首頁，我們把它換掉，換成垂直和水平居中的一個大文字
-
在
app.json文件中添加新頁面
app.json文件中有個pages的位置，里面放置的小程序頁面的路徑。
在小程序中，所有的頁面，都需要在app.json的pages中進行注冊。
為了提高開發效率，沒必要分別創建home.js、home.json、home.wxml、home.wxss這些文件，只需要修改app.json中pages后面的內容即可{ "pages":[ "pages/home/home", "pages/index/index", "pages/logs/logs" ] }pages對應的是一個數組，在第一個位置添加
"pages/home/home"，意為在pages文件夾下創建home文件夾，后面的home代表文件夾中所有文件的名稱?
注意: 路徑的位置很重要，小程序會認為在pages對應的數組中
第一個元素的路徑為首頁 -
添加結構
打開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; }把頁面設置高度為
100%，然后彈性布局，讓內容居中，發現頁面并沒有居中，還需要添加另外一段代碼
打開app.wxss文件，在最上面添加如下代碼：page { height: 100%; }因為在小程序的網頁中，
最外層的標簽是page，然后內部才是home.wxml中的內容，所以想要讓home.wxml中的view高度和屏幕一致，即需要先設置page高度和屏幕一致 -
頁面效果如下
-
把頁面數據改為動態數據
頁面中的HOME PAGE文字為寫死的，改為動態數據，方便后續更改
把數據放在home.js文件中，然后渲染到頁面上
打開pages/home/home.js文件，自動生成了相關生命周期方法，找到data，添加數據data: { title: 'HOME PAGE' }打開
pages/home/home.wxml文件，修改代碼如下：<view class="home"> <text>{{ title }}</text> </view>使用
{{ }}作為表達式，內部直接寫變量，就可以進行變量的解析（和AngularJS、VueJS的表達式是一樣的） 查看頁面效果和網頁中是完全一樣的
-
添加行為 在頁面中添加一個按鈕，然后點擊彈框顯示
打開pages/home/home.js文件，在data后面添加事件data: { title: 'HOME PAGE' }, showInfo() { // 注意，添加的方法和data是同級的 wx.showModal({ title: '標題', content: '內容', success: function(res) { console.log('點擊了確定的回調') }, fail: function(res) { console.log('點擊了取消的回調') }, complete: function(res) { console.log('無論點擊確定還是取消，都會執行的回調') } }) }打開
pages/home/home.wxml文件，添加代碼和綁定事件<view class="home"> <text>{{ title }}</text> <button bindtap="showInfo">彈框顯示</button> </view>頁面效果如下：
-
添加新事件，修改數據
打開pages/home/home.js文件，添加事件，目的是修改數據，改變頁面changeTitle() { // 修改數據 this.setData({ title: 'home page' }) },打開
pages/home/home.wxml文件，添加button，并綁定按鈕<button bindtap="changeTitle">修改文件</button>頁面效果
點擊修改文字按鈕，上面的文字就會更新
修改整個小程序的樣式
app.json是對整個小程序的全局配置
可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口?背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何注釋
更多可配置項可參考配置詳解
{
"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
接受一個數組，每一項都是字符串，來指定小程序由哪些頁面組成
每一項代表對應頁面的【路徑+文件名】信息
數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對 pages 數組進行修改
文件名不需要寫文件后綴，因為框架會自動去尋找路徑
.json,.js,.wxml,.wxss的四個文件進行整合
window
用于設置小程序的狀態欄、導航條、標題、窗口背景色
tabBar
如果我們的小程序是一個多 tab 應用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），那么我們可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面
- 當設置 position 為 top 時，將不會顯示 icon
- tabBar 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序
networkTimeout
可以設置各種網絡請求的超時時間
修改單個頁面相關信息
除了app.json以外，每個頁面也都有自己的*.json文件，可以設置相關信息，只對當前頁面有效
頁面的配置比app.json全局配置簡單得多，只是設置app.json中的 window配置項的內容，頁面中配置項會覆蓋 app.json 的 window中相同的配置項。
{
"navigationBarBackgroundColor": "#000",
"navigationBarTextStyle": "light",
"navigationBarTitleText": "導航欄標題文字",
"backgroundColor": "#fff",
"backgroundTextStyle": "light"
}
小程序主文件 app.js
在app.js文件中，App() 函數用來注冊一個小程序
接受一個 object 參數，其指定小程序的生命周期函數等
App({
onLaunch: function(options) {
// 當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
// Do something initial when launch.
},
onShow: function(options) {
// 當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow
// Do something when show.
},
onHide: function() {
// 當小程序從前臺進入后臺，會觸發 onHide
// Do something when hide.
},
onError: function(msg) {
// 當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息
console.log(msg)
},
globalData: { // 全局的數據，在任何頁面中都可以訪問到
info: 'I am global data'
}
})
在子頁面中可以獲取代表小程序的App對象：
// 直接調用getApp()函數
let app = getApp()
// 可以從app中訪問全局數據，可讀可寫
console.log(app.globalData.info)
注意：
-
App()必須在app.js中注冊，且不能注冊多個 - 不要在定義于
App()內的函數中調用getApp()，使用this就可以拿到 app 實例 - 不要在 onLaunch 的時候調用
getCurrentPages()，此時 page 還沒有生成 - 通過
getApp()獲取實例之后，不要私自調用生命周期函數
