本文作者：code_xzh，來自原文地址
本文檔將帶你一步步創(chuàng)建完成一個(gè)微信小程序，并可以在手機(jī)上體驗(yàn)該小程序的實(shí)際效果。
入門篇
開發(fā)準(zhǔn)備工作
獲取微信小程序的 AppID
登錄 https://mp.weixin.qq.com ，就可以在網(wǎng)站的“設(shè)置”-“開發(fā)者設(shè)置”中，查看到微信小程序的 AppID 了，注意不可直接使用服務(wù)號(hào)或訂閱號(hào)的 AppID 。
下載開發(fā)工具
下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476197489869
新建項(xiàng)目
開發(fā)者工具安裝完成后，打開并使用微信掃碼登錄。選擇創(chuàng)建“項(xiàng)目”，填入上文獲取到的 AppID ，設(shè)置一個(gè)本地項(xiàng)目的名稱（非小程序名稱），比如“我的第一個(gè)項(xiàng)目”，并選擇一個(gè)本地的文件夾作為代碼存儲(chǔ)的目錄，點(diǎn)擊“新建項(xiàng)目”就可以了。
為方便初學(xué)者了解微信小程序的基本代碼結(jié)構(gòu)，在創(chuàng)建過程中，如果選擇的本地文件夾是個(gè)空文件夾，開發(fā)者工具會(huì)提示，是否需要?jiǎng)?chuàng)建一個(gè) quick start 項(xiàng)目。選擇“是”，開發(fā)者工具會(huì)幫助我們?cè)陂_發(fā)目錄里生成一個(gè)簡單的 demo。
這樣就搭建好了，我們來看一下主界面
整個(gè)開發(fā)工具基本分為三塊。
第一列：table-item 每個(gè)按鈕代表一個(gè)頁
第二列：webview 你的頁面在這里實(shí)時(shí)展示
第三列：chrome調(diào)試工具，暫且這樣叫吧，因?yàn)榇_實(shí)是使用了charome的調(diào)試工具， 在這里可以調(diào)試頁面的樣式,js，網(wǎng)絡(luò)檢測，輸入輸出等等。
編寫示例小代碼
-
//app.js
-
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)可參考配置詳解。
-
{
-
"pages":[
-
"pages/index/index",
-
"pages/logs/logs"
-
],
-
"window":{
-
"backgroundTextStyle":"light",
-
"navigationBarBackgroundColor": "#fff",
|
