小程序之UI控件,页面布局和网络访问

小程序之UI控件,页面布局和网络访问

• 个人感觉小程序结构很像Web应用，不过经微信改版的js更像Nodejs的风格。

小程序UI

• 微信小程序有自己一套UI组件风格，所以官方还是建议用微信推荐的组件。WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计：https://github.com/Tencent/weui-wxss
• 想详细学习WeUI组件信息还是建议参考官网：https://developers.weixin.qq.com/miniprogram/dev/component/

项目实现过程

• 先说一下我们的项目内容，我们的项目是实现一个简单的挣闲钱小程序，主要功能是发布活动，接活动，查看活动。我是负责查看登录后的用户的发布任务信息和参加任务信息。主要界面如图：
  
• 说下页面的UI吧，我参加的和我发布的是两个navbar，WeUI有实现的wxml和js代码，首先在wxml把这个navbar框架布局好：

<view class="weui-navbar navbar">
    <block wx:for="{
    {tabs}}" wx:key="*this">
        <view id="{
    {index}}" class="weui-navbar__item {
    {activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
            <view class="weui-navbar__title">{
  {item}}</view>
        </view>
    </block>
    <view class="weui-navbar__slider" style="left: {
      {
      sliderLeft}}px; transform: translateX({
      {
      sliderOffset}}px); -webkit-transform: translateX({
      {
      sliderOffset}}px);"></view>
</view>

其中activeIndex是用来控制显示我参加的还是我发布的页面下的内容，{ {item}}看代码都知道是显示navbar的文字的啦

• 然后就是里面显示任务列表的UI了，我参加的还是我发布的页面下都是分别显示正在进行或已结束的任务列表，并且只能显示前3个，如果有超过3个的任务会有查看更多按钮给用户跳转到更多活动页面：

<view class="weui-tab__content" hidden="{
    {activeIndex != 0}}">
        <view class="weui-panel">
            <view