不需內測賬號，帶你體驗微信小程序完整開發過程

2016年09月24日 - 作者: SwiftCafe

 

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

下載微信 Web 開發者工具

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

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1474644089359

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

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

項目結構

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

結尾

這次和大家一起，從頭到尾完整的體驗了一個最簡單的小程序的整體結構以及開發思路。個人覺得如果能找到合適的切入點，小程序這個平台還是能找到一些不錯的機會的。但我的觀點是，不要認為小程序的出現就會馬上顛覆誰，也不需要聽到網上有人說小程序難成大事就覺得它沒機會。 找到自己擅長的，以及用戶需要的，沒准就會創造出一些不錯的產品。 這次也是幫大家做一個基本的技術梳理，希望能夠對大家有所幫助。

如果你覺得這篇文章有幫助，還可以關注微信公眾號 swift-cafe，會有更多我的原創內容分享給你~

本站文章均為原創內容，如需轉載請注明出處，謝謝。