微信小程序静态页面的实现

项目地址（github）

前段时间微信出了个小程序，我也学习了一下，自己实现了一个小程序。当然里面都是静态页面，并无数据的操作。要开发小程序就得用微信的开发工具了，它现在不限制用户是否有Appid都可以下载来使用了。先上这个小程序的效果图：

图片不够用就重复的使用了。

一、代码的实现

1、项目的结构

其中1是放图片的，2中的pages是放页面的相关文件，如js，json,wxss,wxml这些文件，每个页面对应的配置文件都要放在一起，第3部分是程序的整体的配置，分别有app.js,app.json,app.wxss这些文件。

2、页面的设置

每个页面都要在app.json文件中设置，底部导航的设置，也是在这个文件里实现。

"pages":[
    "pages/index/index",
    "pages/contacts/constact",
    "pages/finds/myfind",
    "pages/mes/me",
    "pages/logs/logs"
  ]

底部导航的代码设置如下：

"tabBar":{
    "color":"#9b9db1",
    "selectedColor":"#3cc51f",
    "borderStyle":"black",
    "backgroundColor":"#ffffff",
    "list":[
      {
        "pagePath":"pages/index/index",
        "iconPath":"images/wechat.png",
"selectedIconPath":"images/wechatHL.png",
        "text":"消息"
      },
      {
        "pagePath":"pages/contacts/constact",
        "iconPath":"images/wechat.png",
    "selectedIconPath":"images/wechatHL.png",
        "text":"通讯录"
      },
      {
        "pagePath":"pages/finds/myfind",
        "iconPath":"images/wechat.png",
    "selectedIconPath":"images/wechatHL.png",
        "text":"发现"
      },
      {
        "pagePath":"pages/mes/me",
        "iconPath":"images/wechat.png",
   "selectedIconPath":"images/wechatHL.png",
        "text":"我"
      }
    ]
   }

其中”pagePath”:”pages/index/index”就是想要跳转的页面，”iconPath”:”images/wechat.png”就是没被选中的图片，”selectedIconPath”:”images/wechatHL.png”就是被选中时候的图片。

3、消息页面的实现。

3.1、index.wxml的实现