這篇文章給大家分享的是有關(guān)小程序中開發(fā)流程的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的策勒網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
首先，微信給我們提供了它自己的小程序集成開發(fā)工具，只需要到這個(gè)頁(yè)面下載即可：
下載完成后，打開開發(fā)者工具，會(huì)有一個(gè)掃碼登錄界面。 用你的微信掃碼就可以登錄進(jìn)來了， 然后開發(fā)者工具會(huì)幫我們創(chuàng)建一個(gè)默認(rèn)工程，項(xiàng)目的文件結(jié)構(gòu)如下：
所有的代碼編輯以及運(yùn)行預(yù)覽都可以在這個(gè)開發(fā)者工具中進(jìn)行。接下來咱們看看微信小程序的項(xiàng)目結(jié)構(gòu)。
如上圖，首先在根目錄中有三個(gè)文件 app.js, app.json, app.wxss。 其中 app.js 是程序主入口的腳本文件， app.json 是全局配置文件, app.wxss 是小程序的樣式表文件。
先來看看 app.json :
重慶分公司
重慶分公司
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }
}這個(gè)配置文件中定義了兩個(gè)節(jié)點(diǎn)， pages 是小程序的所有頁(yè)面對(duì)應(yīng)的路徑， window 是小程序窗口的配置信息。
再來看看樣式文件 app.wxss :
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}咱們先不用深究它具體定義了什么樣式，只需要先了解項(xiàng)目結(jié)構(gòu)即可。接下來再來看看程序的主入口 app.js：
//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 }
})這里初始化了一個(gè) App 對(duì)象，并且定義了三個(gè)方法 onLaunch ， getUserInfo 和 globalData 。 先來看看 onLaunch :
onLaunch: function () { //調(diào)用API從本地緩存中獲取數(shù)據(jù) var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
}首先 wx.getStorageSync 方法會(huì)獲得本地的一個(gè)以 logs 為 key 的緩存數(shù)據(jù)。 傳入這個(gè)方法的 logs 本身沒有任何特殊含義，只是用于表示我們使用的緩存數(shù)據(jù)。 這個(gè)機(jī)制可以理解為和 iOS 的 NSUserDefaults 類似。
然后，我們想這個(gè)緩存數(shù)組中插入當(dāng)前的日期 logs.unshift(Date.now()) 。 最后再調(diào)用 setStorageSync 方法將我們新的緩存內(nèi)容寫入到本地緩存中。
因?yàn)?onLaunch 方法是小程序的生命周期方法，所以在小程序啟動(dòng)的時(shí)候就會(huì)調(diào)用它，并將當(dāng)前啟動(dòng)的日期記錄并寫入本地緩存中。 沒錯(cuò) onLaunch 整個(gè)方法就干了這件事兒。
我們?cè)賮砜聪?getUserInfo 方法，它通過調(diào)用 wx.login 和 wx.getUserInfo 兩個(gè)微信平臺(tái)的函數(shù)獲取當(dāng)前用戶登錄信息，并傳會(huì)給回調(diào)函數(shù) cb：
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)
}
})
}
})
}
}至于最開始的 if 判斷 if(this.globalData.userInfo) 咱們暫時(shí)不用深究，只看 else 部分即可。
了解完根目錄的幾個(gè)文件， 咱們?cè)賮砜纯错?yè)面文件, 正如咱們剛開始截圖中看到的項(xiàng)目結(jié)構(gòu)：
所有的頁(yè)面都在 pages 文件夾中。 我們這個(gè)示例工程中有兩個(gè)頁(yè)面 index 和 logs。 還記得我們前面在 app.json 看到的頁(yè)面配置嗎：
"pages":[ "pages/index/index", "pages/logs/logs" ]
正好對(duì)應(yīng)上咱們現(xiàn)在看到的兩個(gè)目錄， 還要記得一點(diǎn)， pages 數(shù)組中的第一個(gè)元素會(huì)作為我們小程序的主頁(yè)。 切記，index 頁(yè)面之所以是首頁(yè)，是因?yàn)樗?pages 里面的第一個(gè)元素， 而不是因?yàn)樗拿Q是 index。
我們來看看 index 頁(yè)面的構(gòu)成， index.js, index.wxml, index.wxss。 index.js 是頁(yè)面的腳本文件, index.wxml 是頁(yè)面的 UI 文件， index.wxss 是頁(yè)面的樣式文件。
先看一下 index.js:
//index.js //獲取應(yīng)用實(shí)例 var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
}, //事件處理函數(shù) bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs' })
},
onLoad: function () { console.log('onLoad') var that = this //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù) app.getUserInfo(function(userInfo){ //更新數(shù)據(jù) that.setData({
userInfo:userInfo
})
})
}
})getApp() 方法獲取我們的 app 實(shí)例。 然后在看 onLoad 方法， 使用我們剛才提到的 getUserInfo 方法獲取用戶信息，并設(shè)置到 data 屬性中。
bindViewTap 方法會(huì)綁定一個(gè)事件，這個(gè)事件調(diào)用 wx.navigateTo 方法。 這個(gè)方法其實(shí)就是頁(yè)面跳轉(zhuǎn)，從代碼中也不難看出，跳轉(zhuǎn)到了 logs 頁(yè)面。
腳本文件就這些內(nèi)容了，咱們繼續(xù)再來看看 UI 文件， index.wxml:
這個(gè)就是小程序 index 頁(yè)面的 UI 文件了，其實(shí)就是微信平臺(tái)定義了一系列組件，最外層是
首先 bindtap="bindViewTap" 給這個(gè) View 綁定了一個(gè)點(diǎn)擊事件，也就是我們前面 index.js 對(duì)應(yīng)的這個(gè)方法，用戶點(diǎn)擊這個(gè) View 就會(huì)跳轉(zhuǎn)到 logs 頁(yè)面上。 然后這個(gè) View 里面包含了一個(gè) Image 和 Text， Image 的 src 屬性設(shè)置為 userInfo.avatarUrl， 代表當(dāng)前用戶的頭像， Text 中使用 userInfo.nickName， 代表當(dāng)前用戶的昵稱。
這樣， index 頁(yè)面的整體邏輯就都完成了， 還有一個(gè) index.wxss 樣式文件，這個(gè)咱們就先略過。
再來看看第二個(gè)視圖：
motto 其實(shí)就是我們?cè)?index.js 中定義的一個(gè)屬性：
data: {
motto: 'Hello World',
userInfo: {}
}它會(huì)在頁(yè)面上顯示一個(gè) Hello World。
現(xiàn)在，我們切換到調(diào)試界面， 就可以看到小程序的主頁(yè)了， 和我們剛剛描述的 UI 完全一樣吧：
這里的用戶頭像和昵稱是動(dòng)態(tài)從你的登錄狀態(tài)中取到的。
然后我們?cè)谶@里點(diǎn)擊用戶的頭像，就會(huì)跳轉(zhuǎn)到 logs 頁(yè)面， 列出你每次登錄小程序的時(shí)間點(diǎn)。
現(xiàn)在微信小程序的基本開發(fā)流程就給大家介紹完了，還有一個(gè) logs 頁(yè)面沒介紹，但它和 index 的頁(yè)面的基本思路都是一樣的，咱們就不多贅述了。 開發(fā)完小程序后，我們需要把它部署到哪里呢？ 相信大家也有同樣的問題。 答案也很簡(jiǎn)單，切換到 項(xiàng)目 選項(xiàng)卡，然后點(diǎn)擊上傳按鈕即可：
由于我的環(huán)境沒有內(nèi)測(cè)賬號(hào)，所以在上傳區(qū)域顯示的是 項(xiàng)目未關(guān)聯(lián) AppID ， 如果有了測(cè)試賬號(hào)，就會(huì)顯示你的 AppID 了。 目前只有內(nèi)測(cè)賬號(hào)才能夠上傳小程序。這就是唯一的差別了。沒有內(nèi)測(cè)賬號(hào)只是不能上傳，但完全可以在本地開發(fā)和測(cè)試。
小程序的這種上傳方式可能會(huì)讓大家覺得有些不同吧。 大家平常理解的 Web app 一般都需要自己搭建服務(wù)端，并且維護(hù)。 而小程序的這種托管方式，其實(shí)已經(jīng)和我們開發(fā)一個(gè)原生 App 差不多了。 雖然前端上使用的是 js 這些看起來像是 web 的技術(shù)，但它核心思路跟傳統(tǒng)的 web app 已經(jīng)不太一樣。 更像一種類似 React Native 的實(shí)現(xiàn)。
感謝各位的閱讀！關(guān)于“小程序中開發(fā)流程的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
