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