小程序模板網(wǎng)

微信小程序入門《一》文章列表,UI框架

發(fā)布時(shí)間:2018-04-16 10:25 所屬欄目:小程序開發(fā)教程

作者:ITDragon龍,原文地址

 

一:文章列表

這章內(nèi)容先講解 如何使用 template 和 wx:for 完成文章列表的骨架。然后下章談?wù)?如何使用weui-wxss UI框架美化頁面。 
微信小程序官網(wǎng)的api介紹很詳細(xì),https://mp.weixin.qq.com/debug/wxadoc/dev/ 。但這也讓我有些無從下手。所以我打算從實(shí)戰(zhàn)中學(xué)習(xí)它。 
在看這篇文章前,先請(qǐng)大家,大致了解微信小程序文檔。

第一步,先搭好骨架,創(chuàng)建一個(gè)list文件夾,用來存放文章列表相關(guān)的內(nèi)容,官方文檔中也強(qiáng)調(diào)過:“為了方便開發(fā)者減少配置項(xiàng),我們規(guī)定描述頁面的這四個(gè)文件(js,wxml,wxss,json)必須具有相同的路徑與文件名。” 
(打開項(xiàng)目硬盤目錄,然后把index文件夾下的內(nèi)容copy到list下面,文件名好像會(huì)自動(dòng)修改)

第二步,在 app.json 中配置 pages ,"pages/list/list" 不需要添加文件后綴名(模仿index來即可)。 
同時(shí)也可以添加底部tabBar (官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html)

 

  1. "tabBar": {
  2. "list": [{
  3. "pagePath": "pages/list/list",
  4. "text": "文章列表"
  5. }, {
  6. "pagePath": "pages/logs/logs",
  7. "text": "日志"
  8. }]
  9. },

配置好后,便可以在list.wxml文件中寫代碼:

 

  1. <!--pages/list/list.wxml-->
  2. <text>這是文章列表頁面</text>
  3. <!--用name 定義模版-->
  4. <template name="msgTemp">
  5. <!--
  6. 1. scaleToFill : 圖片全部填充顯示,可能導(dǎo)致變形
  7. 2. aspectFit : 圖片全部顯示,以最長邊為準(zhǔn)
  8. 3. aspectFill : 圖片全部顯示,以最短邊為準(zhǔn)
  9. 4. widthFix : 寬不變,全部顯示圖片
  10. -->
  11. <view>
  12. <image src="{{src}}" mode="scaleToFill"></image>
  13. </view>
  14. <view>
  15. <text>{{title}}</text>
  16. <text>{{time}}</text>
  17. </view>
  18. </template>
  19.  
  20. <view wx:for="{{msgList}}">
  21. <!--用is 使用模版-->
  22. <template is="msgTemp" data="{{...item}}"/>
  23. </view>

沒有一點(diǎn)點(diǎn)樣式,,,  那我們開始學(xué)習(xí),這段代碼中所用到的新知識(shí),  首先是模版template的定義用name去定義模版,然后用is去調(diào)用模版,數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item所以data里面可以用{{...item}}來輸出數(shù)據(jù)(官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/template.html)  然后用wx-for 循環(huán)打印,運(yùn)行時(shí)可能有警告 (官方文檔:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html)

最后一步是在list.js中定義數(shù)據(jù)  在Page 下 data中添加 (圖片路徑是相對(duì)路徑,根據(jù)自己的情況修改)

 

  1. data:{
  2. msgList:[
  3. {id:1,title:"標(biāo)題一",time:"2017-3-5 23:01:59",src:"../../images/wechatHL.png"},
  4. {id:2,title:"標(biāo)題二",time:"2017-3-5 23:02:59",src:"../../images/wechatHL.png"},
  5. {id:3,title:"標(biāo)題三",time:"2017-3-5 23:03:59",src:"../../images/wechatHL.png"},
  6. {id:4,title:"標(biāo)題四",time:"2017-3-5 23:04:59",src:"../../images/wechatHL.png"}
  7. ]
  8. },

最后編譯運(yùn)行可以看到數(shù)據(jù)都打印出來了。比較簡單,只是會(huì)很丑陋,下一站會(huì)用到weui-wess中的面板去修飾文章列表頁面

注意事項(xiàng):  1.json格式,很容易在最后一條數(shù)據(jù)加上“,” 逗號(hào);  2.“{{}}” 變量忘記添加該符號(hào)  3.刪除或回車的時(shí)候,可能會(huì)把<>刪掉,操作時(shí)需注意。

 

二:UI框架

上一章節(jié),談了文章列表的結(jié)構(gòu)搭建,現(xiàn)在要給它披上嫁衣,我選擇的是weui-wxss這款官方提供的UI框架。下一章便要談?wù)勅绾问褂?wx.request 動(dòng)態(tài)獲取數(shù)據(jù)  weui-wxss是微信官方提供的ui框架,用起來也很方便(copy)。下載地址:https://github.com/weui/weui-wxss

第一步:需要把下載的內(nèi)容copy到項(xiàng)目中,主要是dist目錄下的style目錄下的weui.wxss文件。

第二步:在全局的app.wxss文件中引用 , 注意目錄是相對(duì)路徑

 

  1. @import "style/weui.wxss";

第三步:加class樣式

 

  1. <view class="page">
  2. <view class="page__bd">
  3. <!--用name 定義模版-->
  4. <template name="msgTemp">
  5. <!--
  6. 1. scaleToFill : 圖片全部填充顯示,可能導(dǎo)致變形 默認(rèn)
  7. 2. aspectFit : 圖片全部顯示,以最長邊為準(zhǔn)
  8. 3. aspectFill : 圖片全部顯示,以最短邊為準(zhǔn)
  9. 4. widthFix : 寬不變,全部顯示圖片
  10. -->
  11. <view class="weui-panel__bd">
  12. <navigator url="../detail/detail?id={{id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
  13. <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
  14. <image class="weui-media-box__thumb" src="{{src}}" style="width: 60px; height: 60px;"/>
  15. </view>
  16. <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
  17. <view class="weui-media-box__title">{{title}}</view>
  18. <view class="weui-media-box__desc">{{time}}</view>
  19. </view>
  20. </navigator>
  21. </view>
  22. </template>
  23.  
  24. <view class="weui-panel weui-panel_access">
  25. <view class="weui-panel__hd">文章列表</view>
  26. <view wx:for-items="{{msgList}}" wx:key="{{item.id}}">
  27. <view class="kind-list__item">
  28. <!--用is 使用模版-->
  29. <template is="msgTemp" data="{{...item}}"/>
  30. </view>
  31. </view>
  32. <view class="weui-panel__ft">
  33. <view class="weui-cell weui-cell_access weui-cell_link">
  34. <view class="weui-cell__bd">查看更多</view>
  35. <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  36. </view>
  37. </view>
  38. </view>
  39. </view>
  40. <view class="page__ft">
  41. </view>
  42. </view>

這個(gè)步驟很關(guān)鍵,怎么找到合適的文檔呢?weui-wxss是沒有文檔的,但是它有例子。在下載的內(nèi)容中,dist目錄下的example目錄下全部都是例子。我們需要做的是將dist目錄導(dǎo)入IDE中,然后找到合適的UI。 

如圖所示,找到合適的頁面,然后通過紅色框的路徑找到對(duì)應(yīng)的wxml文件,把需要的部分copy出來,再結(jié)合自己的要求修改。  文章列表效果圖:

注意點(diǎn):  1.copy出來的代碼,勢(shì)必會(huì)打亂原來代碼的結(jié)構(gòu),這時(shí)不能心急,慢慢修改。畢竟這些class的命名是比較長的。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23427.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢