微信小程序開發初探

一、關於微信小程序

1.1 小程序誕生的背景

　　張小龍說道：

　　（1）一切以用戶價值為依歸→用戶是微信的核心，所以微信中沒有很多與客戶無關的功能，比如QQ中的亂七八糟一系列東西。

　　（2）讓創造發揮價值→所有圍繞微信的創造比如公眾號都應該發揮其應有的價值。

　　（3）用完即走的高效服務→這一點就厲害了word天，微信要打造一個以微信為中心的生態鏈，不以綁定用戶為目標。比如生活中有一些不太常用的app，我們可能一年也使用不了幾次，但是有時候就需要用到，微信就想要提供這樣一個平台，讓你可以在微信中使用這中所謂的app的功能。或者說可以這樣理解，讓微信成為一個類似於Windows的操作系統，各種小程序就是操作系統上的應用軟件。

　　（4）無形存在的商業化→微信使得人與人之間的聯系變成了無形的商業化網，這個網可以創造很多無形的商業價值。

1.2 小程序是個什么鬼？

　　張小龍在朋友圈里這樣解釋道：小程序是一種不需要下載安裝即可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下即可打開應用。也體現了「用完即走」的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。

1.3 技術層面的小程序

　　微信小程序 = XML + CSS + JS 的移動應用程序

1.4 為什么要開發微信小程序？

　　（1）更好的給用戶提供用完即走的服務

　　（2）給用戶提供更好的使用體驗

　　（3）功能更加深入：https://mp.weixin.qq.com/debug/wxadoc/dev/

　　（4）設計更加統一：https://mp.weixin.qq.com/debug/wxadoc/design/index.html?t=20161109

　　（5）類似於微信錢包中的第三方服務

二、開發工具的安裝

2.1 下載微信開發者工具

　　Windows 64位：點我下載

　　Windows 32位：點我下載

　　Mac 版 ：點我下載

2.2 安裝微信開發者工具

　　這里我使用的是wechat_web_devtools_0.10.102800_x64版：

　　

     

　　　　安裝完成后，第一次啟動時會出現一個二維碼，需要使用微信掃描該二維碼才可登錄開發者工具：

三、第一個微信小程序

3.1 添加微信小程序項目

　　Step1.選擇調試類型：本地小程序項目→添加項目

　　Step2.由於我們暫時沒有AppID，所以選擇無AppID（無AppID部分功能會受限）

　　Step3.進入開發者工具界面，默認是選中“調試”面板

　　可以看到，在調試面板中，左側是頁面效果預覽窗口，右側是類似於Chrome的開發者的工具。在預覽窗口可以選擇一些常見的手機型號和不同的分變率，大家可以看出這簡直就是Chrome開發者工具的翻版。

3.2 微信小程序結構一覽

　　新建了一個小程序之后，開發工具為我們默認生成了一些文件，下面我們來看看這些文件都是看些什么用，以及程序結構又是什么樣子的。

　　（1）項目結構

　　（2）應用程序級文件

　　① 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.js定義了全局的一些重要事件，比如程序啟動時要做些什么，如何獲取微信用戶信息等等。App函數是一個全局函數，它的作用就是用來創建一個應用程序實例，每個應用程序都會有它的生命周期，因此一些重要的生命周期事件都會在這里定義。例如，onLaunch事件就是程序在啟動時需要干什么。

　　② app.json

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Manulife WeChat Demo",
    "navigationBarTextStyle":"black"
  }
}

　　app.json 則定義了程序有哪些頁面，以及窗口標題及相關樣式等。例如，我們再這里將navigationBarTitleText屬性值改為了Manulife WeChat Demo，來看看調試窗口會顯示什么？

　　③ app.wxss

/**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.wxss 則定義了全局樣式，你可以把它理解為一些所有頁面公用的css樣式。其實，它也就是一個披着wxss后綴名的css3樣式表而已。

　　（3）具體頁面級文件

　　① 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
      })
    })
  }
})

　　每個頁面的業務邏輯都會寫在各自的js文件中，可以看到index.js中所有的業務邏輯都會寫到Page中，而app.js中所有邏輯都寫在App中。

　　② index.wxml

<!--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.wxml則類似於html為頁面定了一個具體的div區域，通過類似於AngularJS的模型綁定將具體的數據綁定到具體的位置。這里再回到index.js中就可以看到原來在index.js中就是為了給這些模型賦值。另外，wxml=>weixin markup language.

wxml語法遵循XML語法，注意是XML語法，不是HTML語法，不是HTML語法，不是HTML語法

　　③ index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

　　index.wxss則和app.wxss一樣，都是css樣式表，只是index.wxss主要針對於index.wxml這個頁面，它有明確的作用域。另外，wxss=>weixin style sheet.

　　（3）微信小程序總體結構

　　我們的微信小程序會啟動時會生成一個app應用實例，這個app實例會運行多個page，每個page之間又會有一些關聯。多個page都需要用到的一些功能則封裝到公共方法中，例如util.js,calc.js等等。

3.3 最小化編程體驗

　　（1）添加一個文件夾test，新建三個頁面級文件。

　     　

　　不要問我為什么要這樣子命名，就像我們在ASP.NET MVC中Action與View的名字要保持一致一樣，這是一個約定俗稱的事兒。當然，你也可以新建一個文件夾，不叫pages，然后在那個文件夾里邊定義這些頁面。只需要在app.json中配置成另外的文件夾即可。

　　（2）修改app.json，添加頁面設置

　　app.json中定義了一個pages數組，每一項代表對應頁面的【路徑+文件名】信息，數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面，都需要對pages數組進行修改。因此，這里我們將剛剛的test頁面假如pages數組，並放到首位。

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

　　（3）編輯test.wxml，添加一句hello world!

　　按照國際慣例，每次學習一個新的語言我們都會輸出一句hello world!來代表我們的第一個程序，因此這里也不能免俗。

<text>Hello WeChat Little App!</text>

　　（4）編輯test.wxss，添加一個樣式，為剛剛的hello world文本設置為紅色字體

.hello
{
    font-size: 14pt;
    color:red;
}

<text class="hello">Hello WeChat Little App!</text>

　　（5）編輯app.js，定義一個全局使用的函數getMessage，方法很簡單，就不再多說

App({
  // 一些自定義的額外方法
  getMessage(para){
    var result = "Your name is " + para;
    return result;
  },
  ...
  ...
}

　　（6）編輯test.js，調用全局函數，輸出控制台

//通過getApp方法獲取應用實例
const app = getApp()

Page({
    onLoad(){
        // 在test頁面加載時調用全局方法getMessage
        const msg = app.getMessage("Edison");
        // 在控制台輸出msg結果
        console.log(msg);
    }
})

　　（7）編輯test.js，為頁面添加一個數據供頁面綁定

Page({
    data:{
        errorMessage: "User name can not be null!"
    },
    onLoad(){
        ...
                ...
    }
})

<text>Hello WeChat Little App!</text>
<text class="hello">{{errorMessage}}</text>

四、調用服務加載數據

4.1 關於REST服務接口

　　這里就可以把我們的REST服務弄出來調用啦，不過這里我們采用已有的公開的API接口來調用，比如豆瓣的各種電影、讀書等就提供了一些API可以供調用。

　　這里我們選擇豆瓣電影提供的一些API，對於下面的這個list頁面，使用的是“即將上映的電影”的接口：

4.2 添加必要文件

　　添加新文件夾：list，並添加三大頁面級文件

      

4.3 調用API發起小請求

　　首先我們可以通過查看微信小程序官方開發文檔，看到發起請求的示例代碼如下：

wx.request({
  url: 'test.php',
  data: {
     x: '' ,
     y: ''
  },
  header:{
      "Content-Type":"application/json"
  },
  success: function(res) {
     var data = res.data;
  }
});

　　因此我們依樣畫葫蘆：

//通過getApp方法獲取應用實例
const app = getApp()

Page({
    data:{
        message:"Hello Edison",
        list:[]
    },
    onLoad(){
        const currentPage = this
        // 在list頁面加載時調用api獲取數據
        wx.request({
            url : "https://api.douban.com/v2/movie/in_theaters",
            data: {},
            header:{
                "Content-Type":"application/json"
            },
            success: function(res) {
                 var data = res.data;
                 currentPage.setData({
                     list : data.subjects
                 })
              }
        })
    }
})

　　編輯list.wxml，添加一個列表：

<text>{{message}}</text>
<view>
    <view class="item" wx:for="{{list}}">
        <text>{{item.title}}</text>
    </view>
</view>

　　再來給每個item項設置一下樣式：

.item
{
    border: 1px solid #000;
    font-size:12pt;
}

　　這時可以來看看效果，電影列表被加載了出來：

　　我們發現這個api還返回了電影的海報，因此我們還可以改造一下程序，在列表里邊將海報也顯示出來：

<text>{{message}}</text>
<view>
    <view class="item" wx:for="{{list}}">
        <image src="{{item.images.large}}"></image>
        <text>{{item.title}}</text>
    </view>
</view>

　　這里我們加了一個image標簽，注意不是html的img標簽。這時，再來看看界面效果：

4.4 預覽你的小程序

　　如果你有AppID，那么你就可以開始預覽你的小程序了：

　　開發者工具左側菜單欄選擇”項目”，點擊”預覽”，掃碼后即可在微信客戶端中體驗。這里我們是無AppID的體驗模式，因此沒法預覽，更沒法上傳。

五、豆瓣電影示例項目

5.1 項目地址

　　這個項目是我看的一個公開課的講師汪磊寫的一個demo，功能雖小但五臟俱全，是一個拿來學習練手的小項目。

GitHub倉庫地址：https://github.com/zce/weapp-demo

5.2 項目功能

　　前方流量預警，gif動圖，你懂得：

5.4 學習計划

　　汪磊專門為這個demo設置了一些分支，每個分支循序漸進，實現了不同的功能。我們可以跟着這個計划，一步一步得去完成這個demo。

六、小結

　　本篇了解微信小程序是個什么鬼，最基本的小程序結構是什么樣子的，還按照國際慣例做了一個hello world，並調用了一次api。雖然過程很簡單很low，但前端程序包括app不就是做的這些事兒嗎？后續我會跟着汪磊的demo一步一步得把那個豆瓣項目寫出來，或許會分享一篇新的文章跟各位見面。好了，很久沒有熬過夜了，今天就到此結束啦。

參考資料

（1）汪磊，《微信小程序公開課》

（2）汪磊，《微信小程序基礎入門》

（3）勞卜，《通過微信小程序看前端》

（4）白琦，《一篇文章讀懂微信小程序是什么》

（5）官方文檔，https://mp.weixin.qq.com/debug/wxadoc/dev/

 

作者：周旭龍

出處：http://www.cnblogs.com/edisonchou/

本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。