微信小程序|开发常用事例2

前言

小程序断断续续搞了有一段时间了，发现在某些情况下，第一次消耗30 分钟，而后则几分钟即可。

短暂微小积累，做一个积累，也希望帮助有需要的小伙伴~

一起来看关于小程序常用事例

话不多说，立刻开搞~

一、 实现底部 Tab 栏

' tabBar ' : { ' color ' : ' # 515151 '，' selectedColor': '#01509F '，' list ' :[{ ' page path ' : ' pages/index/index '，' text': '预约，'图标路径' : '/images/tab _ yuyuyuue。png '，' selectedionpath ' : ' images/tab _于越_selected.png' }，{ '页面路径' : '页面/记录/记录'，'文本' : '记录，'图标路径' : '/images/tab _ record。png '，' selectedionpath ' : '/images/tab _ record _ selected。png ' }，{ '页面路径' : ' pages/mine/mine '，' text': '我的，'图标路径' : '/images/tab _ mine。png '，' selectedionpath ' : '/images/tab _ mine _ selected。png ' }]}复制代码

二、 设置 Button 透明无边框

.价格_详细信息{边框：无}后的img_info按钮：}.价格_详细信息img_info按钮{ background: none}复制代码

三、 设置 CheckBox 样式为圆形

/* 重写检验盒样式*//* 未选中的背景样式*/复选框wx-复选框-输入{边框半径：50%；宽度： 46rpx高度： 46rpx}/*选中后的背景样式（红色背景无边框可根据用户界面需求自己修改)*/复选框wx-复选框-输入wx-复选框-输入-选中{边框： 1rpx实线# ff 783 b；背景技术# ff783b}/*选中后的对勾样式（白色对勾可根据用户界面需求自己修改)*/复选框wx-复选框-输入wx-复选框-输入-在{边框半径： 50%之前选中：宽度： 40 rpx高度： 40rpx线高： 40 rpx文本对齐：中心；font-size : 30 rpxcolor: # fff/*对勾颜色白色*/background:透明；transform: translate(-50%，-50%)比例尺(1);-WebKit-transform : translate(-50%，-50%)比例(1);}复制代码如下所示：

g-5">四、 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～