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

项目地址（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、项目导入方式

总结

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