首页 / JAVASCRIPT / 微信小程序中悬浮窗功能的实现代码

微信小程序中悬浮窗功能的实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序中悬浮窗功能的实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含12492字，纯文字阅读大概需要18分钟。

内容图文

问题场景

所谓悬浮窗就是图中微信图标的按钮，采用fixed定位，可拖动和点击。

这算是一个比较常见的实现场景了。

微信小程序中悬浮窗功能的实现代码 - 文章图片

为什么要用cover-view做悬浮窗？原生组件出来背锅了~

最初我做悬浮窗用的不是cover-view，而是view。

这是简化的代码结构：

index.wxml:

<view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">
 <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
 </image>
</view>
<textarea placeholder='我是textarea组件，用来输入一些信息'></textarea>
<view>
 一大段test，占个位，表示下存在感
</view>

index.js:

Page({

 /**
 * 页面的初始数据
 */
 data: {
 left: 20,
 top: 250,
 isIos: true
 },
 /**
 * 拖拽移动
 */
 setTouchMove: function (e) {
 if (e.touches[0].clientX > 0 && e.touches[0].clientY > 0) {
  this.setData({
  left: e.touches[0].clientX - 30,
  top: e.touches[0].clientY - 30
  })
 } else {
  this.setData({
  left: 20, //默认显示位置 left距离
  top: 250 //默认显示位置 top距离
  })
 }
 },
 /**
 * 返回首页
 */
 goToHome: () => {
 wx.reLaunch({
  url: '/pages/index/index',
 })
 }
})

为什么要用cover-view呢？

因为页面上有个textarea组件，这个组件是原生组件，当悬浮窗移动到这个textarea组件上时，将无法继续拖动和点击。

如果悬浮窗一开始就定位在textarea上，那么就更惨了，一开始就不能点击和拖动了。

这个原因时因为微信小程序的原生组件层级高于非原生组件，不是你修改几下样式就能解决的问题。

这里就不讲什么原生组件了，如果想进一步了解，可以参考我之前写的一篇博客：微信小程序在ios下Echarts图表不能滑动的解决方案。

如果你的页面上面没有原生组件，那么像上面的代码一样用view做悬浮窗即可。

如果有，那么就可以跟着我继续踩坑，使用cover-view这个原生组件层级的组件来做悬浮窗。

安卓下的cover-view拖动起来，抖得不像帕金森，像是魔鬼的步伐

以下是我们修改为cover-view之后的代码：

<cover-view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">
 <cover-image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
 </cover-image>
</cover-view>
<textarea placeholder='我是textarea组件，用来输入一些信息'></textarea>
<view>
 一大段test，占个位，表示下存在感
</view>

注意这里，我们的image也改为了cover-image，因为cover-view只支持嵌套 cover-view、cover-image，不过可在 cover-view 中使用 button。

这样虽然解决了可在原生组件上自由拖动点击的问题，但是在安卓上出现了一个很奇怪的现象，以至于我认为已经无法用抖动可以来形容了：

微信小程序中悬浮窗功能的实现代码 - 文章图片

上图是就是我滑动这个悬浮窗之后的效果，我只是很缓慢地在移动手指，但是这个悬浮窗的表现简直就像一个受惊的兔子。

当我第一眼看见这个效果的时候一脸懵逼，我都不知道说什么好。

虽然在ios上cover-view移动起来表现良好，但是在安卓上拖动起来的表现简直没法看。

勉强能看的补丁方案

安卓上这么挫，还不如原来的呢。

所以来个补丁方案好了，在ios下用cover-view完美拖动，在安卓上用view先跑着。

<cover-view wx-if="{{isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">
 <cover-image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
 </cover-image>
</cover-view>
<view wx-if="{{!isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove">
 <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
 </image>
</view>
<textarea placeholder='我是textarea组件，用来输入一些信息'></textarea>
<view>
 一大段test，占个位，表示下存在感
</view>

当然少不了要在js里面加上这句代码：

onLoad: function (options) { 

wx.getSystemInfo({
 success: (res) => {
  if (res.platform == "android") {
  this.setData({
   isIos: false
  })
  }
 }
 })
}

不要忘记isIos默认为true哦。

反正ios环境下可以完美使用了，至于安卓下拖到textarea组件上没法再拖的问题，调整下悬浮框的初始位置就好了。

而且只要不是刻意移动到textarea组件上，拖动着悬浮框经过textarea组件也是没有问题的嘛。

像我这么聪明的用户还懂得滑动下面的页面来使悬浮窗移动到非原生组件的地方，这样就又可以拖动了嘛。

你又以为你的测试一定能发现这个问题？发现了又怎样，我已经尽力了，还给你整出这么多理论依据，足够你把锅牢牢地按在微信小程序官方的头上。

使用movable-view：仿佛发现了新大陆，结果发现这个还是个弟弟

甩锅是一定要甩锅的，但是段位要高。

所以要遍查官方文档，探讨一切可能性，以免甩锅的时候被打脸。

我们仔细观察小程序官方文档，发现还是有个专门用来拖动的组件叫movable-view。

这个组件和cover-view摆放在一起仿佛很厉害的样子，紧接着我们在原生组件使用限制文档中发现了它并不是原生组件。

也就是说这个东西的层级一定还是低于咱们的textarea组件的。

虽然已经很确定这个东西没什么用了，但是最后还是试探一把，结果发现是个真弟弟，这里就不给出代码了。

我写这个弟弟方案放在这里的目的主要是为了不要浪费你的验证时间。

理论上行得通的方案：将拖动事件的捕获放在父级

现在我们确认的最优甩锅方案里，已经实现了功能和甩锅两不误。

那么作为一名有追求的技术人员，还是需要去探讨以下这个问题到底有没有完美的解决方案。

因为我最开始是把这个悬浮窗做成了一个组件，那么作为组件来讲，这个东西就只能做到这个地步了。

不过如果你是像我现在的例子一样直接做在了页面里，那么实现起来也不是说没有办法的。

我们将拖动的事件放在父级上就可以了，请看接下来的代码：

index.wxml:

<view bindtouchmove="setTouchMove">
 <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome">
  <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
  </image>
 </view>
 <textarea placeholder='我是textarea组件，用来输入一些信息'></textarea>
 <view>
  一大段test，占个位，表示下存在感
 </view>
</view>

index.js:

Page({

 /**
 * 页面的初始数据
 */
 data: {
 left: 20,
 top: 250
 },

 /**
 * 拖拽移动
 */
 setTouchMove: function (e) {
 const MOVE_VIEW_RADIUS = 30 // 悬浮窗半径

 const touchPosX = e.touches[0].clientX
 const touchPosY = e.touches[0].clientY

 const moveViewCenterPosX = this.data.left + MOVE_VIEW_RADIUS
 const moveViewCenterPosY = this.data.top + MOVE_VIEW_RADIUS

 // 确保手指在悬浮窗上才可以移动
 if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS + 60 && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS + 60) {
  if (touchPosX > 0 && touchPosY > 0) {
  this.setData({
   left: touchPosX - MOVE_VIEW_RADIUS,
   top: touchPosY - MOVE_VIEW_RADIUS
  })
  } else {
  this.setData({
   left: 20, // 默认显示位置 left距离
   top: 250 // 默认显示位置 top距离
  })
  }
 }
 },
 /**
 * 返回首页
 */
 goToHome: () => {
 wx.reLaunch({
  url: '/pages/index/index',
 })
 }
})

关键代码就是这块了：

// 确保手指在悬浮窗上才可以移动
if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS + 60 && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS + 60) {

}

只要确保手指在悬浮窗的范围内就可以触发移动了，这里的60是为了确保你的手指太大，或者移动得比较快时超出了悬浮窗区域依然可以触发拖动，这个可以自己设定数值。

这个方案在理论上很合理，并且还加上了60这个缓冲区域，但是实际在拖动的时候你仍然会面临下面三个问题：

1.如果悬浮窗下方有滚动区域，那么拖动的时候就会滚动页面，效果会显得比较奇怪。
2.实际移动没法移动太顺畅，只能拖着悬浮窗亦步亦趋,要不然很容易超过60这个缓冲区域，导致拖动不继续触发。
2.如果将缓冲区域设置过大，那么又会出现一种比较奇怪的场景：明明不准备拖动悬浮窗，只是准备滑动页面，悬浮窗却跳到自己手指这里了。

进阶解决方案：禁止冒泡的拖动 + 理论方案

这个解决方案基于我们的最初方案，并且使用我们的理论方案作为补充。

先上代码：

index.wxml：
<view bindtouchmove="handleSetMoveViewPos">
 <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="handleTouchMove">
  <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
  </image>
 </view>
 <textarea placeholder='我是textarea组件，用来输入一些信息'></textarea>
 <view>
  一大段test，占个位，表示下存在感
 </view>
</view>

index.js：
Page({
 /**
 * 页面的初始数据
 */
 data: {
 left: 20,
 top: 250
 },
 /**
 * 拖拽移动(补丁)
 */
 handleSetMoveViewPos: function (e) {
 const MOVE_VIEW_RADIUS = 30 // 悬浮窗半径

 const touchPosX = e.touches[0].clientX
 const touchPosY = e.touches[0].clientY

 const moveViewCenterPosX = this.data.left + MOVE_VIEW_RADIUS
 const moveViewCenterPosY = this.data.top + MOVE_VIEW_RADIUS

 // 确保手指在悬浮窗上才可以移动
 if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS+30 && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS+30 ) {
  if (touchPosX > 0 && touchPosY > 0) {
  this.setData({
   left: touchPosX - MOVE_VIEW_RADIUS,
   top: touchPosY - MOVE_VIEW_RADIUS
  })
  } else {
  this.setData({
   left: 20, // 默认显示位置 left距离
   top: 250 // 默认显示位置 top距离
  })
  }
 }
 },
 /**
 * 拖拽移动
 */
 handleTouchMove: function (e) {
 const MOVE_VIEW_RADIUS = 30 // 悬浮窗半径

 const touchPosX = e.touches[0].clientX
 const touchPosY = e.touches[0].clientY

 if (touchPosX > 0 && touchPosY > 0) {
  this.setData({
  left: touchPosX - MOVE_VIEW_RADIUS,
  top: touchPosY - MOVE_VIEW_RADIUS
  })
 } else {
  this.setData({
  left: 20, //默认显示位置 left距离
  top: 250 //默认显示位置 top距离
  })
 }
 },
 /**
 * 返回首页
 */
 goToHome: () => {
 wx.reLaunch({
  url: '/pages/index/index',
 })
 }
})

这个方案的核心点在于：catchtouchmove="handleTouchMove" 。

当我们正常拖动悬浮窗时，通过catchtouchmove，我们可以捕获在悬浮窗上的滑动事件，并且不冒泡到父元素，那么我们绑在父层级的滑动事件就不会触发。

而当我们拖动在原生组件之上的悬浮窗时，因为点不到这个悬浮窗，就不会触发handleTouchMove函数，只会触发绑定在父元素上的handleSetMoveViewPos函数。

另外如果你细心的话，就会发现在handleSetMoveViewPos函数这里我缩小了那个60的缓冲区域为30，这样做的目的是因为触发这个函数只会在原生组件上，所以多番权衡距离之后，尽量避免近距离滑动操作就触发拖动悬浮框。

通过我们的方案，我们可以在非原生组件上自由拖动，在原生组件上比较顺畅地拖动。

本来我是准备将这个方案作为最终方案的，但是ios下，悬浮窗在原生组件上时，在父元素上的滑动事件竟然不触发。

棋差一招，棋差一招啊！

最终解决方案：更多的补丁，更多的快乐

这个最终解决方案，当然是把我们之前所有的补丁方案全部结合起来。

代码如下：

index.wxml:
<view bindtouchmove="handleSetMoveViewPos">
 <view wx-if="{{!isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="handleTouchMove">
  <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
  </image>
 </view>
 <cover-view wx-if="{{isIos}}" class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="handleTouchMove">
  <cover-image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56">
  </cover-image>
 </cover-view>
 <textarea placeholder='我是textarea组件，用来输入一些信息'></textarea>
 <view>
  一大段test，占个位，表示下存在感
 </view>
</view>

index.js:
Page({

 /**
 * 页面的初始数据
 */
 data: {
 left: 20,
 top: 250,
 isIos: true
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 wx.getSystemInfo({
  success: (res) => {
  if (res.platform == "android") {
   this.setData({
   isIos: false
   })
  }
  }
 })
 },

 /**
 * 拖拽移动(补丁)
 */
 handleSetMoveViewPos: function (e) {
 // 在ios下永远都不会走这个方案，以免引起无用的计算
 if (!ios) {
  const MOVE_VIEW_RADIUS = 30 // 悬浮窗半径

  const touchPosX = e.touches[0].clientX
  const touchPosY = e.touches[0].clientY

  const moveViewCenterPosX = this.data.left + MOVE_VIEW_RADIUS
  const moveViewCenterPosY = this.data.top + MOVE_VIEW_RADIUS

  // 确保手指在悬浮窗上才可以移动
  if (Math.abs(moveViewCenterPosX - touchPosX) < MOVE_VIEW_RADIUS && Math.abs(moveViewCenterPosY - touchPosY) < MOVE_VIEW_RADIUS) {
  if (touchPosX > 0 && touchPosY > 0) {
   this.setData({
   left: touchPosX - MOVE_VIEW_RADIUS,
   top: touchPosY - MOVE_VIEW_RADIUS
   })
  } else {
   this.setData({
   left: 20, // 默认显示位置 left距离
   top: 250 // 默认显示位置 top距离
   })
  }
  }
 }
 },
 /**
 * 拖拽移动
 */
 handleTouchMove: function (e) {
 const MOVE_VIEW_RADIUS = 30 // 悬浮窗半径

 const touchPosX = e.touches[0].clientX
 const touchPosY = e.touches[0].clientY

 if (touchPosX > 0 && touchPosY > 0) {
  this.setData({
  left: touchPosX - MOVE_VIEW_RADIUS,
  top: touchPosY - MOVE_VIEW_RADIUS
  })
 } else {
  this.setData({
  left: 20, //默认显示位置 left距离
  top: 250 //默认显示位置 top距离
  })
 }
 },
 /**
 * 返回首页
 */
 goToHome: () => {
 wx.reLaunch({
  url: '/pages/index/index',
 })
 }
})

这个最终解决方案在ios下直接使用cover-view来做悬浮窗，而在android的非原生组件上移动时，使用view来做悬浮窗，不冒泡滑动事件，在原生组件上移动时捕获冒泡的滑动事件来继续移动操作。

总结

虽然问题解决了，但是这仍然只是一个补丁方案。

最好的方式依然是微信小程序官方能修复cover-view在安卓移动时的BUG，但是我发现最早有人反馈这个问题是在2018年11月，到了现在2019年8月都没有结果。

如果不是微信小程序的官方态度有问题，那么只能说明这个问题的解决确实有难度或者优先级并不高，无论是哪一种，暂时都还是得用补丁方案。

这个方案并没有那么完美，他在一些边界的衔接上面可能还是会存在一些小问题，但它至少可用，并且应该是大多数用户可以接受的。

以上所述是小编给大家介绍的微信小程序中悬浮窗功能的实现 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

内容总结

以上是互联网集市为您收集整理的微信小程序中悬浮窗功能的实现代码全部内容，希望文章能够帮你解决微信小程序中悬浮窗功能的实现代码所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/330351.html

来源：【匿名】

【上一篇】小程序中英文混合排序问题解决【下一篇】javascript 怎么调用php方法

更多 ►

【微信小程序中悬浮窗功能的实现代码】教程文章相关的互联网学习教程文章

微信小程序缓存过期时间的使用详情

关于本地缓存 1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB 2.localStorage 是永久存储相应的api---------- wx.setStorage(OBJECT) wx.getStorage(OBJECT) wx.getStorageInfo(OBJECT) wx.removeStorage(OBJECT) wx.setStorageSync(KEY,DATA) wx.getStorageSync(KEY) wx.getStorageInfoSync wx.c...

详解微信小程序缓存--缓存时效性

微信小程序如何修改本地缓存key中单个数据的详解【图】

最近在做教师评教系统，有一个‘个人信息页面中有个编辑修改邮箱的功能，本来想得很简单，结果进坑了，搞了好久才出来。我想实现的效果是点击下图左侧邮箱，然后进入右侧页面，进行邮箱的修改，点击提交后跳转到左侧页面，同时邮箱也发生改变。点击‘我的时，我让它从控制台打印出student缓存中传过来的数据，如下： {no: "1635050601", name: "张三", sex: "", email: "123@qq.com", classid: "100000-1602", …} classid:"10000...

微信小程序缓存（本地缓存、异步缓存、同步缓存）详解

微信小程序缓存关于本地缓存 1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB 2.localStorage 是永久存储一、异步缓存 wx.setStorage(OBJECT) 将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容 wx.setStorage({key:"key",data:"value"})wx.getStorage(OBJECT) 从本地缓存中异...

微信小程序-详解数据缓存【图】

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB。注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。 wx.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的...

微信小程序基于本地缓存实现点赞功能的方法

本文实例讲述了微信小程序基于本地缓存实现点赞功能的方法。分享给大家供大家参考，具体如下： wxml中的写法注意： 1. 使用wx:if="{{condition}}" wx:else实现图标的切换效果； 2. 为图片绑定点击事件bindtap="toCollect"，两个image标签都要绑定！ <image wx:if="{{collection}}" src="/images/icon/pic1.png" bindtap="toCollect"></image> <image wx:else src="/images/icon/pic2.png" bindtap="toCollect"></image>js中的写法...

微信小程序之数据缓存的实例详解【图】

微信小程序之数据缓存的实例详解前言：在H5之前，缓存一般都是用cookie，但是cookie的存储空间太小。于是，H5增加了新的缓存机制，即localstorage 和 sessionstorage，具体的介绍就不在多说。在微信小程序中，数据缓存其实就和localstorage 的原理差不多，所以理解起来并不难。下面我们来一起实现一下。效果图展示：我们在index页面存入数字11，然后在跳转到新页面，在将缓存中的11取出渲染到当前页面。具体代码如下： index页...

微信小程序实现缓存根据不同的id来进行设置和读取缓存【图】

本文是根据不同的id来进行设置和读取缓存，是同步缓存的方式： jonNums.count 是接口返回的数据是报名总人数newNumber 新的报名总人数 - 缓存上次的报名总人数 = 新增报名人数onLoad: function (options) { var that = this; var activityId = options.activityId; //报名表人数统计 wx.request({ url: domain + /activityjoin/selectJoinCount, data: { activityId: activityId }, method: GET, success: function (res) { var...

微信小程序本地缓存数据增删改查实例详解

微信小程序本地缓存数据增删改查实例详解数据如： var user = { name: Lion, sex: guy } CRUD： // 添加 wx.setStorageSync(user, user);// 查询 var developer = (wx.getStorageSync(user) || []);// 更改 developer.name = Lion01; wx.setStorageSync(user, user);// 删除 wx.removeStorage({key: user })感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序实现写入读取缓存详解

在小程序中有些需要把数据缓存到Storage中，需要的时候在读取缓存中的数据，在微信小程序中通过setStorage写入数据： wx.setStorage({key: myData,data: res.data.data })通过getStorage读取缓存中的数据： var that = this;wx.getStorage({key: myData,success: function (res) {var myData = res.data;//读取key值为myData的缓存数据that.setData({//拿到缓存中的数据并渲染到页面userName: myData.user.truename,schoolName: my...

微信小程序数据缓存实现方法详解

微信小程序可以通过wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）对本地缓存进行设置、获取和清理。本地缓存最大为10MB。 wx.setStorage()---------异步设置缓存微信官方给出的属性 OBJECT参数说明：参数类型必填说明keyString是本地缓存中的指定的 keydataObject/String是需要存储的内容successFunction否接口调用成功的回调函数failFunction否接口调用失败...

微信小程序学习笔记之本地数据缓存功能详解【图】

本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考，具体如下：前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微信小程序的本地数据缓存功能。【将数据存储在本地缓存】wx.setStorage 【读取本地缓存】wx.getStorage 以手机号+密码登录为例，把登录成功返回的token值存储在本地缓存中，然后读取缓存中的token： login.php： <?php header("Content-type:text/html;charset=utf-8");$arr = arr...

在微信小程序中如何使用switch开关选择器【图】

这篇文章主要为大家详细介绍了微信小程序switch开关选择器的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文为大家分享了微信小程序switch开关选择器使用方法，供大家参考，具体内容如下效果图WXML<view class="tui-list-box"><view class="tui-menu-list"><text>状态：{{isChecked1}}</text><switch class="tui-fr" checked="{{isChecked1}}" bindchange="changeSwitch1"/></view><view class="tui-menu-list"><text...

微信小程序数据交互与渲染实例详解【图】

微信小程序数据交互与渲染实现效果图：微信小程序的api中提供了网络交互的api，我们只要调用即可和后端进行数据交互，该api为wx.request.，具体代码如下。//list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: }, loadList: function () { var that = this; that.setData({ hiddenLoading: !that.data.hiddenLoading }) var url = app.urls.CloudData.getList; that.setData({ u...

微信小程序实现传递多个参数与事件处理

前言开发过程中经常会遇到从一个页面携带数据到另一个页面的情况，所以需要知道以下信息，什么是事件？有哪些传递方式？如果传递数组呢？如果传递对象呢？一、事件什么是事件事件是视图层到逻辑层的通讯方式事件可以将用户的行为反馈到逻辑层进行处理事件可以绑定在组件上，当达到触发事件，就会执行逻辑层对应的事件处理函数事件对象可以携带额外信息，如id, dataset, touches事件处理的使用通过在wxml中设置bindtap、catchtap...

首页 / JAVASCRIPT / 微信小程序中悬浮窗功能的实现代码

微信小程序中悬浮窗功能的实现代码

内容导读

内容图文

内容总结

内容备注

内容手机端

【微信小程序中悬浮窗功能的实现代码】教程文章相关的互联网学习教程文章

程序 - 相关标签

功能 - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程