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

项目地址（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的实现

<!--index.wxml--><view style="overflow-x:hidden;overflow-y:auto"> <view class="messageList">   <block wx:for="{{messages}}">      <navigator url="">        <view class="item">        <!--头像部分-->          <view class="item-left">             <image class="image" src="{{item.url}}"></image>             <view class="mark" wx:if="{{item.num>0}}"><text class="text">{{item.num}}</text></view>          </view>          <!--中间消息-->          <view class="item-middle">            <view ><text class="title">{{item.title}}</text></view>            <view><text class="message">{{item.message}}</text></view>          </view>          <!--右边部分-->          <view class="item-right">            <view class="item-right1"><text class="time">{{item.time}}</text></view>            <view wx:if="{{!item.remove}}" class="item-right2"><image src="{{item.flag}}" class="img_flag"></image></view>          </view>        </view>        <view class="line"></view>      </navigator>   </block> </view></view>

第1是头像部分，第2是中间的消息，第3是最右边的部分。
wx:for=”{{messages}}”就是一个循环。
wx:if=”{{item.num>0}}”是一个if语句，这里表示当数字大于0，则显示这个view，否则隐藏。
要设置控件的值，通过{{}}即可，如上面的{{item.message}}

3.2 index.wxss文件的实现
该文件是index的样式设置，通过类名来设置相关view的高度等。

/**index.wxss**/.messageList{  display: flex;  background: #ffffff;  flex-direction: column;}.item{  display: flex;  flex-direction: row;  margin: 15rpx;  justify-content: space-between;}.item-left{  display: flex;  flex-direction: row;}.image{  width: 128rpx;  height: 128rpx;  display: table-cell;}.mark{  position:relative;  width:30rpx;  height:30rpx;  border-radius: 50%;  background-color: red;  color: #ffffff;  text-align: center;  left:-20rpx;  font-size: 10rpx;   display:table-cell;  padding-left: 2rpx;}.text{  color: #ffffff;  font-size: 14rpx;  text-align: center}.item-middle{   flex: 1;   margin-left: 20rpx;   display: flex;   flex-direction: column;   top: 10rpx;}.title{  overflow: hidden;  color: black;  font-size: 20rpx;  font-family:"微软雅黑";  /*font-weight:bold;*/  text-overflow: ellipsis;/*文字隐藏后添加省略号*/}.message{  color: #aaa;  font-size: 14rpx;  overflow: hidden;}

3.3 index.js文件实现
这个文件是为index.wxml文件设置数据的。

//index.js//获取应用实例var app = getApp()Page({  data: {    messages:[      {   url:"http://img1.3lian.com/gif/more/11/201212/0d1252b54be4f2d240b6b7fe4ed35054.jpg",        title:"商脉",        message:'好的',        num:2,        time:'11:15',        remove:false,        flag:'/images/wechat.png'      },       {        url:"http://img1.3lian.com/gif/more/11/201212/0d1252b54be4f2d240b6b7fe4ed35054.jpg",        title:"甲乙",        message:'好的',        num:1,        time:'11:08',        remove:false,        flag:'/images/wechat.png'      }    ]  },  //事件处理函数  bindViewTap: function() {    wx.navigateTo({      url: '../logs/logs'    })  },  onLoad: function () {    console.log('onLoad')    var that = this    //调用应用实例的方法获取全局数据    app.getUserInfo(function(userInfo){      //更新数据      that.setData({        userInfo:userInfo      })    })  }})

其中messages就是数据的集合了，在上面的index.wxml文件中就用到这里的的数据了。

4、其它三个页面的实现

其它三个页面的实现步骤和第一个页面 的实现方式是一样的，关键是调整页面的布局，如让文字垂直居中等。这里就不贴出来了，具体可以参考代码。

5、项目导入方式

总结

刚开始使用微信的工具，算是个入门的小测试吧。