微信小程序開發初探

時間 2019-11-30

標籤微信程序開發初探简体版

原文原文鏈接

1、關於微信小程序

1.1 小程序誕生的背景

　　張小龍說道：php

　　（1）一切以用戶價值爲依歸→用戶是微信的核心，因此微信中沒有不少與客戶無關的功能，好比QQ中的亂七八糟一系列東西。css

　　（2）讓創造發揮價值→全部圍繞微信的創造好比公衆號都應該發揮其應有的價值。html

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

　　（4）無形存在的商業化→微信使得人與人之間的聯繫變成了無形的商業化網，這個網能夠創造不少無形的商業價值。css3

1.2 小程序是個什麼鬼？

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

1.3 技術層面的小程序

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

1.4 爲何要開發微信小程序？

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

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

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

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

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

2、開發工具的安裝

2.1 下載微信開發者工具

　　Windows 64位：點我下載

　　Windows 32位：點我下載

　　Mac 版：點我下載

2.2 安裝微信開發者工具

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

　　　　安裝完成後，第一次啓動時會出現一個二維碼，須要使用微信掃描該二維碼纔可登陸開發者工具：

3、第一個微信小程序

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、調用服務加載數據

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、豆瓣電影示例項目

5.1 項目地址

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

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

5.2 項目功能

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

5.4 學習計劃

　　汪磊專門爲這個demo設置了一些分支，每一個分支按部就班，實現了不一樣的功能。咱們能夠跟着這個計劃，一步一步得去完成這個demo。

6、小結

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