TNK：微信小程序開(kāi)發(fā)嘗鮮
微信小程序面世以來(lái)受到的關(guān)注頗多，直到最近我才動(dòng)手嘗試進(jìn)行了小程序的開(kāi)發(fā)，總體上感覺(jué)還是不錯(cuò)的，有一點(diǎn)不適應(yīng)的就是要擺脫Web APP開(kāi)發(fā)對(duì)DOM的操作。在這里我就把我是如何利用API開(kāi)發(fā)微信小程序的過(guò)程寫(xiě)成教程 ...
微信小程序面世以來(lái)受到的關(guān)注頗多，直到最近我才動(dòng)手嘗試進(jìn)行了小程序的開(kāi)發(fā)，總體上感覺(jué)還是不錯(cuò)的，有一點(diǎn)不適應(yīng)的就是要擺脫Web APP開(kāi)發(fā)對(duì)DOM的操作。在這里我就把我是如何利用API開(kāi)發(fā)微信小程序的過(guò)程寫(xiě)成教程，教大家快速上手體驗(yàn)一次微信小程序的開(kāi)發(fā)。
在開(kāi)始之前我們先來(lái)看下成品的效果圖
準(zhǔn)備工作
我們先確定想要開(kāi)發(fā)一款什么樣的小程序，首先要符合「小」，因?yàn)槲覀冞@次是要體驗(yàn)小程序的開(kāi)發(fā)，所以盡量不要弄得太復(fù)雜；其次是「快」，小程序里需要的數(shù)據(jù)啊、資源啊，最好是現(xiàn)成就有的，自己寫(xiě)個(gè)API什么的這就太耗時(shí)了，就不叫快速上手了。
所以呢，如果能調(diào)用現(xiàn)成的API那是極好的，經(jīng)過(guò)一番挑選，我選擇了聚合數(shù)據(jù)的 歷史上的今天 這個(gè)API，調(diào)用這個(gè)API獲取數(shù)據(jù)，我們只要做2個(gè)頁(yè)面就可以完全展示出來(lái)了，又「小」又「快」哈XD
- API一枚: 「歷史上的今天」
- 微信小程序 開(kāi)發(fā)者工具
注: API需要注冊(cè)之后獲得KEY才能使用，具體請(qǐng)查看 聚合數(shù)據(jù) 官方文檔，這里默認(rèn)各位已經(jīng)注冊(cè)并擁有相應(yīng)API所需的KEY
工程結(jié)構(gòu)
微信開(kāi)發(fā)者工具的安裝和使用在這里就不多作介紹了，有疑問(wèn)的話可以看微信官方的 簡(jiǎn)易教程
先創(chuàng)建一個(gè)工程，依次點(diǎn)擊「添加項(xiàng)目」－－「無(wú)AppID」，然后填好「項(xiàng)目名稱(chēng)」并選擇「項(xiàng)目目錄」，點(diǎn)擊「添加項(xiàng)目」
然后我們來(lái)清理一下默認(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ì)改變的
修改配置
微信小程序是通過(guò)修改 app.json 文件改變?nèi)峙渲玫?，具體的可配置項(xiàng)請(qǐng)各位自行查閱小程序文檔的 配置 一節(jié)
打開(kāi) 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)試信息，我還開(kāi)啟了debug模式
全局配置以及搞定啦，接下來(lái)正式開(kāi)始編碼
首頁(yè)布局
前面已經(jīng)說(shuō)了我們要做的是「歷史上的今天」這樣的一個(gè)小程序，所以同一個(gè)日期會(huì)有很多條目，最常見(jiàn)的布局就是做成列表
列表里會(huì)有很多的條目，數(shù)量是不確定的，所以我們不能在頁(yè)面里寫(xiě)死了布局，這時(shí)候就要用到 模板(template) 了，我們可以在模板中定義代碼片段，然后在不同的地方調(diào)用
我們來(lái)定義一個(gè)模板，打開(kāi) 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é)
接下來(lái)打開(kāi) pages/index/index.wxml 刪掉里面的內(nèi)容，我們要在這里編寫(xiě)列表頁(yè)，這里會(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>沒(méi)有更多內(nèi)容了</text></view>
<view wx:else><text>內(nèi)容加載中...</text></view>
</view>
</scroll-view>
<loading hidden="{{hidden}}">Loading...</loading>
可以注意到第一行使用了 import 將模板引入到頁(yè)面中，然后再使用 is 屬性，聲明需要使用的模板，用 data 屬性傳入數(shù)據(jù)供模板使用
注: 模板擁有自己的作用域，只能使用 data 傳入的數(shù)據(jù)
為了測(cè)試和查看布局效果，我們打開(kāi) pages/index/index.js 刪除里面的代碼，然后添加以下代碼手動(dòng)創(chuàng)建數(shù)據(jù)傳入給頁(yè)面渲染
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)擊開(kāi)發(fā)工具左側(cè)的編譯，即可查看到效果
注: 布局會(huì)用到圖標(biāo)字體，導(dǎo)入到 res/ 下，樣式則寫(xiě)在 app.wxss 全局樣式表中，圖標(biāo)字體文件和樣式請(qǐng)從源碼中獲取，這篇教程不作樣式的說(shuō)明
詳細(xì)頁(yè)面
首頁(yè)的布局已經(jīng)完成了，暫時(shí)放下首頁(yè)列表，接下來(lái)開(kāi)始編寫(xiě)詳細(xì)內(nèi)容的頁(yè)面
打開(kā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è)頁(yè)面就這么簡(jiǎn)單就OK了，現(xiàn)在我們打開(kāi) pages/detail/detail.js 手動(dòng)添加數(shù)據(jù)到這個(gè)頁(yè)面中查看效果
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)在頁(yè)面布局都已經(jīng)完成了，是時(shí)候調(diào)用API編寫(xiě)邏輯層的代碼來(lái)填充數(shù)據(jù)到頁(yè)面上了，在開(kāi)始之前我們先清理一下無(wú)用的代碼
打開(kāi) app.js 刪掉無(wú)用的函數(shù)和屬性
App({
})
以上這步是額外步驟，并不影響我們接下來(lái)要做的事情
打開(kāi) 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ù)打開(kāi) pages/index/index.js 文件，修改成這樣
const util = require('../../utils/util.js')
Page({
data: {
hidden: false,
events: []
},
onLoad:function(options){
// 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
var self = this
util.getEvents().then(function(data) {
self.setData({
hidden: true,
events: data
})
})
}
})
然后打開(kāi) pages/detail/detail.js ，修改如下
const util = require('../../utils/util.js')
Page({
data:{
hidden: false,
detail: {}
},
onLoad:function(param){
// 頁(yè)面初始化 param為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
var self = this
util.getDetail(param.id).then(function(result){
self.setData({
detail: result[0]
})
})
},
onReady:function(){
// 頁(yè)面渲染完成
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)容，需要注意的是必須在頁(yè)面渲染完成之后，即 onReady 之后才能調(diào)用該方法修改導(dǎo)航欄標(biāo)題
這次教程就到這里結(jié)束啦～涉及到的部分知識(shí)點(diǎn)并沒(méi)有詳細(xì)介紹和說(shuō)明，如果有不明白的地方請(qǐng)大家根據(jù)我給出的鏈接去查看詳細(xì)的介紹，此文權(quán)當(dāng)快速上手的一個(gè)引子，更加深入的內(nèi)容以及小程序的其他API的使用，還需要各位親自去實(shí)踐，歡迎交流～
