|
導(dǎo)讀微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一... 微信小程序，簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用，也是一項門檻非常高的創(chuàng)新，經(jīng)過將近兩年的發(fā)展，已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 本教程旨在為想學(xué)習(xí)小程序的同學(xué)提供一個快速上手的教程，如果你之前接觸過react.js或者vue.js之類的前端框架，相信你很快就能學(xué)會小程序的開發(fā)。如果沒有接觸過，也不要有畏難心理，本教程主要面向的就是初學(xué)者，所以會盡量寫的詳細一點。相信跟我一起走完教程，一定可以學(xué)會小程序的開發(fā)。 本教程分為三個部分： 第一部分：理論篇 第二部分：實戰(zhàn)篇 將帶領(lǐng)讀者朋友們和我一起開發(fā)一個真正的小程序，和我一起享受編程的樂趣。 第三部分：附錄 一些額外的內(nèi)容將在附錄中說明。 在學(xué)習(xí)過程中，如果你有任何疑惑，請關(guān)注我的微信公眾號，直接提問即可。 搭建開發(fā)環(huán)境
在這里，為了能快速開發(fā)，我們先選擇 無AppID 這個選項，更多有關(guān)AppID的內(nèi)容，可以到附錄中查看。這里不再贅述。 項目名稱，就是你給你的項目取一個名字。 項目目錄，是指你的小程序的代碼將放在哪個目錄下，你可以自己在本地創(chuàng)建一個文件夾，也可以在github創(chuàng)建一個新項目，都可以。在這里為了簡單，我直接在桌面新建了一個文件夾。
如果一切順利，單擊添加項目后，你應(yīng)該能看到下面這張圖所示的內(nèi)容。
至此，開發(fā)小程序的環(huán)境已經(jīng)搭建完成，本節(jié)內(nèi)容也到此結(jié)束，下節(jié)我們將介紹如何配置小程序！ 配置小程序 這一節(jié)，我們將介紹小程序的配置。首先，讓我們來看看項目自動生成的app.json文件長什么樣子。 其實這里，共有五個部分可以配置，分別是pages, window, tarBar, networkTimeout和debug pages：定義的是這個小程序由哪些頁面組成。 在以后需要新增或者減少頁面時，都需要在這里進行設(shè)置，有幾個頁面pages數(shù)組就有幾項。 可以看到pages是一個數(shù)組，而數(shù)組的第一項就是小程序的初始頁面，你可以試著把 logs 頁面移動到最前面看看效果，這在開發(fā)的時候是一個不錯的小技巧。 還有一個技巧要分享給你的是，在我們需要添加一個新頁面的時候，沒必要傻傻的手動去創(chuàng)建文件夾，然后新建xxx.josn, xxx.js, xxx.wxml, xxx.wxss這四個文件。我們只要在 pages數(shù)組中 添加一個你想創(chuàng)建的頁面，然后 Ctrl + s 保存即可！是不是很酷？ {
"pages":[
"pages/logs/logs",
"pages/index/index"
],
...
}window: 定義的是窗口的配置信息。[td]
{
"tabBar": {
"backgroundColor": "#fbfbfb",
"borderStyle": "white",
"selectedColor":"#50e3c2",
"color": "#aaa",
"list": [{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "images/home.png",
"selectedIconPath": "images/homeHL.png"
},{
"pagePath": "pages/me/me",
"text": "我",
"iconPath": "images/me.png",
"selectedIconPath": "images/meHL.png"
}]
}
}networkTimeout: 用來設(shè)置各種網(wǎng)絡(luò)請求的超時時間。 如果你不是很清楚這個networkTimeout配置有什么作用，那么忽略就好。這對實際開發(fā)并沒有什么影響。 [td]
以下代碼僅為示例 {
"networkTimeout": {
"request": 5000,
"connectSocket": 5000,
"uploadFile": 5000,
"downloadFile": 5000
},
"debug": true
}debug 可以在開發(fā)者工具中開啟 debug 模式，在開發(fā)者工具的控制臺面板，調(diào)試信息以 info的形式給出，其信息有 Page 的注冊，頁面路由，數(shù)據(jù)更新，事件觸發(fā) 。 可以幫助開發(fā)者快速定位一些常見的問題。 如果開啟 debug 模式見上面代碼 好了，五個部分介紹完了，希望各位在學(xué)習(xí)完這一節(jié)后可以盡情探索，修改各種配置看看效果，畢竟這樣印象會更加深刻。 下一節(jié)我們將講到小程序的項目結(jié)構(gòu)。 項目結(jié)構(gòu)
pages 這個文件夾用來存放小程序的頁面，可以看到，其中的每個文件夾就表示一個頁面，比如，要定義index的頁面如何表現(xiàn)，就在index文件夾中的四個文件中定義。 一個頁面由四個文件組成，分別是 xxx.js, xxx.json, xxx.wxml, xxx.wxss
比如，logs.json 文件就配置了logs這個頁面的 導(dǎo)航欄的標題～ {
"navigationBarTitleText": "查看啟動日志"
}
這里需要理解的就是，小程序的開發(fā) 其實就是用開發(fā)網(wǎng)頁的技術(shù)來開發(fā)，這大大節(jié)省了我們前端人員的學(xué)習(xí)成本。但同時也要注意，這貨并不是HTML5，雖然它很像，開發(fā)過程中會遇到很多坑。 utils 這個文件夾中的utils.js主要用來定義一些公用的函數(shù)。 我們也可以在里面新建一個 api.js 文件來抽象我們服務(wù)器的地址。 app.js 這部分內(nèi)容同樣放在下一節(jié)一起講！ app.json 這個文件的作用我們在上一節(jié)已經(jīng)講過了，是整個小程序的配置文件。 app.wxss 這里定義的是整個小程序的 樣式表 頁面生命周期 終于到了小程序最核心，最關(guān)鍵的部分了，這也是我們理論篇的最后一節(jié)，那么我們開始吧！ App() 函數(shù)用來注冊一個小程序。接受一個 object 參數(shù)，其指定小程序的生命周期函數(shù)等。 App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
onHide: function() {
// Do something when hide.
},
globalData: 'I am global data'
})Page() 函數(shù)用來注冊一個頁面。接受一個 object 參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。 Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
},
customData: {
hi: 'MINA'
}
})此時，相信你對小程序開發(fā)的理論知識已經(jīng)有一定了解了。 如果覺得比較模糊，第二部分的實戰(zhàn)篇就是為了讓我們能夠結(jié)合理論來進行實踐。 如果你比較自信，你也可以直接看這個實戰(zhàn)項目的源代碼。 以上就是微信小程序開發(fā)之注冊和預(yù)覽小程序詳解的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！ 小程序是一種不需要下載安裝即可使用的應(yīng)用，它實現(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示：喜歡本站的話，請收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個人學(xué)習(xí)測試使用，請在下載后24小時內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負，請支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請及時通知我們(peng896066052@126.com),我們會及時處理.
Copyright © 2018-2020 雨林木風(fēng)下載站
