TNK：微信小程序開發嘗鮮
微信小程序面世以來受到的關注頗多，直到最近我才動手嘗試進行了小程序的開發，總體上感覺還是不錯的，有一點不適應的就是要擺脫Web APP開發對DOM的操作。在這里我就把我是如何利用API開發微信小程序的過程寫成教程 ...
微信小程序面世以來受到的關注頗多，直到最近我才動手嘗試進行了小程序的開發，總體上感覺還是不錯的，有一點不適應的就是要擺脫Web APP開發對DOM的操作。在這里我就把我是如何利用API開發微信小程序的過程寫成教程，教大家快速上手體驗一次微信小程序的開發。
在開始之前我們先來看下成品的效果圖
準備工作
我們先確定想要開發一款什么樣的小程序，首先要符合「小」，因為我們這次是要體驗小程序的開發，所以盡量不要弄得太復雜；其次是「快」，小程序里需要的數據啊、資源啊，最好是現成就有的，自己寫個API什么的這就太耗時了，就不叫快速上手了。
所以呢，如果能調用現成的API那是極好的，經過一番挑選，我選擇了聚合數據的 歷史上的今天 這個API，調用這個API獲取數據，我們只要做2個頁面就可以完全展示出來了，又「小」又「快」哈XD
- API一枚: 「歷史上的今天」
- 微信小程序 開發者工具
注: API需要注冊之后獲得KEY才能使用，具體請查看 聚合數據 官方文檔，這里默認各位已經注冊并擁有相應API所需的KEY
工程結構
微信開發者工具的安裝和使用在這里就不多作介紹了，有疑問的話可以看微信官方的 簡易教程
先創建一個工程，依次點擊「添加項目」－－「無AppID」，然后填好「項目名稱」并選擇「項目目錄」，點擊「添加項目」
然后我們來清理一下默認工程的目錄結構，刪除以下目錄和文件
pages/logs/ pages/index/index.wxss
創建以下目錄和文件
pages/logs/ pages/index/index.wxsspages/detail/ pages/detail/detail.js pages/detail/detail.wxml pages/templates/ pages/templates/item.wxml res/
現在你看到的目錄結構應該是這樣子的
.
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── detail
│ │ ├── detail.js
│ │ └── detail.wxml
│ ├── index
│ │ ├── index.js
│ │ └── index.wxml
│ └── templates
│ └── item.wxml
├── res
└── utils
└── util.js
這就是我們工程目錄的最終結構了，后面還會添加資源進去，但是整體結構還是這樣不會改變的
修改配置
微信小程序是通過修改 app.json 文件改變全局配置的，具體的可配置項請各位自行查閱小程序文檔的 配置 一節
打開 app.json ，修改成
{
"pages":[
"pages/index/index",
"pages/detail/detail"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3e3e3e",
"navigationBarTitleText": "歷史今日",
"navigationBarTextStyle":"white"
},
"debug": true
}
我們這里修改了導航欄的背景顏色(navigationBarBackgroundColor)、標題顏色(navigationBarTextStyle)以及標題內容(navigationBarTitleText)，為了方便查看調試信息，我還開啟了debug模式
全局配置以及搞定啦，接下來正式開始編碼
首頁布局
前面已經說了我們要做的是「歷史上的今天」這樣的一個小程序，所以同一個日期會有很多條目，最常見的布局就是做成列表
列表里會有很多的條目，數量是不確定的，所以我們不能在頁面里寫死了布局，這時候就要用到 模板(template) 了，我們可以在模板中定義代碼片段，然后在不同的地方調用
我們來定義一個模板，打開 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>
注: 模板的使用細節請參考官方文檔 模板 一節
接下來打開 pages/index/index.wxml 刪掉里面的內容，我們要在這里編寫列表頁，這里會使用到我們上面定義的模板
<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>沒有更多內容了</text></view>
<view wx:else><text>內容加載中...</text></view>
</view>
</scroll-view>
<loading hidden="{{hidden}}">Loading...</loading>
可以注意到第一行使用了 import 將模板引入到頁面中，然后再使用 is 屬性，聲明需要使用的模板，用 data 屬性傳入數據供模板使用
注: 模板擁有自己的作用域，只能使用 data 傳入的數據
為了測試和查看布局效果，我們打開 pages/index/index.js 刪除里面的代碼，然后添加以下代碼手動創建數據傳入給頁面渲染
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, 歷史上的今天"
}
]
}
})
保存后點擊開發工具左側的編譯，即可查看到效果
注: 布局會用到圖標字體，導入到 res/ 下，樣式則寫在 app.wxss 全局樣式表中，圖標字體文件和樣式請從源碼中獲取，這篇教程不作樣式的說明
詳細頁面
首頁的布局已經完成了，暫時放下首頁列表，接下來開始編寫詳細內容的頁面
打開 pages/detail/detail.wxml ，添加內容如下
<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>
搞定，這個頁面就這么簡單就OK了，現在我們打開 pages/detail/detail.js 手動添加數據到這個頁面中查看效果
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: "這是圖片標題"
}
]
}
}
})
填充數據
現在頁面布局都已經完成了，是時候調用API編寫邏輯層的代碼來填充數據到頁面上了，在開始之前我們先清理一下無用的代碼
打開 app.js 刪掉無用的函數和屬性
App({
})
以上這步是額外步驟，并不影響我們接下來要做的事情
打開 utils/util.js 并清空里面的代碼，添加如下內容
// 查詢事件列表的Base URL
const API_URL_L = "http://v.juhe.cn/todayOnhistory/queryEvent.php"
// 查詢詳細信息的Base URL
const API_URL_D = "http://v.juhe.cn/todayOnhistory/queryDetail.php"
// 申請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 []
})
}
// 獲取詳細信息
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
}
注: 請將 API_KEY 的值替換為你申請到的KEY
我們要利用API獲取的數據有兩種，一是「事件列表」，另一種是事件對應的「詳細信息」，上面使用到了 ES6 原生提供的 Promise 對象，具體請參考阮一峰的《JavaScript 標準參考教程（alpha）》中 「Promise對象」 一節
最后還用到了 module.exports 對外暴露兩個函數，使外部可以調用
我們繼續打開 pages/index/index.js 文件，修改成這樣
const util = require('../../utils/util.js')
Page({
data: {
hidden: false,
events: []
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的參數
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為頁面跳轉所帶來的參數
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
})
}
})
這里我們調用了 wx.setNavigationBarTitle 方法動態設置導航欄的標題內容，需要注意的是必須在頁面渲染完成之后，即 onReady 之后才能調用該方法修改導航欄標題
這次教程就到這里結束啦～涉及到的部分知識點并沒有詳細介紹和說明，如果有不明白的地方請大家根據我給出的鏈接去查看詳細的介紹，此文權當快速上手的一個引子，更加深入的內容以及小程序的其他API的使用，還需要各位親自去實踐，歡迎交流～
