【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序中開(kāi)發(fā)流程的示例分析

這篇文章給大家分享的是有關(guān)小程序中開(kāi)發(fā)流程的示例分析的內(nèi)容。在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過(guò)來(lái)看看吧。下載微信Web開(kāi)發(fā)者工具首先，微信給我們提供了它自己的小程序集成開(kāi)發(fā)工具，只需要到這個(gè)頁(yè)面下載即可：下載完成后，打開(kāi)開(kāi)發(fā)者工具，會(huì)有一個(gè)掃碼登錄界面。用你的微信掃碼就可以登錄進(jìn)來(lái)了，然后開(kāi)發(fā)者工具會(huì)幫我們創(chuàng)建一個(gè)默認(rèn)工程，項(xiàng)目的文件結(jié)構(gòu)如下：所有的代碼編輯以及運(yùn)行預(yù)覽都可以在這個(gè)開(kāi)發(fā)者工具中進(jìn)行。接下來(lái)咱們看看微信小程序的項(xiàng)目結(jié)構(gòu)。項(xiàng)目結(jié)構(gòu)如上圖，首先在根目錄中有三個(gè)文件app.js,app.json,app.wxss。其中app.js是程序主入口的腳本文件，app.json是全局配置文件,app.wxss是小程序的樣式表文件。先來(lái)看看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是小程序窗口的配置信息。再來(lái)看看樣式文件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)即可。接下來(lái)再來(lái)看看程序的主入口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。先來(lái)看看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本身沒(méi)有任何特殊含義，只是用于表示我們使用的緩存數(shù)據(jù)。這個(gè)機(jī)制可以理解為和iOS的NSUserDefaults類似。然后，我們想這個(gè)緩存數(shù)組中插入當(dāng)前的日期logs.unshift(Date.now())。最后再調(diào)用setStorageSync方法將我們新的緩存內(nèi)容寫(xiě)入到本地緩存中。因?yàn)閛nLaunch方法是小程序的生命周期方法，所以在小程序啟動(dòng)的時(shí)候就會(huì)調(diào)用它，并將當(dāng)前啟動(dòng)的日期記錄并寫(xiě)入本地緩存中。沒(méi)錯(cuò)onLaunch整個(gè)方法就干了這件事兒。我們?cè)賮?lái)看下getUserInfo方法，它通過(guò)調(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)

}

})

}

})

}

}至于最開(kāi)始的if判斷if(this.globalData.userInfo)咱們暫時(shí)不用深究，只看else部分即可。頁(yè)面結(jié)構(gòu)了解完根目錄的幾個(gè)文件，咱們?cè)賮?lái)看看頁(yè)面文件,正如咱們剛開(kāi)始截圖中看到的項(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)樗莗ages里面的第一個(gè)元素，而不是因?yàn)樗拿Q是index。我們來(lái)看看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ù)再來(lái)看看UI文件，index.wxml:<!--

<view

class="container">

<view

bindtap="bindViewTap"

class="userinfo">

<image

class="userinfo-avatar"

src="{{userInfo.avatarUrl}}"

background-size="cover"></image>

<text

class="userinfo-nickname">{{userInfo.nickName}}</text>

</view>

<view

class="usermotto">

<text

class="user-motto">{{motto}}</text>

</view>

</view>

-->這個(gè)就是小程序index頁(yè)面的UI文件了，其實(shí)就是微信平臺(tái)定義了一系列組件，最外層是<viewclass="container">還記得container么？我們?cè)谧钔鈱拥腶pp.wxss定義了它的樣式。它里面包含了兩個(gè)View。先來(lái)看看第一個(gè)：<!--

<view

bindtap="bindViewTap"

class="userinfo">

<image

class="userinfo-avatar"

src="{{userInfo.avatarUrl}}"

background-size="cover"></image>

<text

class="userinfo-nickname">{{userInfo.nickName}}</text>

</view>

-->首先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è)咱們就先略過(guò)。再來(lái)看看第二個(gè)視圖：<!--

<view

class="usermotto">

<text

class="user-motto">{{motto}}</text>

</view>

-->motto其實(shí)就是我們?cè)趇ndex.js中定義的一個(gè)屬性：data:

{

motto:

'Hello

World',

userInfo:

{}

}它會(huì)在頁(yè)面上顯示一個(gè)HelloWorld?，F(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)在微信小程序的基本開(kāi)發(fā)流程就給大家介紹完了，還有一個(gè)logs頁(yè)面沒(méi)介紹，但它和index的頁(yè)面的基本思路都是一樣的，咱們就不多贅述了。開(kāi)發(fā)完小程序后，我們需要把它部署到哪里呢？相信大家也有同樣的問(wèn)題。答案也很簡(jiǎn)單，切換到項(xiàng)目選項(xiàng)卡，然后點(diǎn)擊上傳按鈕即可：由于我的環(huán)境沒(méi)有內(nèi)測(cè)賬號(hào)，所以在上傳區(qū)域顯示的是項(xiàng)目未關(guān)聯(lián)AppID，如果有了測(cè)試賬號(hào)，就會(huì)顯示你的AppID了。目前只有內(nèi)測(cè)賬號(hào)才能夠上傳小程序。這就是唯一的差別了。沒(méi)有內(nèi)測(cè)賬號(hào)只是不能上傳，但完全可以在本地開(kāi)發(fā)和測(cè)