前端css样式小知识点(2)

前言

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

图文实操讲解

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-date2
0){ … }
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])
参数

  1. array (Array): 要修改的数组。
  2. [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])
参数

  1. array (Array): 要修改的数组。
  2. values (Array): 要移除值的数组。
  3. [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);
      }
    }
  },

12、微信小程序setInterval定时函数使用

①setInterval的理解
setInterval定时函数,就是延迟多长时间不停的调用 setInterval中的函数。
重点是setInterval组成,setInterval(function () {},时间)。function () {}就是不停执行函数,时间就是延迟多久不断地执行,重点function () {}函数。
具体案例:

var interval = setInterval(function () {  
   
   }, 1000) //循环间隔 单位ms

②setInterval需要关闭
使用clearInterval()去关闭,具体使用看下面的内容

clearInterval(interval)

③setInterval具体使用

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this;
    interval = setInterval(function() {
      that.myDemo(); // 自己定义的方法,进行调用
      console.log("5秒了----------------------------------------------------")
    }, 3000)
  },
 
 
/**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
    clearInterval(interval)
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    clearInterval(interval)
  },

持续更新
在这里插入图片描述

各位看官》创作不易,点个赞!!!
诸君共勉:万事开头难,只愿肯放弃。

免责声明:本文章仅用于学习参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值