TNK：微信小程序開發(fā)嘗鮮

時(shí)間：2016-10-18 10:38:00

微信小程序面世以來受到的關(guān)注頗多，直到最近我才動(dòng)手嘗試進(jìn)行了小程序的開發(fā)，總體上感覺還是不錯(cuò)的，有一點(diǎn)不適應(yīng)的就是要擺脫Web APP開發(fā)對(duì)DOM的操作。在這里我就把我是如何利用API開發(fā)微信小程序的過程寫成教程，教大家快速上手體驗(yàn)一次微信小程序的開發(fā)。

在開始之前我們先來看下成品的效果圖

準(zhǔn)備工作

我們先確定想要開發(fā)一款什么樣的小程序，首先要符合「小」，因?yàn)槲覀冞@次是要體驗(yàn)小程序的開發(fā)，所以盡量不要弄得太復(fù)雜；其次是「快」，小程序里需要的數(shù)據(jù)啊、資源啊，最好是現(xiàn)成就有的，自己寫個(gè)API什么的這就太耗時(shí)了，就不叫快速上手了。

所以呢，如果能調(diào)用現(xiàn)成的API那是極好的，經(jīng)過一番挑選，我選擇了聚合數(shù)據(jù)的歷史上的今天這個(gè)API，調(diào)用這個(gè)API獲取數(shù)據(jù)，我們只要做2個(gè)頁面就可以完全展示出來了，又「小」又「快」哈XD

API一枚: 「歷史上的今天」
微信小程序開發(fā)者工具

注: API需要注冊(cè)之后獲得KEY才能使用，具體請(qǐng)查看聚合數(shù)據(jù) 官方文檔，這里默認(rèn)各位已經(jīng)注冊(cè)并擁有相應(yīng)API所需的KEY

工程結(jié)構(gòu)

微信開發(fā)者工具的安裝和使用在這里就不多作介紹了，有疑問的話可以看微信官方的簡(jiǎn)易教程

先創(chuàng)建一個(gè)工程，依次點(diǎn)擊「添加項(xiàng)目」－－「無AppID」，然后填好「項(xiàng)目名稱」并選擇「項(xiàng)目目錄」，點(diǎn)擊「添加項(xiàng)目」

然后我們來清理一下默認(rèn)工程的目錄結(jié)構(gòu)，刪除以下目錄和文件

pages/logs/
pages/index/index.wxss

創(chuàng)建以下目錄和文件

pages/logs/
pages/index/index.wxsspages/detail/
pages/detail/detail.js
pages/detail/detail.wxml
pages/templates/
pages/templates/item.wxml
res/

現(xiàn)在你看到的目錄結(jié)構(gòu)應(yīng)該是這樣子的

.
├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── detail
│   │   ├── detail.js
│   │   └── detail.wxml
│   ├── index
│   │   ├── index.js
│   │   └── index.wxml
│   └── templates
│       └── item.wxml
├── res
└── utils
    └── util.js

這就是我們工程目錄的最終結(jié)構(gòu)了，后面還會(huì)添加資源進(jìn)去，但是整體結(jié)構(gòu)還是這樣不會(huì)改變的

修改配置

微信小程序是通過修改 app.json 文件改變?nèi)峙渲玫?，具體的可配置項(xiàng)請(qǐng)各位自行查閱小程序文檔的配置一節(jié)

打開 app.json ，修改成

{
  "pages":[
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#3e3e3e",
    "navigationBarTitleText": "歷史今日",
    "navigationBarTextStyle":"white"
  },
  "debug": true
}

我們這里修改了導(dǎo)航欄的背景顏色(navigationBarBackgroundColor)、標(biāo)題顏色(navigationBarTextStyle)以及標(biāo)題內(nèi)容(navigationBarTitleText)，為了方便查看調(diào)試信息，我還開啟了debug模式

全局配置以及搞定啦，接下來正式開始編碼

首頁布局

前面已經(jīng)說了我們要做的是「歷史上的今天」這樣的一個(gè)小程序，所以同一個(gè)日期會(huì)有很多條目，最常見的布局就是做成列表

列表里會(huì)有很多的條目，數(shù)量是不確定的，所以我們不能在頁面里寫死了布局，這時(shí)候就要用到 模板(template) 了，我們可以在模板中定義代碼片段，然后在不同的地方調(diào)用

我們來定義一個(gè)模板，打開 pages/templates/item.wxml ，添加代碼

<template name="tItem">
    <navigator url="../detail/detail?id={{item.e_id}}">
        <view class="ui-list-item ui-pure-item ui-border-b">
            <view class="ui-item-span"><text>{{item.date}}</text></view>
            <view class="ui-item-content ui-nowrap"><text>{{item.title}}</text></view>
        </view>
    </navigator>
</template>

注: 模板的使用細(xì)節(jié)請(qǐng)參考官方文檔模板一節(jié)

接下來打開 pages/index/index.wxml 刪掉里面的內(nèi)容，我們要在這里編寫列表頁，這里會(huì)使用到我們上面定義的模板

<import src="../templates/item.wxml"/>

<scroll-view scroll-y="true" class="flex-row ui-list ui-border-t">
    <template is="tItem" data="{{item}}" wx:for="{{events}}"/>
    <view class="ui-tips">
        <view wx:if="{{hidden}}"><text>沒有更多內(nèi)容了</text></view>
        <view wx:else><text>內(nèi)容加載中...</text></view>
    </view>
</scroll-view>

<loading hidden="{{hidden}}">Loading...</loading>

可以注意到第一行使用了 import 將模板引入到頁面中，然后再使用 is 屬性，聲明需要使用的模板，用 data 屬性傳入數(shù)據(jù)供模板使用

注: 模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)

為了測(cè)試和查看布局效果，我們打開 pages/index/index.js 刪除里面的代碼，然后添加以下代碼手動(dòng)創(chuàng)建數(shù)據(jù)傳入給頁面渲染

Page({
  data: {
    hidden: true,
    events: [
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      },
      {
        date: "2016-10-14",
        title: "TodayOnHistory, 歷史上的今天"
      }
    ]
  }
})

保存后點(diǎn)擊開發(fā)工具左側(cè)的編譯，即可查看到效果

注: 布局會(huì)用到圖標(biāo)字體，導(dǎo)入到 res/ 下，樣式則寫在 app.wxss 全局樣式表中，圖標(biāo)字體文件和樣式請(qǐng)從源碼中獲取，這篇教程不作樣式的說明

詳細(xì)頁面

首頁的布局已經(jīng)完成了，暫時(shí)放下首頁列表，接下來開始編寫詳細(xì)內(nèi)容的頁面

打開 pages/detail/detail.wxml ，添加內(nèi)容如下

<view class="container">
    <view class="ui-title ui-border-b"><text>{{detail.title}}</text></view>
    <view class="ui-content"><text>{{detail.content}}</text></view>
    <block wx:for="{{detail.picUrl}}">
        <view>
            <view><image mode="aspectFit" src="{{item.url}}"/></view>
            <view class="ui-pic-title"><text>{{item.pic_title}}</text></view>
        </view>
    </block>
</view>
<loading hidden="{{hidden}}">Loading...</loading>

搞定，這個(gè)頁面就這么簡(jiǎn)單就OK了，現(xiàn)在我們打開 pages/detail/detail.js 手動(dòng)添加數(shù)據(jù)到這個(gè)頁面中查看效果

Page({
  data:{
      hidden: true,
      detail: {
          title: "歷史上的今天",
          content: "歷史上的今天歷史上的今天歷史上的今天歷史上的今天歷史上的今天歷史上的今天歷史上的今天歷史上的今天歷史上的今天",
          picUrl: [
              {
                  url: "http://sjbz.fd.zol-img.com.cn/t_s320x510c/g5/M00/00/04/ChMkJlfJWJCIYePaAAPdCld59MEAAU-KAP0U3gAA90i450.jpg",
                  pic_title: "這是圖片標(biāo)題"
              }
          ]
      }
  }
})

填充數(shù)據(jù)

現(xiàn)在頁面布局都已經(jīng)完成了，是時(shí)候調(diào)用API編寫邏輯層的代碼來填充數(shù)據(jù)到頁面上了，在開始之前我們先清理一下無用的代碼

打開 app.js 刪掉無用的函數(shù)和屬性

App({
  
})

以上這步是額外步驟，并不影響我們接下來要做的事情

打開 utils/util.js 并清空里面的代碼，添加如下內(nèi)容

// 查詢事件列表的Base URL
const API_URL_L = "http://v.juhe.cn/todayOnhistory/queryEvent.php"
// 查詢?cè)敿?xì)信息的Base URL
const API_URL_D = "http://v.juhe.cn/todayOnhistory/queryDetail.php"
// 申請(qǐng)API獲得的KEY
const API_KEY = "YOUR API KEY"

// 獲取事件列表
function fetchEvents(today) {
    var promise = new Promise(function(resolve, reject){
        wx.request({
            url: API_URL_L,
            data: {
                key: API_KEY,
                date: today
            },
            header: {
                'Content-Type': 'application/json'
            },
            success: resolve,
            fail: reject
        })
    })
    return promise
}

function getEvents() {
    var tmpDate = new Date()
    var today = tmpDate.getMonth() + 1
    today = today + '/' + tmpDate.getDate()
    return fetchEvents(today)
        .then(function(res) {
            // console.log(res.data.result)
            return res.data.result
        })
        .catch(function(err) {
            console.log(err)
            return []
        })
}

// 獲取詳細(xì)信息
function fetchDetail(e_id) {
    var promise = new Promise(function(resolve, reject){
        wx.request({
            url: API_URL_D,
            data: {
                key: API_KEY,
                e_id: e_id
            },
            header: {
                'Content-Type': 'application/json'
            },
            success: resolve,
            fail: reject
        })
    })
    return promise
}

function getDetail(e_id) {
    return fetchDetail(e_id)
        .then(function(res) {
            // console.log(res.data.result)
            return res.data.result
        })
        .catch(function(err) {
            console.log(err)
            return []
        })
}

module.exports = {
    getEvents: getEvents,
    getDetail: getDetail
}

注: 請(qǐng)將 API_KEY 的值替換為你申請(qǐng)到的KEY

我們要利用API獲取的數(shù)據(jù)有兩種，一是「事件列表」，另一種是事件對(duì)應(yīng)的「詳細(xì)信息」，上面使用到了 ES6 原生提供的 Promise 對(duì)象，具體請(qǐng)參考阮一峰的《JavaScript 標(biāo)準(zhǔn)參考教程（alpha）》中「Promise對(duì)象」一節(jié)

最后還用到了 module.exports 對(duì)外暴露兩個(gè)函數(shù)，使外部可以調(diào)用

我們繼續(xù)打開 pages/index/index.js 文件，修改成這樣

const util = require('../../utils/util.js')

Page({
  data: {
    hidden: false,
    events: []
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
    var self = this
    util.getEvents().then(function(data) {
      self.setData({
        hidden: true,
        events: data
      })
    })
  }
})

然后打開 pages/detail/detail.js ，修改如下

const util = require('../../utils/util.js')

Page({
  data:{
      hidden: false,
      detail: {}
  },
  onLoad:function(param){
    // 頁面初始化 param為頁面跳轉(zhuǎn)所帶來的參數(shù)
    var self = this
    util.getDetail(param.id).then(function(result){
        self.setData({
            detail: result[0]
        })
    })
  },
  onReady:function(){
    // 頁面渲染完成
    wx.setNavigationBarTitle({
        title: this.data.detail.title
    })
    this.setData({
        hidden: true
    })
  }
})

這里我們調(diào)用了 wx.setNavigationBarTitle 方法動(dòng)態(tài)設(shè)置導(dǎo)航欄的標(biāo)題內(nèi)容，需要注意的是必須在頁面渲染完成之后，即 onReady 之后才能調(diào)用該方法修改導(dǎo)航欄標(biāo)題

這次教程就到這里結(jié)束啦～涉及到的部分知識(shí)點(diǎn)并沒有詳細(xì)介紹和說明，如果有不明白的地方請(qǐng)大家根據(jù)我給出的鏈接去查看詳細(xì)的介紹，此文權(quán)當(dāng)快速上手的一個(gè)引子，更加深入的內(nèi)容以及小程序的其他API的使用，還需要各位親自去實(shí)踐，歡迎交流～

微信小程序?qū)崙?zhàn)教程：火車票查詢（含demo）