微信小程序常用的案例

微信小程序空格寫法

在text標簽后加上一個decode解碼，里面輸入跟html一樣 其他一些符號同理。

所有的html轉義的都可以，以下這個表是都有效果的

圖片+文字

文字放置在圖片的水平和垂直居中的位置上

wxml代碼如下

<view class="image-parent">
  <image class='image' mode='widthFix' src='../../images/answer-ad.png'></image>
  <view class="child">child</view>
</view> 

wxss代碼如下

.image {
  width: 746rpx;
}
 
.image-parent {
  height: 746rpx; 
  position: relative;
  border: 2rpx solid red;
}
 
.child {
  width: 100px;
  height: 24px;  
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background: yellowgreen;
}  

• 查看圖片寬高比，上述示例中圖片寬高比為1：1
• wxml中標簽設置mode為'widthFix'，即“寬度不變，高度自動變化，保持原圖寬高比不變”
• 設置image寬度為w，上述示例中w=746rpx
• 設置image所在的父容器height值，根據圖片的寬高比，算出來image的height值，並且賦值給父容器height，上述示例中父容器height=746rpx（這一步必須注意，如果不設置父容器height與image的height值相等，會出現不居中或者圖片底部會有一欄空白）
• 注意文字的樣式.child中通過絕對布局和margin實現了垂直居中

---

獲取當前時間並展示在頁面

1、在util.js （創建項目自動生成）中：

 // util.js
 const formatTime = date => {
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const day = date.getDate()
   const hour = date.getHours()
   const minute = date.getMinutes()
   const second = date.getSeconds()
  
  return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute].map(formatNumber).join(':')   //返回年月日，時分秒
}
 
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : '0' + n
}
 
module.exports = {
  formatTime: formatTime
}

2、index.wxml 中寫一個text顯示時間

<text class="user-motto">{{time}}</text> 

3、index.js中寫邏輯

// index.js
  
 var util = require('../../utils/util.js');
 Page({
  ......................
   /**
    * 生命周期函數--監聽頁面加載
    */
   onLoad: function (options) {
    //日期顯示
    var time = util.formatTime(new Date())
    //為頁面中time賦值
    this.setData({
      time: time
    })
  },
 ............................
})

參考1，參考2