小程序中開發流程的示例分析

這篇文章給大家分享的是有關小程序中開發流程的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

下載微信 Web 開發者工具

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

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

所有的代碼編輯以及運行預覽都可以在這個開發者工具中進行。接下來咱們看看微信小程序的項目結構。

項目結構

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

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

咱們先不用深究它具體定義了什么樣式，只需要先了解項目結構即可。接下來再來看看程序的主入口 app.js：

//app.js App({
  onLaunch: function () { //調用API從本地緩存中獲取數據 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{ //調用登錄接口 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 () { //調用API從本地緩存中獲取數據 var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

}

首先 wx.getStorageSync 方法會獲得本地的一個以 logs 為 key 的緩存數據。 傳入這個方法的 logs 本身沒有任何特殊含義，只是用于表示我們使用的緩存數據。 這個機制可以理解為和 iOS 的 NSUserDefaults 類似。

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

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

我們再來看下 getUserInfo 方法，它通過調用 wx.login 和 wx.getUserInfo 兩個微信平臺的函數獲取當前用戶登錄信息，并傳會給回調函數 cb：

getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo)
    }else{ //調用登錄接口 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 部分即可。

頁面結構

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

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

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

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

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

先看一下 index.js:

//index.js //獲取應用實例 var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  }, //事件處理函數 bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs' })
  },
  onLoad: function () { console.log('onLoad') var that = this //調用應用實例的方法獲取全局數據 app.getUserInfo(function(userInfo){ //更新數據 that.setData({
        userInfo:userInfo
      })
    })
  }
})

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

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

腳本文件就這些內容了，咱們繼續再來看看 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 對應的這個方法，用戶點擊這個 View 就會跳轉到 logs 頁面上。 然后這個 View 里面包含了一個 Image 和 Text， Image 的 src 屬性設置為 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。

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

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

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

上傳小程序

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

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

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

感謝各位的閱讀！關于“小程序中開發流程的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！