微信小程序 ｜ 开发常用事例（一）

LZ-Says：不走，总会被逼着走。想要有 Change 的权利，背后就一定要付出很多努力。

前言

小程序断断续续搞了有一段时间了，发现在某些情况下，第一次消耗 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="微　　信" 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>

接受值方式如下：

/**
   * 生命周期函数--监听页面加载
   */
  onl oad: function(options) {
    console.log("Get Value:" + options.type)
  },

而数组或者对象传值类似，区别在于传递对象 or 数组需要对传递的数据转换为字符串类型的 Json 串，如下：

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

而取值的地方则是需要将值再次转回去，这里需要注意传递值 key 是什么，获取的时候就 options. 什么：

/**
   * 生命周期函数--监听页面加载
   */
  onl oad: 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～