一、下面簡單介紹一下微信小程序：
- 首先要注冊小程序開發(fā)者賬號獲取appID，沒有的話功能會受限很多。例如沒發(fā)在手機上預(yù)覽效果。
- 下載小程序官方開發(fā)工具
- 下載微信小程序簡易教程中的源碼
- 接著用微信的開發(fā)工具打開你剛才下載的源碼，按照提示進行就行了。
顯示效果如下：
小程序首界面.png
二、這時點擊左側(cè)的編輯按鈕會看到相目結(jié)構(gòu)如上圖。先看最下方的三個文件：
.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件
- app.js是小程序的腳本代碼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數(shù)據(jù)。想了解更多可用 API，可參考 API 文檔
相關(guān)代碼：
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
- app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口?背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。更多可配置項可參考配置詳解
相關(guān)代碼：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
- app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。
相關(guān)代碼：
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
三、疑問：
1. 創(chuàng)建新的項目都怎么創(chuàng)建？
我每次都是都是下載一次上面的官方源碼，感覺這個方法太low了，大家有沒有好的創(chuàng)建新項目的方式？微信官方?jīng)]找到創(chuàng)建方式，開發(fā)工具也沒找到
2. 創(chuàng)建新的文件怎么創(chuàng)建？
暫時我發(fā)現(xiàn)了一個快捷的方式，就是在 app.json中寫入路徑保存后相關(guān)的文件就會自動創(chuàng)建了，這一招太方便了！在官方配置中我依然沒有發(fā)現(xiàn)這種快捷的創(chuàng)建方式，小程序的文檔寫的感覺無力吐槽！后面的.wxss配置樣式表讓我這從來沒接觸過css的感覺有點崩潰。
