微信小程序项目实践

起步

阅读 微信小程序开发指南

UI库

• WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。
• iView Weapp 一套高质量的微信小程序 UI 组件库。
• Vant Weapp 轻量、可靠的小程序 UI 组件库。

安装

1. 通过npm安装，小程序已经支持使用 npm 安装第三方包，详见 npm 支持

   # 以Vant Weapp为例
   # 通过 npm 安装
   npm i vant-weapp -S --production
   # 通过 yarn 安装
   yarn add vant-weapp --production
   

2. 下载源码，并将dist或lib目录拷贝到自己的项目中

使用

在对应的page的json文件中，声明用到的组件和对应的路径

// pages/index/index.json
{
  "usingComponents": {
    "i-icon": "../../dist/icon/index"
  }
}

自定义组件

在使用过程中发现iView提供的Card图片不能满足项目展示需求，于是决定自定义Card组件。参考官方教程

效果展示

代码实现

index.wxml, 使用flex布局，首先水平排列，图片和状态居左，右边的view再垂直排列，使用wx:if判断一些部分是否显示。

<view class="i-class i-card {{ full ? 'i-card-full' : '' }}">
  <view class="left">
    <image class="i-card-header-thumb" src="{{ thumb }}" mode="aspectFit" wx:if="{{ thumb }}" />
    <text wx:if="{{show!='0'}}">{{show=='1'?statusList[item.status]:statusList1[item.status]}}</text>
  </view>
  <view class="i-card-header">
    <view class="i-card-header-content">
      <text class='i-card-header-title'>{{item.name}}</text>
      <view class="i-card-header-extra" wx:if="{{ item.reward }}">￥{{ item.reward }}</view>
    </view>

    <view wx:if="{{item.type=='r'}}">
      <view class="i-card-body">
        <text>{{item.location}}</text>
      </view>
      <view class="i-card-footer">
        <text>{{item.time}}</text>
      </view>
    </view>
    <view class="i-card-body" wx::else>
      <text>{{item.brief_info}}</text>
    </view>

  </view>
</view>

index.css

.i-card {
  display: flex;
  margin: 10px 0;
  font-size: 14px;
  overflow: hidden;
  position: relative;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(190, 211, 254, 1);
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 10px;
}

.left text {
  text-align: center;
  margin-top: 10px;
}

.i-card-full {
  margin: 0;
  border-left: none;
  border-right: none;
  border-radius: 0;
}

.i-card-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 6px 16px;
  align-items: flex-start;
}

.i-card-header-content {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  text-align: left;
  color: #77a9fd;
}

.i-card-header-thumb {
  display: inline-block;
  width: 64px;
  height: 64px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  vertical-align: middle;
  border-radius: 50%;
}

.i-card-header-title {
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  color: #77a9fd;
}

.i-card-header-extra {
  width: 35px;
  line-height:26px;
  text-align: center;
  font-size: 14px;
  color: #77a9fd;
  border: 1rpx solid #77a9fd;
  border-radius: 10px;
}

.i-card-body {
  color: #495060;
  font-size: 14px;
  /* 居中 */
  /* display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 1; */
}

.i-card-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform: scale(0.5);
  transform-origin: 0 0;
  pointer-events: none;
  box-sizing: border-box;
  border: 0 solid #e9eaec;
  border-top-width: 1px;
}

.i-card-footer {
  color: #80848f;
  font-size: 12px;
}

index.js 在properties中定义调用组件时传进的参数

Component({
  externalClasses: ['i-class'],

  options: {
    multipleSlots: true
  },
  data: {
    statusList: ['未提交','待审核', '不达标', '已完成'],
    statusList1: ['进行中', '已结束', '已终止']
  },
  properties: {
    show: {
      type: String,
      value: '0'
    },
    full: {
      type: Boolean,
      value: false
    },
    thumb: {
      type: String,
      value: ''
    },
    item: {
      type: Object,
      value: {}
    }
  }
});

在页面中使用组件

<view class="taskList" wx:for="{{isPublish?publishedTasks:acceptedTasks}}" wx:key="{{item}}">
      <my-card bindtap="openReview" data-item="{{item}}" item="{{item}}" 
      thumb="https://i.loli.net/2017/08/21/599a521472424.jpg " show="{{isPublish?'2':'1'}}"></my-card>
</view>