ayuLiao：做一個(gè)比較完整的微信小程序(二)
動(dòng)手實(shí)現(xiàn)文章列表，本篇文章接著上一篇文章的節(jié)奏來(lái)實(shí)現(xiàn)月經(jīng)小程序的文章列表，如圖...
動(dòng)手實(shí)現(xiàn)文章列表
本篇文章接著上一篇文章的節(jié)奏來(lái)實(shí)現(xiàn)月經(jīng)小程序的文章列表，如圖
這就界面最外層是scroll-view控件，使用該控件實(shí)現(xiàn)視圖區(qū)域的滾動(dòng)，當(dāng)用戶滾動(dòng)到視圖底部時(shí)，實(shí)現(xiàn)下拉刷新，從服務(wù)器中取出跟多的文章，在scroll-view控件中，一開(kāi)始使用swiper控件實(shí)現(xiàn)頂部滑動(dòng)，然后就是使用模板template來(lái)實(shí)現(xiàn)文章列表，具體代碼如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!--bindscrolltolower下拉刷新--> <scroll-view style="height:{{scrollviewHeight}}px" bindscrolltolower="loadMore" scroll-y="true"> <!--頂部輪幕--> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" class="banners" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{banner}}"> <swiper-item class="banner"> <text class="banner-title">{{item.title}}</text>--> <image src="{{item.img}}" data-id="{{item.id}}" bindtap="bindViewTap" class="banner-image" width="100%" height="100%" /> <text class="banner-title">{{item.title}}</text>--> </swiper-item> </block> </swiper> <!--頂部輪幕--> <!--文章列表模板--> <template name="itmes"> <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover"> <!--數(shù)據(jù)來(lái)自newsList，newsList中的key-value結(jié)構(gòu)跟title、cTime一樣--> <view class="news-item"> <view class="news-item-left"> <view class="news-item-title">{{title}}</view> </view> <view class="news-item-right"> <image src="{{img}}" class="news-image" /> </view> </view> </navigator> </template> <view class="news-item-container"> <text class="sub-title">月經(jīng)小知識(shí)</text> <!--循環(huán)輸出列表--> <view wx:for="{{newsList}}" > <!--引用上面定義的模板，...item是默認(rèn)寫(xiě)法--> <template is="itmes" data="{{...item}}" /> </view> </view> </scroll-view> |
無(wú)論是頂部的滾動(dòng)區(qū)域還是文章列表，或者文章詳情內(nèi)容都是從服務(wù)器的數(shù)據(jù)庫(kù)中取出來(lái)的，可以使用wx.request()方法獲取指定url中的數(shù)據(jù)，如下用法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
wx.request({ url: 'http://localhost/index.php?s=/addon/Yuejin/Yuejin/getList', data: { limit:limit, lastid:lastid, }, header: { 'content-type': 'application/json' }, success: function (res) { if(!res.data){ return false } //更新數(shù)據(jù) that.setData({ newsList: res.data }) var len = res.data.length lastid = res.data[len-1].id; } }) |
data表示要傳遞給服務(wù)器的值，header表示數(shù)據(jù)包的格式，如果從服務(wù)器中獲取數(shù)據(jù)成功就會(huì)回調(diào)success方法
接著看月經(jīng)詳情界面，該界面用于展示文章的詳細(xì)內(nèi)容，一部后臺(tái)的文章內(nèi)容都是富文本的格式，比如有個(gè)圖片，文字加粗之類的，但是微信小程序的官方文檔中并沒(méi)有對(duì)如何使用富文本進(jìn)行說(shuō)明，也就是說(shuō)，在微信小程序中只能顯示文本，如果服務(wù)器傳回來(lái)的是富文本，就會(huì)將相應(yīng)的HTML代碼也展示出來(lái)，但是上有政策下有對(duì)策，帥的人是不會(huì)被難倒的，我們使用wxParse這個(gè)第三方代碼，它的代碼在github上是開(kāi)源的，地址如下https://github.com/icindy/wxParse
從github上下載下wxParse的代碼后，將wxParse文件夾中的所有內(nèi)容都復(fù)制到項(xiàng)目的根目錄中，然后將樣式文件wxParse.wxss引入到需要實(shí)現(xiàn)的wxss文件中，這里我將它引入到app.wxss，讓項(xiàng)目全局都可以使用wxss中的樣式
1
|
@import "/wxParse/wxParse.wxss";
|
然后在需要使用wxParse模板的wxml文件中引入模版文件wxParse.wxml，這里我們?cè)谖恼略斍轫?yè)也就是detail.wxml中引入，然后通過(guò)template 來(lái)使用wxParse
1 2 3 4 5 6 7 8 9 10 11 12 |
<!--detail.wxml--> <import src="../../wxParse/wxParse.wxml"/> <view class="container"> <view class="art-header"> <image src="{{info.img}}" class="art-img"/> <view class="art-title">{{info.title}}</view> <view class="art-source">{{info.cTime}}</view> </view> <view class="wxParse text_L"> <template is="wxParse" data="{{wxParseData:article.nodes}}"/> </view> </view> |
接著在對(duì)應(yīng)的js文件中引入wxParse.js文件
1 2 |
//在使用的View中引入WxParse模塊 var WxParse = require('../../wxParse/wxParse.js'); |
此時(shí)就可以使用wxParse來(lái)解析富文本了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
wx.request({ url: 'http://localhost/index.php?s=/addon/Yuejin/Yuejin/getDetail', data: { //從lists.wxml的navigator中獲得id id: options.id }, header: { 'content-type': 'application/json' }, success: function (res) { //更新數(shù)據(jù) that.setData({ info: res.data }) var article = res.data.content; /** * WxParse.wxParse(bindName , type, data, target,imagePadding) * 1.bindName綁定的數(shù)據(jù)名(必填) * 2.type可以為html或者md(必填) * 3.data為傳入的具體數(shù)據(jù)(必填) * 4.target為Page對(duì)象,一般為this(必填) * 5.imagePadding為當(dāng)圖片自適應(yīng)是左右的單一padding(默認(rèn)為0,可選) */ WxParse.wxParse('article', 'html', article, that, 5); } }) |
這里要解析的富文本是從服務(wù)器中獲得的文章內(nèi)容，所以配合wx.request()來(lái)使用
微信小程序后端的搭建
前面的數(shù)據(jù)都是從服務(wù)器中獲取的，這里我們不必從0開(kāi)始編寫(xiě)一個(gè)內(nèi)容管理后臺(tái)，有很多開(kāi)源的內(nèi)容后臺(tái)供我們使用，其實(shí)這樣的后臺(tái)同樣可以使用博客系統(tǒng)、新聞網(wǎng)站之類的需求，這里我們使用weiPHP，weiPHP是一個(gè)開(kāi)源的內(nèi)容管理后臺(tái)系統(tǒng)，基于oneThink，oneThink又基于Think PHP3.2
首先下載weiPHP，文末會(huì)提供下載地址，下載完后將它放在Apache的根目錄，可以施工XAMPP快速安裝服務(wù)器的環(huán)境，第一次進(jìn)入weiPHP要進(jìn)行相應(yīng)的安裝和設(shè)置
設(shè)置和安裝成功后，就會(huì)提示成功
這樣就擁有一個(gè)完整的內(nèi)容管理后端了，該后端擁有前臺(tái)和后臺(tái)，是不是超級(jí)簡(jiǎn)單
接著通過(guò)剛剛設(shè)置的賬號(hào)進(jìn)入后臺(tái)，點(diǎn)擊插件管理，然后單擊快速創(chuàng)建
然后根據(jù)提示填寫(xiě)內(nèi)容，這里要注意的是標(biāo)識(shí)名開(kāi)頭一定要大寫(xiě)，不然無(wú)法使用該插件，然后要記得勾選是否需要管理列表
這樣就常見(jiàn)完插件了，點(diǎn)擊安裝則可，安裝完后，可以進(jìn)入前臺(tái)，看我的應(yīng)用中是否出現(xiàn)剛剛創(chuàng)建的插件，如果沒(méi)有可以在系統(tǒng)設(shè)置列表中點(diǎn)擊清理緩存，將緩存給清理掉，就會(huì)出現(xiàn)剛剛創(chuàng)建的插件了，點(diǎn)擊進(jìn)入該插件，如果沒(méi)有報(bào)錯(cuò)就說(shuō)明創(chuàng)建成功
如果出現(xiàn)下面的界面，說(shuō)明在創(chuàng)建插件時(shí)，標(biāo)識(shí)名開(kāi)頭沒(méi)有大寫(xiě)
創(chuàng)建完插件后，就要?jiǎng)?chuàng)建歸屬于該插件的模型，點(diǎn)擊系統(tǒng)—>模型管理—>新增，來(lái)添加一個(gè)新的模型
進(jìn)入新增模型界面后，填寫(xiě)相應(yīng)的內(nèi)容，這里要注意模型名稱要填寫(xiě)成歸屬插件的名稱，模型標(biāo)識(shí)要按照如下寫(xiě)法
1 2 |
AyuLiao--->ayu_liao Ayuliao--->ayuliao |
如果該模型所屬插件處理開(kāi)頭字母大寫(xiě)外還有其他字母大寫(xiě)，就需要使用下劃線分開(kāi)，這是Think PHP3.2默認(rèn)方式，而WeiPHP基于Think PHP3.2所以也有這種特性
然后在所屬插件中選擇剛剛創(chuàng)建的插件，如下圖
創(chuàng)建完模型后，可以編輯該模型，直接點(diǎn)擊模型名稱進(jìn)程相應(yīng)模型編輯界面則可，然后選擇字段編輯，為該模型添加一些字段，如下圖為添加文章內(nèi)容字段，因?yàn)槲恼乱歉晃谋?，所以使用字段類型為編輯?/p>
模型字段的編輯除了基礎(chǔ)編輯還有高級(jí)編輯，這里看到高級(jí)這個(gè)Tab，可以通過(guò)函數(shù)的形式自動(dòng)完成字段內(nèi)容的填寫(xiě)，這里使用WeiPHP內(nèi)置的time函數(shù)，自動(dòng)獲得時(shí)間并添加到該字段上
添加完字段后，還不可以直接使用，這樣前臺(tái)是顯示不出相應(yīng)內(nèi)容的，要再次進(jìn)入編輯模型的界面，此次進(jìn)入設(shè)計(jì)，然后編寫(xiě)列表定義，這些定義就是展示規(guī)則
這樣使用了get_img_html()方法獲得數(shù)據(jù)庫(kù)中對(duì)應(yīng)的圖片，不然封面圖就顯示該圖對(duì)應(yīng)在數(shù)據(jù)庫(kù)中的位置，這里還使用了time_format()方法，格式化時(shí)間
接著進(jìn)入前臺(tái)，點(diǎn)擊一個(gè)例子這個(gè)插件，然后點(diǎn)擊新增，添加相應(yīng)的標(biāo)題、內(nèi)容和封面圖
這樣我們就完成了內(nèi)容的創(chuàng)建
但是想要讓微信小程序端獲得相應(yīng)的內(nèi)容還需要在相應(yīng)的php文件中編寫(xiě)代碼，進(jìn)入到我們創(chuàng)建的插件所對(duì)應(yīng)的文件中，也就是weicms/Addons/AyuLiao/Controller文件夾下的AyuLiaoController.class.php文件
AyuLiaoController.class.php文件中的代碼如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
namespace Addons\AyuLiao\Controller; use Home\Controller\AddonsController; class AyuLiaoController extends AddonsController{ function getList(){ //設(shè)置連接超時(shí)時(shí)間，這里為永不超時(shí) set_time_limit(0); //用I函數(shù)來(lái)接收客戶端發(fā)送過(guò)來(lái)的數(shù)據(jù)，默認(rèn)為10 //limit為一頁(yè)顯示的數(shù)量 $limit = I('limit',4,'intval'); //這一頁(yè)最后一個(gè)item的id $lastid = I('lastid',0,'intval'); //從哪個(gè)id開(kāi)始找，找5個(gè) if($lastid > 0){ $map['id'] = array('lt',$lastid); } //order從小到大，where從哪里開(kāi)始查，order返回結(jié)果排序，field要查詢的內(nèi)容，limit一次查詢多少條 $list = M('ayu_liao')->where($map)->order('id desc')->field('id,title,img,cTime')->limit($limit)->select(); //&表示引入它本身 foreach($list as &$vo){ //get_cover_url將圖片轉(zhuǎn)成url $vo['img'] = get_cover_url($vo['img']); $vo['cTime'] = time_format($vo['cTime']); } //ThinkPHP中的方法，將數(shù)據(jù)以JSON格式返回 $this->ajaxReturn($list); } function getDetail(){ $map['id'] = I('id',0,'intval'); $info = M('ayu_liao')->where($map)->find(); $info['img'] = get_cover_url($info['img']); $info['cTime'] = time_format($info['cTime']); // dump($info); $this->ajaxReturn($info); } } |
這樣寫(xiě)了兩個(gè)方法，分別是getlist()方法用于返回文章列表、getDetail()方法用于返回文章的具體內(nèi)容
看到getlist()方法，在該方法中，首先通過(guò)set_time_limit()方法設(shè)置連接超時(shí)時(shí)間，這里設(shè)置為0，表示永不超時(shí)，然后通過(guò)I()函數(shù)來(lái)接收客戶端發(fā)送的消息，,然后通過(guò)同M()方法來(lái)查詢ayu_liao數(shù)據(jù)表
看看編寫(xiě)的方法成不成功，可以訪問(wèn)以下相應(yīng)的url，獲得對(duì)應(yīng)的JSON數(shù)據(jù)就表示成功了
到這里，就編寫(xiě)完微信小程序-月經(jīng)管理這個(gè)小項(xiàng)目了，你還可以添加一下代碼來(lái)提升用戶體驗(yàn)，比如獲取后端數(shù)據(jù)時(shí)彈出正在加載的提示等等
項(xiàng)目的完整代碼已經(jīng)上傳到github，地址如下
https://github.com/ayuLiao/weixin-calender
后端WeiPHP已經(jīng)上傳到百度云，內(nèi)部還有該項(xiàng)目相應(yīng)的代碼，直接可以使用
http://pan.baidu.com/s/1c7XJky
密碼為：帥B
