前端css样式小知识点（2）

文章目录

- 前言
- 图文实操讲解
- - 1、微信小程序之页面跳转方法
  - - 页面跳转有很多种方式，先简单说一下它们的区别吧
    - 简单实现
  - 2、微信小程序this.setData修改对象、数组中的值
  - 3、微信小程序-获取input值的方法
  - 4、微信小程序-常用的三种弹窗
  - 5、dataset 简单小知识误区
  - 6、that.setData is not a function报错
  - 7、em、rem、vh、vw作用
  - 8、简单-模态框效果基础版
  - 9、转换日期，比较日期是否相等
  - 10、js数组添加对象
  - 11、微信小程序实现同时单击、双击、长按

前言

微信小程序，前端开发小知识点。

图文实操讲解

1、微信小程序之页面跳转方法

页面跳转有很多种方式，先简单说一下它们的区别吧

wx.navigateTo：
用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。
wx.redirectTo：
当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个页面。这样的跳转，可以避免跳转前页面占据运行内存，但返回时页面需要重新加载，增加了返回页面的显示时间。
wx.reLaunch：
wx.reLaunch()与 wx.redirectTo()的用途基本相同，只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面。
wx.switchTab：
对于跳转到 tab bar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tab bar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tab bar 跳转到 tab bar，或在 tab bar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tab bar，则会跳转失败。
switchTab无法携带参数跳转
wx.navigateBack：
用于关闭当前页面，并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面。

简单实现

wx.navigateTo
index.wxml

<view bindtap="Click" class="btn">
  点击按钮
</view>

index.js

Click: function () {
    let name = '传递的数据'; // 跳转传参的参数
    wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值
      url: '../test/index?name=' +name//此处注意中文符号与引文符号的？
    })
  },

第二个页面
index.wxml

<text>第二个页面的测试页</text>
<view> 显示内容：{{name}}</view>

index.js

onLoad: function (options) {
    console.log(options.name)
    this.setData({
      name:options.name
    })
},

效果图
在这里插入图片描述

多参数传递

  Click: function () {
    let name = '传递的数据'; // 跳转传参的参数
    let name2='传递的数据2';
    let name3='传递的数据3';
    wx.navigateTo({ //在接收页面的url后面加上“？自定义名称=字符串”就可以通过url传值
      url: '../test/index?name=' +name+"&name2"+name2+"&name3"+name3//此处注意中文符号与引文符号的？
    })
  },

**带参数传参长度超过限制被截取时，需要使用encode **
第一个.js页面代码

// xxxx是跳转传的数组，先转字符串，再encode
let xxxx = posters.toString()
console.log( encodeURIComponent(xxxx))
wx.navigateTo({
  url: '../test/index?posters=' + encodeURIComponent(xxxx)
})

第二个.js页面接收代码

// onload接收传参数据
onLoad: function (options) {
    let xxxx = decodeURIComponent(options.posters) // 先decode再把字符串转数组
    let objectList = xxxx.split(",");
    console.log(objectList)
    this.setData({
      objectList: objectList
    })
  },

2、微信小程序this.setData修改对象、数组中的值

在微信小程序的前端开发中，使用this.setData方法修改data中的值，其格式为：

this.setData({
   '参数名1': 值1,
   '参数名2': 值2
)}

假设原数据为：

data: {
    user_info:{
      name: 'li',
      age: 10
    },
    cars:['nio', 'bmw', 'wolks']
},

方式一：
使用[‘字符串’]，例如：

this.setData({
      ['user_info.age']: 20,
      ['cars[0]']: 'tesla'
})

方式二：
构造变量，重新赋值，例如：

var temp = this.data.user_info
temp.age = 30
   
this.setData({
    user_info: temp
})

var temp = this.data.cars
temp[0] = 'volvo'
    
this.setData({
    cars: temp
})

3、微信小程序-获取input值的方法

bindinput
方式一：

<input  bindinput='getInputValue'  name='price' type='text' placeholder='输入内容'></input>

其中 e.detail 是获取 input 数据其中包含value值, cursor 是获取光标的位置。

getInputValue(e){
  console.log(e.detail)// {value: "ff", cursor: 2}  
}

方式二：

<form bindsubmit='loginForm'>
  <text class='login-title'>用户登录：</text>
  <input type='text' name='username' placeholder="请输入用户名"></input>
  <input type='password' name='password' placeholder="请输入账号密码"></input>
  <view class='ligin-button'>
    <button formType="submit" type='primary'>点击提交</button>
    <button formType="reset" type='primary'>重置数据表单</button>
  </view>
</form>

在js 中获取数据，通过data.detail.value获取数据,获得的是json对象数据键值对一一对应

loginForm: function(data) {
    console.log(data.detail.value)//  {username: "hgj", password: "fsdfsd"}
    var username = data.detail.value.username
    var password = data.detail.value.password;
}

4、微信小程序-常用的三种弹窗

表示操作成功，文字上方会显示一个表示操作成功的图标。

wx.showToast({
  title: '操作成功！', // 标题
  icon: 'success',  // 图标类型，默认success
  duration: 1500  // 提示窗停留时间，默认1500ms
})

表示加载中，显示为加载中图标。

wx.showToast({
  title: '加载中...',
  icon: 'loading',
  duration: 1500
})

不显示图标，一般用作提示。

wx.showToast({
  title: '该功能未上线！',
  icon: 'none',
  duration: 1500
})

以上3种弹窗均使用wx.showToast接口，调用后会根据设定的duration停留一定时间。
此外，表示加载中的弹窗还可以使用wx.showLoading接口，但调用该接口时弹窗并不会自动消失，而是需要手动调用wx.hideLoading接口使弹窗消失。

// 开始加载数据
wx.showLoading({
 title: '加载中',
})
// 数据加载中... // 数据加载中...
// 数据加载完成，隐藏弹窗
wx.hideLoading()

5、dataset 简单小知识误区

在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。
在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。如：

data-element-type ，最终会呈现为 event.currentTarget.dataset.elementType ；
data-elementType ，最终会呈现为 event.currentTarget.dataset.elementtype 。

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

6、that.setData is not a function报错

1、不要把var that=this定义在了第二层函数里，如果设置了就获取到index.js里的公共变量this，因此拿不到定义的空data。
2、当全局定义时，必须刷新才不报错，Ctrl+S保存没有进行全局刷新
为什么使用var that=this？
在javascript语言中，this代表着当前的对象，它在程序中随着执行的上下文随时会变化。在本例中回调函数对象相对于showactionsheet点击事件函数对象已经发生了变化。所以已经不是原来的页面对象了。自然就没有了data属性，也没有了data.itemLists属性了。解决的办法就是复制一份当前的对象。所以我们有了这个重要的语句：

var that=this;//把this对象复制到临时变量that.

这时候我们使用that 就不会找不到原来的对象了。

console.log(that.data.itemLists[res.tapIndex]);//使用that.data 属性

7、em、rem、vh、vw作用

em
在做手机端的时候经常会用到的做字体的尺寸单位
说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5
但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。
rem
这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
参照后面给的demo
vh
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
vw
vw就是当前屏幕宽度的1%
补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况

8、简单-模态框效果基础版

效果图：
在这里插入图片描述

index.wxml

<view class="mask" catchtouchmove="preventtouchmove" wx:if="{{showmodal}}"></view>

<view class="modaldlg" wx:if="{{showmodal}}">
  <text>欢迎来到模态对话框~</text>
  <button bindtap="go">点我可以关掉对话框</button>
</view>

<button bindtap="submit">点我弹窗</button>

index.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
    showmodal: false
  },
  submit() {
    this.setData({
      showmodal: true
    })
  },
  go(){
    this.setData({
      showmodal: false
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
})

index.wxss

.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  z-index: 9000;
  opacity: 0.7;
}
 
.modaldlg{
  width: 580rpx;
  height: 620rpx;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 9999;
  margin: -370rpx 85rpx;
  background-color: #fff;
  border-radius: 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

9、转换日期，比较日期是否相等

var dateee = new Date(值为标准国际化时间).toJSON(); //国际化时间为2022-12-12T12:12:12
var time1 = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
// time1 样式为 2022-12-12 12:12:12
var date2 = /\d{4}-\d{1,2}-\d{1,2}/g.exec(time1) //去除时分秒 变成2022-12-12

比较日期是否相等
第一种：
if(date1.getTime()date2.getTime()){ … }
第二种：
if(date1-date20){ … }
1.为什么”“判断返回false？
日期对象是引用类型，而非值类型。
引用类型与值类型的区别在于：
值类型的变量：值就保存在栈内存中，访问变量时操作的就是实际的数据值。
引用类型的变量：变量只是保存了一个引用或者说是指针，这个引用或指针指向一个堆内存中的位置，这个位置才是保存了真正的数据值。访问引用性变量时，先从栈中取得这个内存位置，然后找到数据值。
所以用“”比较today和valentine时，比较的不是两个数据值，而是两个不同的引用，这两个引用分别指向两个不同位置的对象，所以返回false。
2.getTime()用法
表示时间距1970年1月1日午夜之间的毫秒数，返回一个整数值，所以可直接比较。
3.date1-date2
返回两个日期相差的毫秒数。

10、js数组添加对象

最常见的方法：push（尾部添加）

arr =[{'num':1},{'num':2},{'num':3}];
 
newArr = arr.push({'num':4})
 
console.log(arr)

unshift（头部添加）

arr =[{'num':3},{'num':4},{'num':5}];
 
newArr = arr.unshift({'num':2})
 
console.log(arr)

使用splice方法插入，比如在索引为1的地方插入对象

arr =[{'num':1},{'num':3},{'num':4}];
 
arr.splice(1, 0, {'id': 2})
 
console.log(arr)

微信小程序之删除数组中的某一个数据
方法一：

const index=accounts.collectId.findIndex(res=>res==carInfo.id)
    if (index!=-1) {
        accounts.collectId.splice(index,1)
    }

代码说明：先用findIndex()找到要删除的数据的下标index，当index!=-1的时候说明数组中存在这个数据，再用splice()来删除数据，splice(index,1)中的1是说只删除该下标对应的数据，如果省略1则会默认删除从index开始往后的所有数据
方法二：
1.如果你的数组是像这样的a:[‘1’,‘2’]，那就可以考虑直接用lodash的_.pull(array, [values])
参数

array (Array): 要修改的数组。
[values] (…*): 要删除的值。

例子：

var array = [1, 2, 3, 1, 2, 3];
 
_.pull(array, 2, 3);
console.log(array);
// => [1, 1]

2.如果你的数组是像这样的a:[{x:1},{x:2}],可以用lodash的_.pullAllBy(array, values, [iteratee=_.identity])
参数

array (Array): 要修改的数组。
values (Array): 要移除值的数组。
[iteratee=_.identity] (Array|Function|Object|string): iteratee（迭代器）调用每个元素。

例子：

var array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }];
 
_.pullAllBy(array, [{ 'x': 1 }, { 'x': 3 }], 'x');
console.log(array);
// => [{ 'x': 2 }]

11、微信小程序实现同时单击、双击、长按

首先，需要在js中定义几个变量

  // 触摸开始时间
  touchStartTime: 0,
  // 触摸结束时间
  touchEndTime: 0,  
  // 最后一次单击事件点击发生时间
  lastTapTime: 0, 
  // 单击事件点击后要触发的函数
  lastTapTimeoutFunc: null,

然后定义两个记录触摸事件的函数

  /// 按钮触摸开始触发的事件
  touchStart: function(e) {
    this.touchStartTime = e.timeStamp
  },

  /// 按钮触摸结束触发的事件
  touchEnd: function(e) {
    this.touchEndTime = e.timeStamp
  },

在界面中需要绑定点击事件的地方，需要加入bindtouchstart 和bindtouchend,以便记录下按钮开始触摸和结束触摸的时间。其他的分别绑定好单击、双击、长按事件就好了。

<!--index.wxml-->
<view class="container">


  <view class = "split"></view>
  <view class = "btn" bindtap="tap" bindtouchstart="touchStart" bindtouchend="touchEnd">
    单击
  </view>


  <view class = "split"></view>
  <view class = "btn" bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
    双击
  </view>


  <view class = "split"></view>
  <view class = "btn" bindlongtap="longTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
    长按
  </view>


  <view class = "split"></view>
  <view class = "btn" bindtap="multipleTap" bindlongtap="longTap" bindtouchstart="touchStart" bindtouchend="touchEnd">
    单击／双击／长按
  </view>

</view>

仅有单击不用做特殊的处理：

  /// 单击
  tap: function(e) {
    var that = this
    wx.showModal({
      title: '提示',
      content: '单击事件被触发',
      showCancel: false
    })
  },

双击和单击并存时的实现，这里实现双击和单击是参考了手机点击网页的300ms延时的方式，原来在iPhone4出来的时候，手机网页比较小，所以iPhone浏览器上加入了双击放大网页的操作，导致网页的点击需要延时300ms才会触发，即300ms内点击两次算双击事件。这里实现是在单击时，将单击事件延迟300ms执行，如果300ms内又有一次点击，则把单击事件取消，然后触发单击事件。

 /// 双击
  doubleTap: function(e) {
    var that = this
    // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
    if (that.touchEndTime - that.touchStartTime < 350) {
      // 当前点击的时间
      var currentTime = e.timeStamp
      var lastTapTime = that.lastTapTime
      // 更新最后一次点击时间
      that.lastTapTime = currentTime

      // 如果两次点击时间在300毫秒内，则认为是双击事件
      if (currentTime - lastTapTime < 300) {
        console.log("double tap")
        // 成功触发双击事件时，取消单击事件的执行
        clearTimeout(that.lastTapTimeoutFunc);
        wx.showModal({
          title: '提示',
          content: '双击事件被触发',
          showCancel: false
        })
      }
    }
  },

单击、双击和长按同时存在的实现：


  /// 长按
  longTap: function(e) {
    console.log("long tap")
    wx.showModal({
      title: '提示',
      content: '长按事件被触发',
      showCancel: false
    })
  },

  /// 单击、双击
  multipleTap: function(e) {
    var that = this
    // 控制点击事件在350ms内触发，加这层判断是为了防止长按时会触发点击事件
    if (that.touchEndTime - that.touchStartTime < 350) {
      // 当前点击的时间
      var currentTime = e.timeStamp
      var lastTapTime = that.lastTapTime
      // 更新最后一次点击时间
      that.lastTapTime = currentTime
      
      // 如果两次点击时间在300毫秒内，则认为是双击事件
      if (currentTime - lastTapTime < 300) {
        console.log("double tap")
        // 成功触发双击事件时，取消单击事件的执行
        clearTimeout(that.lastTapTimeoutFunc);
        wx.showModal({
          title: '提示',
          content: '双击事件被触发',
          showCancel: false
        })
      } else {
        // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
        that.lastTapTimeoutFunc = setTimeout(function () {
          console.log("tap")
          wx.showModal({
            title: '提示',
            content: '单击事件被触发',
            showCancel: false
          })
        }, 300);
      }
    }
  },