一：欢迎页面的创建

作者：SundayAaron，来自原文地址

先看下最后的效果图： 

首先打开开发工具，创建quick start项目，简单的修改一下。 

• 把Index文件夹重命名为welcome；
• 底部的hello world改为一个类似于按钮的样式；
• 添加背景颜色； 修改顶部样式；

按钮的实现：

welcome.wxml

 <view class="usermotto">
    <text class="btn">开启小程序之旅</text>
  </view>

welcome.wxss

.usermotto {
  margin-top: 200px;
  border: 1px solid #405f80;
  width: 200rpx;
  height: 80rpx;
  text-align: center;
  border-radius: 5px;
}
.btn{
  font-size: 22rpx;
  font-family: MicroSoft Yahei;
  font-weight: bold;
  line-height: 80rpx;
}

背景颜色的设置：

注意：在最外部的view设置宽高百分百，添加背景颜色是无效的。因为微信默认外面还有一层page。 

所以需要这样写：

page{
  height: 100%;
  background: #b3d4db;
}

顶部设置：

app.jason

{
  "pages":[
    "pages/welcome/welcome"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b3d4db",
    "navigationBarTitleText": "欢迎",
    "navigationBarTextStyle":"black"
  }
}

demo源码免费积分下载：欢迎页面.zip

二：简易新闻制作

作者：偏爱，来自原文地址

先看下效果： 

实现思路

1. 数据全部是采用的本地数据，图片也是本地图片，因为苦逼的个人开发者，无法认证；
2. toolbar四个现象：新闻，笑话，历史上的今天和主页，集中主页采用的是默认的页面，添加自己的一些内容；
3. 数据绑定，列表渲染，条件渲染和事件的使用；
4. 使用一些基础的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 模式

具体配置使用方法请参考官网： 

源码地址：

源码下载：NewsClient4WeChat-yidong.zip

付费下载网站源码