专栏首页HLQ_Struggle微信小程序常见事例 Note(One)

微信小程序常见事例 Note(One)

第61次推文

贺贺

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',
    })
  },

六、 跳转传值

传值方式:

<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)
  },

官方地址: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

七、 兼容 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>

以上内容参考自如下链接:

  • https://kangzubin.com/wxapp-iphonex/

欢迎各位老铁关注~不定期发布~见证你我的成长路~!!!

觉得不错,动动小手,转发让更多人看到,3Q,比心~

顺便点个在看呗~

本文分享自微信公众号 - 贺利权(hlq_struggle),作者:贺利权

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 这可能是解决 Could not resolve X 问题有效方式之一

    当时那个头大,依稀记得刚入职便在这个项目哼哧哼哧搞了好久,而最后因为某些原因,项目直接跑不起来了,索性直接本地干掉,专心整现有项目了。

    HLQ_Struggle
  • (基础篇)Git 提交项目到 Coding,Let's go~

    Enmmm,本篇,我们将一起进行 Git 实战,尽量模拟真实工作开发环境,一起来吧~

    HLQ_Struggle
  • 聊聊有关SVG那些事儿

    前几天,老伙计推送微信的一篇文章,文章标题为:【Android微信上的SVG】,正好LZ借此机会学习了解下有关SVG的相关内容。

    HLQ_Struggle
  • [清华论文]数据资产估值,两年前我想到了这些...

    大数据文摘
  • jquery特殊效果 - fadeIn\fadeOut\hide\show\slide

    那么下一步写click监听点击按钮,然后触发div使用fadeOut()方法,使得已存在的div消失,如下:

    Devops海洋的渔夫
  • 洞察|BAT大数据野心:数据生产全链条浮现

    以BAT为代表的中国互联网企业,在数据领域各有千秋,百度的搜索数据、阿里的电商数据、腾讯的社交数据。对于手里的数据如何使用,这些公司正在尝试数据采集、计算引擎、...

    灯塔大数据
  • BAT大数据野心:数据生产全链条浮现

    本报记者 周慧 北京报道 导读 以BAT为代表的中国互联网企业,在数据领域各有千秋,百度的搜索数据、阿里的电商数据、腾讯的社交数据。对于手里的数据如何使用,这些...

    智能算法
  • ES6知识库汇总三

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    j_bleach
  • 云计算与大数据:颠覆传统管理和运营思维

    随着信息技术不断发展,数据量正在呈指数级增长,云计算的诞生让我们步入大数据时代。“大数据”开始向各行业渗透,颠覆传统管理和运营思维大数据在电商行业的价值已被人熟...

    静一
  • (第四季)Vue实例和内置组件

    概述:实例就是在构造器外部操作构造器内部的属性选项或者方法,就叫做实例?实例的作用就是给原生的或者其他javascript框架一个融合的接口或者说是机会,让Vu...

    楠楠

扫码关注云+社区

领取腾讯云代金券