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

微信小程序還沒正式發佈就已經迅速成爲你們討論的焦點，那麼你們可能以爲只有收到內測邀請才能體驗小程序的開發流程，其實否則，你們均可以體驗，下面就帶你們一塊兒瞭解。
前端

下載微信 Web 開發者工具

首先，微信給咱們提供了它本身的小程序集成開發工具，只須要到這個頁面下載便可：web

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

下載完成後，打開開發者工具，會有一個掃碼登陸界面。用你的微信掃碼就能夠登陸進來了，而後開發者工具會幫咱們建立一個默認工程，項目的文件結構以下：json

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

項目結構

如上圖，首先在根目錄中有三個文件 app.js, app.json, app.wxss。其中 app.js 是程序主入口的腳本文件， app.json 是全局配置文件, app.wxss 是小程序的樣式表文件。swift

先來看看 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，會有更多個人原創內容分享給你~

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