### [微信小程序实战程序简易新闻的制作方法](https://www.prosaas.cn/article/17564)

**Published:** 2018-05-21T03:29:10

**Author:** 5201314

**Excerpt:** 这篇文章主要讲述微信小程序实战程序简易新闻的制作方法的相关资料,需要的朋友可以参考下微信小程序 实战项目：简易…

这篇文章主要讲述微信小程序实战程序简易新闻的制作方法的相关资料,需要的朋友可以参考下

微信小程序 实战项目：

**简易新闻制作**

先看下效果：

![](https://img.php.cn/upload/article/000/000/013/8e469392799e00a6bece25b0aa97b1f4-0.gif)

实现思路数据全部是采用的本地数据，图片也是本地图片，因为苦逼的个人开发者，无法认证；toolbar四个现象：新闻，笑话，历史上的今天和主页，集中主页采用的是默认的页面，添加自己的一些内容；数据绑定，列表渲染，条件渲染和事件的使用；使用一些基础的View和text，部分API的使用；

* * *

代码结构

![](https://img.php.cn/upload/article/000/000/013/7793e4be9819b185316038f4647b0b9c-1.png)

| 目录  | 用途  |
| --- | --- |
| 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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

以上就是微信小程序实战程序简易新闻的制作方法的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** Array, history, html, https, JS, json, 个人开发, 事件, 微信小程序, 样式表

**Categories:** 后端开发

---