微信小程序 實戰項目：
簡易新聞制作
先看下效果：
實現思路數據全部是采用的本地數據，圖片也是本地圖片，因為苦逼的個人開發者，無法認證；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 模式 |
具體配置使用方法請參考官網：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=201715
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
