一。基本控制元件----button按鈕

<!--index.wxml-->
<view class="container">
  <button size="mini">按鈕</button>
  <button size="default" type="primary">按鈕</button>
  <button size="default" type="warn">按鈕</button>
  <button size="default" type="warn" plain="true">按鈕</button>
  <button size="default" type="primary" disabled="true">按鈕</button>
  <button size="default" type="primary" loading="true">載入中</button>
</view>
 

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

//index.js
//獲取應用例項
var percent = 10;
var timerId;
var param = {
  data : {
    curr_percent : percent,
  },
  startDownload : function(e){
    //點選下載按鈕觸發的函式
    //啟動一個定時器，每個0.5s來進度條往前推進一個進度
    timerId = setInterval(this.updateData,500);
  },
  updateData : function() {
    //重新整理資料
    percent++;
    console.log({"當前進度是" + percent});
    if(percent == 80){
      clearInterval(timerId);
    }
    //重新整理資料到介面上
    this.setData({curr_percent : percent});
  },
  doLoading : function(){
    //e表示點選物件事件
    console.log(e);
  }
}
 

二。LOGO系統圖標

三.image圖片顯示

/**index.wxss**/
.flex{
  display: flex;
}
.item{
  padding: 10px;
  background-color: #fff;
  color: #787878;
  border-top: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
}
.item image{
  display: block;
  width: 65px;
  height: 65px;
}
.item-middle{
  flex:1;
  margin-left: 10px;
  padding-top: 5px;
  overflow: hidden;
}
.item-middle .title{
  font-size: 16px;
  color: #333;
}
.item-middle .sub-title{
  font-size: 14px;
  color: #666;
  margin: 2px 0px;
}
.item-middle actor{
  font-size: 14px;
  color: #666;
  margin: 2px 0px;
}
.item-right{

}
.item-right .score{
  font-size: 16px;
  color: red;
}
.item-right .action{
  margin-top: 30px;
  border : 1px solid #29cc6d;
  color: #29cc6d;
  display: inline-block;
  padding: 2px 4px;
  font-size: 14px;
  border-radius: 2px;
}


 

<!--index.wxml-->
<view>

  <view class='flex item'>
    <view class='item-left'>
      <image src='../images/wechatHL.png'></image>
    </view>
    <view class='item-middle'>
      <view><text class='title'>標題</text></view>
      <view><text class='sub-title'>子標題</text></view>
      <view><text class='actor'>演員</text></view>
    </view>
    <view class='item-right'>
      <view><text class='score'>9.7</text></view>
      <view><text class='action'>購票</text></view>
    </view>
  </view>

  <view class='flex item'>
    <view class='item-left'>
      <image src='https://www.baidu.com/img/bd_logo1.png'></image>
    </view>
    <view class='item-middle'></view>
    <view class='item-right'></view>
  </view>

</view>