小程序出來這么久具被，一直沒有接觸過猫十，今天來初步認識一下。
想要做一個小程序次和，第一步反肋，找到微信開放文檔，https://developers.weixin.qq.com/doc/斯够。里面有非常詳細的介紹囚玫，關于注冊，認證等不多加介紹读规，可以直接去看。
在了解了一些文檔后燃少，我把開發(fā)工具“微信開發(fā)者工具”下載下來了束亏，要了解他，自己要建一個demo阵具，我是沒有申請appid的碍遍，直接使用的測試號，如下圖阳液。
建好后怕敬，進入頁面，說實話帘皿，挺蒙的东跪，項目已經(jīng)初始化并包含了一些簡單的代碼文件。同名的各種文件鹰溜，下面來說一下每個文件的作用虽填。
最關鍵也是必不可少的，是 app.js曹动、app.json斋日、app.wxss 這三個。其中墓陈，.js 后綴的是腳本文件恶守，.json 后綴的文件是配置文件，.wxss 后綴的是樣式表文件贡必。微信小程序會讀取這些文件兔港，并生成小程序實例。
app.js
小程序的腳本代碼赊级。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)押框、聲明全局變量。調(diào)用 MINA 提供的豐富的 API理逊，如本例的同步存儲及同步讀取本地數(shù)據(jù)橡伞。
// app.js
App({
onLaunch() {
// 展示本地存儲能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
// 獲取用戶信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已經(jīng)授權盒揉，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會彈框
wx.getUserInfo({
success: res => {
// 可以將 res 發(fā)送給后臺解碼出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是網(wǎng)絡請求兑徘，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
app.json
小程序的全局配置刚盈。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口 背景色挂脑，配置導航條樣式藕漱，配置默認標題。注意該文件不可添加任何注釋崭闲。在創(chuàng)建的項目中肋联，默認有兩個界面，這兩個界面的源碼在page目錄下刁俭。微信小程序中的每一個頁面的【路徑 + 頁面名】都需要寫在 app.json 的 pages 中橄仍，且 pages 中的第一個頁面是小程序的首頁。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "TestProgram",
"navigationBarTextStyle":"white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
app.wxss
小程序公共樣式表牍戚。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則侮繁。
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
看完小程序的更目錄，我們還可以發(fā)現(xiàn)如孝，有一個pages的文件夾宪哩，不難猜出這個文件夾就是存放小程序的每個頁面的。本例中有兩個頁面第晰，都放在了page目錄下锁孟。每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js但荤、index.wxml罗岖、index.wxss、index.json腹躁。.js 后綴的文件是腳本文件桑包，.json 后綴的文件是配置文件，.wxss 后綴的是樣式表文件纺非，.wxml 后綴的文件是頁面結構文件哑了。（.js .xml是構成頁面的必須文件， .wxss .json為非必須文件）
index.js
頁面的腳本文件烧颖，在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)弱左、獲取小程序實例，聲明并處理數(shù)據(jù)炕淮，響應頁面交互事件等拆火。
// index.js
// 獲取應用實例
const app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
// 事件處理函數(shù)
bindViewTap() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad() {
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是網(wǎng)絡請求，可能會在 Page.onLoad 之后才返回
// 所以此處加入 callback 以防止這種情況
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在沒有 open-type=getUserInfo 版本的兼容處理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
},
getUserInfo(e) {
console.log(e)
app.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
})
index.wxml
頁面的結構文件，代碼的結結構類似于HTML们镜”姨荆可在該文件中搭建頁面結構，綁定數(shù)據(jù)和交互處理數(shù)據(jù)模狭。
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
index.wxss 是頁面的樣式表：類似于CSS.
/**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;
}
