微信小程序實戰程序簡易新聞的制作

2019-11-19 18:03:11

字體：大中小

來源：轉載

供稿：網友

微信小程序實戰項目：

簡易新聞制作

先看下效果：

實現思路數據全部是采用的本地數據，圖片也是本地圖片，因為苦逼的個人開發者，無法認證；toolbar四個現象：新聞，笑話，歷史上的今天和主頁，集中主頁采用的是默認的頁面，添加自己的一些內容；數據綁定，列表渲染，條件渲染和事件的使用；使用一些基礎的View和text，部分API的使用；

代碼結構

目錄	用途
images	存放本地圖片
pages	存放頁面，history歷史上的今天，index主頁，joke笑話，news新聞
utils	工具包
app.js	小程序邏輯
app.json	小程序公共設置
app.wxss	小程序公共樣式表

代碼內容，主要看下配置

app.json 配置項列表

{ "pages": [  "pages/news/news",  "pages/joke/joke",  "pages/history/history",  "pages/index/index" ], "window": {  "navigationBarBackgroundColor": "#f85959",  "navigationBarTextStyle": "white",  "navigationBarTitleText": "微 看",  "backgroundColor": "#FFFFFF",  "backgroundTextStyle": "dark",  "enablePullDownRefresh": true }, "tabBar": {  "color": "#626567",  "selectedColor": "#f85959",  "backgroundColor": "#FBFBFB",  "borderStyle": "white",  "position": "bottom",  "list": [   {    "pagePath": "pages/news/news",    "text": "新聞",    "iconPath": "images/discovery.png",    "selectedIconPath": "images/discovery_focus.png"   },   {    "pagePath": "pages/joke/joke",    "text": "笑話",    "iconPath": "images/ring.png",    "selectedIconPath": "images/ring_focus.png"   },   {    "pagePath": "pages/history/history",    "text": "歷史",    "iconPath": "images/chat.png",    "selectedIconPath": "images/chat_focus.png"   },   {    "pagePath": "pages/index/index",    "text": "主頁",    "iconPath": "images/index.png",    "selectedIconPath": "images/index_focus.png"   }  ] }, "networkTimeout": {  "request": 10000,  "downloadFile": 10000 }, "debug": true}

屬性	類型	必填	描述
pages	String Array	是	設置頁面路徑
window	Object	否	設置默認頁面的窗口表現
tabBar	Object	否	設置底部 tab 的表現
networkTimeout	Object	否	設置網絡超時時間
debug	Boolean	否	設置是否開啟 debug 模式