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