微信小程序還沒正式發(fā)布就已經(jīng)迅速成為大家討論的焦點，那么大家可能覺得只有收到內(nèi)測邀請才能體驗小程序的開發(fā)流程，其實不然，大家都可以體驗，下面就帶大家一起了解。

下載微信 Web 開發(fā)者工具

首先，微信給我們提供了它自己的小程序集成開發(fā)工具，只需要到這個頁面下載即可：

下載完成后，打開開發(fā)者工具，會有一個掃碼登錄界面。 用你的微信掃碼就可以登錄進來了， 然后開發(fā)者工具會幫我們創(chuàng)建一個默認工程，項目的文件結(jié)構(gòu)如下：

所有的代碼編輯以及運行預(yù)覽都可以在這個開發(fā)者工具中進行。接下來咱們看看微信小程序的項目結(jié)構(gòu)。

項目結(jié)構(gòu)

如上圖，首先在根目錄中有三個文件 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" }
}

這個配置文件中定義了兩個節(jié)點， pages 是小程序的所有頁面對應(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;
}

咱們先不用深究它具體定義了什么樣式，只需要先了解項目結(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 }
})

這里初始化了一個 App 對象，并且定義了三個方法 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 方法會獲得本地的一個以 logs 為 key 的緩存數(shù)據(jù)。 傳入這個方法的 logs 本身沒有任何特殊含義，只是用于表示我們使用的緩存數(shù)據(jù)。 這個機制可以理解為和 iOS 的 NSUserDefaults 類似。

然后，我們想這個緩存數(shù)組中插入當前的日期 logs.unshift(Date.now()) 。 最后再調(diào)用 setStorageSync 方法將我們新的緩存內(nèi)容寫入到本地緩存中。

因為 onLaunch 方法是小程序的生命周期方法，所以在小程序啟動的時候就會調(diào)用它，并將當前啟動的日期記錄并寫入本地緩存中。 沒錯 onLaunch 整個方法就干了這件事兒。

我們再來看下 getUserInfo 方法，它通過調(diào)用 wx.login 和 wx.getUserInfo 兩個微信平臺的函數(shù)獲取當前用戶登錄信息，并傳會給回調(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) 咱們暫時不用深究，只看 else 部分即可。

頁面結(jié)構(gòu)

了解完根目錄的幾個文件， 咱們再來看看頁面文件, 正如咱們剛開始截圖中看到的項目結(jié)構(gòu)：

所有的頁面都在 pages 文件夾中。 我們這個示例工程中有兩個頁面 index 和 logs。 還記得我們前面在 app.json 看到的頁面配置嗎：

"pages":[ "pages/index/index", "pages/logs/logs" ]

正好對應(yīng)上咱們現(xiàn)在看到的兩個目錄， 還要記得一點， pages 數(shù)組中的第一個元素會作為我們小程序的主頁。 切記，index 頁面之所以是首頁，是因為它是 pages 里面的第一個元素， 而不是因為它的名稱是 index。

我們來看看 index 頁面的構(gòu)成， index.js, index.wxml, index.wxss。 index.js 是頁面的腳本文件, index.wxml 是頁面的 UI 文件， index.wxss 是頁面的樣式文件。

先看一下 index.js:

//index.js //獲取應(yīng)用實例 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ù) app.getUserInfo(function(userInfo){ //更新數(shù)據(jù) that.setData({
        userInfo:userInfo
      })
    })
  }
})

getApp() 方法獲取我們的 app 實例。 然后在看 onLoad 方法， 使用我們剛才提到的 getUserInfo 方法獲取用戶信息，并設(shè)置到 data 屬性中。

bindViewTap 方法會綁定一個事件，這個事件調(diào)用 wx.navigateTo 方法。 這個方法其實就是頁面跳轉(zhuǎn)，從代碼中也不難看出，跳轉(zhuǎn)到了 logs 頁面。

腳本文件就這些內(nèi)容了，咱們繼續(xù)再來看看 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> -->

這個就是小程序 index 頁面的 UI 文件了，其實就是微信平臺定義了一系列組件，最外層是 <view class="container"> 還記得 container 么？ 我們在最外層的 app.wxss 定義了它的樣式。 它里面包含了兩個 View。先來看看第一個：

<!-- <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" 給這個 View 綁定了一個點擊事件，也就是我們前面 index.js 對應(yīng)的這個方法，用戶點擊這個 View 就會跳轉(zhuǎn)到 logs 頁面上。 然后這個 View 里面包含了一個 Image 和 Text， Image 的 src 屬性設(shè)置為 userInfo.avatarUrl， 代表當前用戶的頭像， Text 中使用 userInfo.nickName， 代表當前用戶的昵稱。

這樣， index 頁面的整體邏輯就都完成了， 還有一個 index.wxss 樣式文件，這個咱們就先略過。

再來看看第二個視圖：

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

motto 其實就是我們在 index.js 中定義的一個屬性：

data: {
    motto: 'Hello World',
    userInfo: {}
 }

它會在頁面上顯示一個 Hello World。

現(xiàn)在，我們切換到調(diào)試界面， 就可以看到小程序的主頁了， 和我們剛剛描述的 UI 完全一樣吧：

這里的用戶頭像和昵稱是動態(tài)從你的登錄狀態(tài)中取到的。

然后我們在這里點擊用戶的頭像，就會跳轉(zhuǎn)到 logs 頁面， 列出你每次登錄小程序的時間點。

上傳小程序

現(xiàn)在微信小程序的基本開發(fā)流程就給大家介紹完了，還有一個 logs 頁面沒介紹，但它和 index 的頁面的基本思路都是一樣的，咱們就不多贅述了。 開發(fā)完小程序后，我們需要把它部署到哪里呢？ 相信大家也有同樣的問題。 答案也很簡單，切換到 項目 選項卡，然后點擊上傳按鈕即可：

由于我的環(huán)境沒有內(nèi)測賬號，所以在上傳區(qū)域顯示的是 項目未關(guān)聯(lián) AppID ， 如果有了測試賬號，就會顯示你的 AppID 了。 目前只有內(nèi)測賬號才能夠上傳小程序。這就是唯一的差別了。沒有內(nèi)測賬號只是不能上傳，但完全可以在本地開發(fā)和測試。

小程序的這種上傳方式可能會讓大家覺得有些不同吧。 大家平常理解的 Web app 一般都需要自己搭建服務(wù)端，并且維護。 而小程序的這種托管方式，其實已經(jīng)和我們開發(fā)一個原生 App 差不多了。 雖然前端上使用的是 js 這些看起來像是 web 的技術(shù)，但它核心思路跟傳統(tǒng)的 web app 已經(jīng)不太一樣。 更像一種類似 React Native 的實現(xiàn)。

結(jié)尾

這次和大家一起，從頭到尾完整的體驗了一個最簡單的小程序的整體結(jié)構(gòu)以及開發(fā)思路。個人覺得如果能找到合適的切入點，小程序這個平臺還是能找到一些不錯的機會的。但我的觀點是，不要認為小程序的出現(xiàn)就會馬上顛覆誰，也不需要聽到網(wǎng)上有人說小程序難成大事就覺得它沒機會。 找到自己擅長的，以及用戶需要的，沒準就會創(chuàng)造出一些不錯的產(chǎn)品。 這次也是幫大家做一個基本的技術(shù)梳理，希望能夠?qū)Υ蠹矣兴鶐椭��?/p>

【相關(guān)推薦】

1. 小程序內(nèi)測申請教程

2. 微信小程序應(yīng)用號開發(fā)體驗

3. 微信小程序怎么申請 從零開始做一個微信小程序教程

以上就是分享小程序的開發(fā)流程實例的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！