前言

小程序斷斷續續搞了有一段時間了，發現在某些情況下，第一次消耗 30 分鐘，而后則幾分鐘即可。

短暫微小積累，做一個積累，也希望幫助有需要的小伙伴～

一起來看關于小程序常用事例

話不多說，立刻開搞～

一、 實現底部 Tab 欄

"tabBar": {
    "color": "#515151",
    "selectedColor": "#01509F",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "預約",
        "iconPath": "/images/tab_yuyue.png",
        "selectedIconPath": "images/tab_yuyue_selected.png"
      },
      {
        "pagePath": "pages/records/records",
        "text": "記錄",
        "iconPath": "/images/tab_record.png",
        "selectedIconPath": "/images/tab_record_selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/tab_mine.png",
        "selectedIconPath": "/images/tab_mine_selected.png"
      }
    ]
  }
復制代碼

二、 設置 Button 透明無邊框

.price_detail .img_info button::after {
  border: none;
}

.price_detail .img_info button {
  background: none;
}
復制代碼

三、 設置 CheckBox 樣式為圓形 

/* 重寫 checkbox 樣式 */

/* 未選中的 背景樣式 */
checkbox .wx-checkbox-input {
  border-radius: 50%;
  width: 46rpx;
  height: 46rpx;
}

/* 選中后的 背景樣式 （紅色背景 無邊框 可根據UI需求自己修改） */
checkbox .wx-checkbox-input .wx-checkbox-input-checked {
  border: 1rpx solid #ff783b;
  background: #ff783b;
}

/* 選中后的 對勾樣式 （白色對勾 可根據UI需求自己修改） */
checkbox .wx-checkbox-input .wx-checkbox-input-checked ::before {
  border-radius: 50%;
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  /* 對勾顏色 白色 */
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
復制代碼

如下所示：

 

四、 Text 文本內顯示空格

先來看下效果：

使用全角空格即可，Mac 上使用方式如下：

 

• Shift + option + B： 選擇全角空格即可

<van-field clearable label="微&emsp;&emsp;信" placeholder="請輸入微信號碼" />
復制代碼

五、 點擊左上角返回直接返回首頁

方式一：

/**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function() {
    wx.navigateBack({
      delta: 6
    })
  },
復制代碼

方式二：

 /**
   * 返回首頁
   */
   goBackHome: function() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
  
 /**
  * 生命周期函數--監聽頁面卸載
  */
  onUnload: function() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
復制代碼

六、 跳轉傳值

傳值的話，一般可概括為如下倆種：

• 下級頁面需要得到上級頁的 ID （傳單值）；
• 下級頁面需要得到上級頁例如訂單信息以便與下級頁填充 （傳對象或者 Array 數組 等）。

首先來看單值傳值方式：

<navigator url='/pages/order/order?type=4'>
    <view>
      <image src='../../images/ic_pay_error.png' />
      <text>已退款</text>
    </view>
</navigator>
復制代碼

接受值方式如下：

/**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    console.log("Get Value:" + options.type)
  },
復制代碼

而數組或者對象傳值類似，區別在于傳遞對象 or 數組需要對傳遞的數據轉換為字符串類型的 Json 串，如下：

wx.navigateTo({
      url: '/pages/xx/xx?activeTempList=' + JSON.stringify(this.data.activeTempList),
    })
復制代碼

而取值的地方則是需要將值再次轉回去，這里需要注意傳遞值 key 是什么，獲取的時候就 options. 什么：

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    this.setData({
      orderInfo: JSON.parse(options.orderInfo),
    })
  },
復制代碼

官方地址：developers.weixin.qq.com/miniprogram…

七、 兼容 iPhone X

附上一張未兼容和已兼容的效果圖：

適配步驟：

 

Step 1： App.js 中檢測當前設備是否為 iPhone X

  globalData: {
    // 是否為 iPhoneX 以上版本
    isIphoneX: false
  },
  
  /**
   * 檢測當前設備是否為 iPhone X 及以上
   */
  checkIsiPhoneX: function() {
    const self = this
    wx.getSystemInfo({
      success: function(res) {
        // 根據 model 進行判斷
        if (res.model.search('iPhone X') != -1) {
          self.globalData.isIphoneX = true
        }
        // 或者根據 screenHeight 進行判斷
        // if (res.screenHeight == 812) {
        //   self.globalData.isIphoneX = true
        // }
      }
    })
  },
  
  onLaunch: function() {
    // 判斷設備是否為 iPhone X 及以上
    this.checkIsiPhoneX()
  }
復制代碼

Step 2： 設置兼容以及普通機型下的樣式

/* 提交按鈕 */
.submit_btn {
  background: #d04801;
  color: #fff;
  border-radius: 50rpx;
  margin: 30rpx;
  font-size: 32rpx;
  padding: 15rpx;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
}

/* 點擊效果 */
.submit_btn:active {
  opacity: 0.6;
}

/* 提交按鈕 iPhone X */
.submit_btn_iPhoneX {
  margin-bottom: 68rpx;
}
復制代碼

Step 3： 具體的 Page.js 中匹配

const app = getApp()
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    isIphoneX: app.globalData.isIphoneX,
  },
}
復制代碼

Step 4： 未指定的控件設置對應的樣式兼容

<button class="{{ isIphoneX ? 'submit_btn submit_btn_iPhoneX' :'submit_btn'}}" bindtap="{{phone.length ? 'confirmOrder' : ''}}" open-type="{{phone.length ? '' : 'getPhoneNumber'}}" bindgetphonenumber='bindgetphonenumber'>下一步</button>
復制代碼

以上內容參考自如下鏈接：

• kangzubin.com/wxapp-iphon…

八、來一個彈窗領優惠卷效果

先來看一波效果：

模擬器有毒，不要在意細節啦～

 

分布拆解實現步驟：

• 彈出層，采用 Vant Popup：youzan.github.io/vant-weapp/… ；
• 一張紅包背景圖，扣的累死；
• 一小撮洋碼子。

此處忽略集成 Vant 步驟。 此處忽略集成 Vant 步驟。 此處忽略集成 Vant 步驟。

Step 1： 在所需要的頁面的 json 文件中添加 popup 引用：

  "usingComponents": {
    "van-popup": "/miniprogram_npm/vant-weapp/popup/index"
  }
復制代碼

Step 2： 拼接紅包效果

首先附上樣式內容：

.van-popup {
  background: transparent !important;
}

.red_packet_info {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.red_packet_title {
  font: 28rpx;
  line-height: 72rpx;
  color: #999;
  margin-top: 16rpx;
}

.red_packet_price {
  font-size: 72rpx;
  line-height: 56rpx;
  color: #666;
  font-weight: bold;
}

.give_money_now {
  border-radius: 50rpx;
  margin: 0 100rpx;
  position: relative;
  color: rgb(0, 0, 0);
  top: -200rpx;
}
復制代碼

隨后附上實際碼子：

<van-popup show="{{ isShow }}" bind:close="getHaveOffer" close-on-click-overlay="true" custom-class="van-popup">
  <div>
    <div class="red_packet_info">
      <text class='red_packet_title'>優惠卷</text>
      <text class='red_packet_price'>¥{{ offerPrice }}</text>
    </div>
    <image src='/images/bg_red_packet.png' style='height:800rpx;'></image>
    <button class='give_money_now' bindtap='giveMoneyNow'>立即領取</button>
  </div>
</van-popup>
復制代碼

Step 3： 事件搞起來

  data: {
    offerPrice: 100, // 優惠卷價格，為了演示，后續直接接口獲取
  },
  。。。
    /**
   * 點擊空白消失
   */
  getHaveOffer: function() {
    console.log("---> getHaveOffer")
    this.setData({
      isShow: false
    })
  },

  /**
   * 點擊獲取優惠卷
   */
  giveMoneyNow: function() {
    console.log("---> giveMoneyNow")
    this.setData({
      isShow: false
    })
  },
復制代碼

就這樣，Bye～