一捧韵、下面簡單介紹一下微信小程序：
- 首先要注冊(cè)小程序開發(fā)者賬號(hào)獲取appID颤枪，沒有的話功能會(huì)受限很多渤昌。例如沒發(fā)在手機(jī)上預(yù)覽效果。
- 下載小程序官方開發(fā)工具
- 下載微信小程序簡易教程中的源碼
- 接著用微信的開發(fā)工具打開你剛才下載的源碼澈驼，按照提示進(jìn)行就行了辛燥。
顯示效果如下：
小程序首界面.png
二、這時(shí)點(diǎn)擊左側(cè)的編輯按鈕會(huì)看到相目結(jié)構(gòu)如上圖缝其。先看最下方的三個(gè)文件：
.js后綴的是腳本文件挎塌，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件
- app.js是小程序的腳本代碼氏淑。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)勃蜘、聲明全局變量。調(diào)用框架提供的豐富的 API假残，如本例的同步存儲(chǔ)及同步讀取本地?cái)?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 是對(duì)整個(gè)小程序的全局配置辉懒。我們可以在這個(gè)文件中配置小程序是由哪些頁面組成阳惹，配置小程序的窗口?背景色，配置導(dǎo)航條樣式眶俩，配置默認(rèn)標(biāo)題莹汤。注意該文件不可添加任何注釋。更多可配置項(xiàng)可參考配置詳解
相關(guān)代碼：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
- app.wxss 是整個(gè)小程序的公共樣式表颠印。我們可以在頁面組件的 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)建新的項(xiàng)目都怎么創(chuàng)建线罕？
我每次都是都是下載一次上面的官方源碼止潮，感覺這個(gè)方法太low了，大家有沒有好的創(chuàng)建新項(xiàng)目的方式钞楼？微信官方?jīng)]找到創(chuàng)建方式喇闸，開發(fā)工具也沒找到
2. 創(chuàng)建新的文件怎么創(chuàng)建？
暫時(shí)我發(fā)現(xiàn)了一個(gè)快捷的方式询件，就是在 app.json中寫入路徑保存后相關(guān)的文件就會(huì)自動(dòng)創(chuàng)建了燃乍，這一招太方便了！在官方配置中我依然沒有發(fā)現(xiàn)這種快捷的創(chuàng)建方式宛琅，小程序的文檔寫的感覺無力吐槽刻蟹！后面的.wxss配置樣式表讓我這從來沒接觸過css的感覺有點(diǎn)崩潰。
