微信小程序 實戰(zhàn)程序簡易新聞的制作
更新時間：2017年01月09日 16:22:05 投稿：lqh
這篇文章主要介紹了微信小程序 實戰(zhàn)程序簡易新聞的制作的相關(guān)資料,需要的朋友可以參考下
微信小程序 實戰(zhàn)項目：
簡易新聞制作
先看下效果：
實現(xiàn)思路數(shù)據(jù)全部是采用的本地數(shù)據(jù)，圖片也是本地圖片，因為苦逼的個人開發(fā)者，無法認證；toolbar四個現(xiàn)象：新聞，笑話，歷史上的今天和主頁，集中主頁采用的是默認的頁面，添加自己的一些內(nèi)容；數(shù)據(jù)綁定，列表渲染，條件渲染和事件的使用；使用一些基礎(chǔ)的View和text，部分API的使用；
代碼結(jié)構(gòu)
| 目錄 | 用途 |
|---|---|
| images | 存放本地圖片 |
| pages | 存放頁面，history歷史上的今天，index主頁，joke笑話，news新聞 |
| utils | 工具包 |
| app.js | 小程序邏輯 |
| app.json | 小程序公共設(shè)置 |
| app.wxss | 小程序公共樣式表 |
代碼內(nèi)容，主要看下配置
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 | 是 | 設(shè)置頁面路徑 |
| window | Object | 否 | 設(shè)置默認頁面的窗口表現(xiàn) |
| tabBar | Object | 否 | 設(shè)置底部 tab 的表現(xiàn) |
| networkTimeout | Object | 否 | 設(shè)置網(wǎng)絡(luò)超時時間 |
| debug | Boolean | 否 | 設(shè)置是否開啟 debug 模式 |
具體配置使用方法請參考官網(wǎng)：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html?t=201715
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家介紹了JavaScript單例模式能不能去實例只留單原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要介紹了微信小程序 input表單與redio及下拉列表的使用實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
Blob實現(xiàn)與File?DataURL?canvas相互轉(zhuǎn)換示例
這篇文章主要為大家介紹了Blob實現(xiàn)與File?DataURL?canvas相互轉(zhuǎn)換的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要給大家分享使用javascript解析二維碼的三種方式，二維碼就是將我們能看懂的文字語言,以機器語言的形式存儲了起來。其中黑色小方塊代表的是1,白色小方塊代表的是0，黑白相間的圖案其實就是一串編碼,掃碼的過程就是翻譯這些編碼的過程,需要的朋友可以參考一下2021-11-11
npm?start運行項目過程package.json字段詳解
這篇文章主要為大家介紹了npm?start運行項目過程package.json字段詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
本篇文章主要介紹了詳解微信小程序入門五: wxml文件引用、模版、生命周期，具有一定的參考價值，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家介紹了JavaScript前端實現(xiàn)小說分頁功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了JS實現(xiàn)微信播音效果示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了微信小程序搜索組件wxSearch實例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了js實現(xiàn)放大鏡，借助寬高等比例放大的兩張圖片，結(jié)合js中鼠標(biāo)偏移量、元素偏移量、元素自身寬高等屬性完成；左側(cè)遮罩移動Xpx,右側(cè)大圖移動X*倍數(shù)px，具體內(nèi)容請需要的小伙伴出差下面文章內(nèi)容2021-12-12