微信小程序面世以來受到的關(guān)注頗多,直到最近我才動手嘗試進行了小程序的開發(fā),總體上感覺還是不錯的,有一點不適應的就是要擺脫Web APP開發(fā)對DOM的操作。在這里我就把我是如何利用API開發(fā)微信小程序的過程寫成教程,教大家快速上手體驗一次微信小程序的開發(fā)。
在開始之前我們先來看下成品的效果圖
我們先確定想要開發(fā)一款什么樣的小程序,首先要符合「小」,因為我們這次是要體驗小程序的開發(fā),所以盡量不要弄得太復雜;其次是「快」,小程序里需要的數(shù)據(jù)啊、資源啊,最好是現(xiàn)成就有的,自己寫個API什么的這就太耗時了,就不叫快速上手了。
所以呢,如果能調(diào)用現(xiàn)成的API那是極好的,經(jīng)過一番挑選,我選擇了聚合數(shù)據(jù)的 歷史上的今天 這個API,調(diào)用這個API獲取數(shù)據(jù),我們只要做2個頁面就可以完全展示出來了,又「小」又「快」哈XD
注: API需要注冊之后獲得KEY才能使用,具體請查看 聚合數(shù)據(jù) 官方文檔,這里默認各位已經(jīng)注冊并擁有相應API所需的KEY
微信開發(fā)者工具的安裝和使用在這里就不多作介紹了,有疑問的話可以看微信官方的 簡易教程
先創(chuàng)建一個工程,依次點擊「添加項目」--「無AppID」,然后填好「項目名稱」并選擇「項目目錄」,點擊「添加項目」
然后我們來清理一下默認工程的目錄結(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)應該是這樣子的
.
├── 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)了,后面還會添加資源進去,但是整體結(jié)構(gòu)還是這樣不會改變的
微信小程序是通過修改 app.json
文件改變?nèi)峙渲玫模唧w的可配置項請各位自行查閱小程序文檔的 配置 一節(jié)
打開 app.json
,修改成
{
"pages":[
"pages/index/index",
"pages/detail/detail"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#3e3e3e",
"navigationBarTitleText": "歷史今日",
"navigationBarTextStyle":"white"
},
"debug": true
}
我們這里修改了導航欄的背景顏色(navigationBarBackgroundColor)、標題顏色(navigationBarTextStyle)以及標題內(nèi)容(navigationBarTitleText),為了方便查看調(diào)試信息,我還開啟了debug模式
全局配置以及搞定啦,接下來正式開始編碼
前面已經(jīng)說了我們要做的是「歷史上的今天」這樣的一個小程序,所以同一個日期會有很多條目,最常見的布局就是做成列表
列表里會有很多的條目,數(shù)量是不確定的,所以我們不能在頁面里寫死了布局,這時候就要用到 模板(template)
了,我們可以在模板中定義代碼片段,然后在不同的地方調(diào)用
我們來定義一個模板,打開 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>
注: 模板的使用細節(jié)請參考官方文檔 模板 一節(jié)
接下來打開 pages/index/index.wxml
刪掉里面的內(nèi)容,我們要在這里編寫列表頁,這里會使用到我們上面定義的模板
<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ù)
為了測試和查看布局效果,我們打開 pages/index/index.js
刪除里面的代碼,然后添加以下代碼手動創(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, 歷史上的今天"
}
]
}
})
保存后點擊開發(fā)工具左側(cè)的編譯,即可查看到效果
注: 布局會用到圖標字體,導入到 res/
下,樣式則寫在 app.wxss
全局樣式表中,圖標字體文件和樣式請從源碼中獲取,這篇教程不作樣式的說明
首頁的布局已經(jīng)完成了,暫時放下首頁列表,接下來開始編寫詳細內(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>
搞定,這個頁面就這么簡單就OK了,現(xiàn)在我們打開 pages/detail/detail.js
手動添加數(shù)據(jù)到這個頁面中查看效果
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: "這是圖片標題"
}
]
}
}
})
現(xiàn)在頁面布局都已經(jīng)完成了,是時候調(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"
// 查詢詳細信息的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獲取的數(shù)據(jù)有兩種,一是「事件列表」,另一種是事件對應的「詳細信息」,上面使用到了 ES6
原生提供的 Promise
對象,具體請參考阮一峰的《JavaScript 標準參考教程(alpha)》中 「Promise對象」 一節(jié)
最后還用到了 module.exports
對外暴露兩個函數(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
方法動態(tài)設(shè)置導航欄的標題內(nèi)容,需要注意的是必須在頁面渲染完成之后,即 onReady
之后才能調(diào)用該方法修改導航欄標題
這次教程就到這里結(jié)束啦~涉及到的部分知識點并沒有詳細介紹和說明,如果有不明白的地方請大家根據(jù)我給出的鏈接去查看詳細的介紹,此文權(quán)當快速上手的一個引子,更加深入的內(nèi)容以及小程序的其他API的使用,還需要各位親自去實踐,歡迎交流~