- wx:for循环数组可以一次取两条数据吗?
我想在页面一行显示两组数据,wx:for循环 是一次是取一组显示,有什么其他解决方案吗。 例如: 同学A 男 同学B 女 同学C 男 同学D 女 同学E 男 同学F 女 同学G 男 同学H 女 同学I 女
2018-12-26 - 微信小程序答题页 swiper分页 极简
因为最近要写个做题页面,要求左右滑动切换页面。题目数量三位数会导致swiper卡顿严重,找了下相关文章没有发现合适的,就自己写了下。 实现功能 1、可以加载大量数据 2、跳转任意index 3、实现代码简单,方便复用 [图片] 直接帖代码 // pages/swiper/swiper.js Page({ /** * 页面的初始数据 */ data: { dataList: [], //实际数据 list: [], //展示数据 currentIndex: 0, //真实的index current: 0, //swiper当前的index recordCurrent: 0, //swiper上次的index duration: 300 //动画时常 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { for (let i = 0; i < 1000; ++i) { this.data.dataList.push(i) } this.setData({ dataList: this.data.dataList }) this.upSwiper(0) }, animationfinish({ detail }) { // 用户滑动 if (detail.source == "touch") { // 滑动后的index this.upSwiper(this.data.currentIndex + detail.current - this.data.recordCurrent) } }, upSwiper(index) { // 防止越界 if (index < 0 || index >= this.data.dataList.length) { return } this.setData({ currentIndex: index }) // 更新数据 let list = [] for (let i = this.data.currentIndex - 1; i <= this.data.currentIndex + 1; ++i) { let item = this.data.dataList[i] if (typeof (item) !== "undefined") { list.push(item) } } let current = 0; // 只要不是第一个页面 current都是1 if (index != 0) { current = 1 } // 取消动画 this.setData({ duration: 0 }) // current 和 list要同时更新,不然数据会闪 this.setData({ current: current, recordCurrent: current, duration: 300, list }) }, tap(ev) { let index = ev.currentTarget.dataset.index this.upSwiper(index) } }) <!--pages/swiper/swiper.wxml--> <swiper id="swiper" current="{{current}}" duration="{{duration}}" bindanimationfinish="animationfinish"> <swiper-item wx:for="{{list}}" wx:for-item="ee"> <view wx:for="{{20}}">{{ee}}</view> </swiper-item> </swiper> <view class="but-z"><button catchtap="tap" data-index="{{0}}">0</button> <button catchtap="tap" data-index="{{5}}">5</button> <button catchtap="tap" data-index="{{dataList.length-1}}">{{dataList.length-1}}</button> </view> /* pages/swiper/swiper.wxss */ #swiper { width: 100vw; height: 100vh; } .but-z { position: fixed; bottom: 20px; height: 40px; width: 100vw; display: flex } button { background-color: red; width: 100rpx !important; text-align: center; }
2021-12-14 - 已解决-小程序数据库开放『所有人可读写权限』
- 需求的场景描述(希望解决的问题) 云开发使用非关系型数据库,业务逻辑需要在不同的表进行冗余,在更新的时候要更新不同的表。但有些内容是非创建者创建的,按目前数据库的权限设置,创建者无法更新其它非创建者的数据内容,对开发者来说是非头痛的。云数据库简直就没法可用。 - 希望提供的能力 数据库权限提供『所有人可读写』权限
2019-06-11 - reportRealtimeAction:fail not support 为什么会报这个警告?
reportRealtimeAction:fail not support 为什么会报这个警告? [图片]
2022-04-15 - 微信小程序中的form表单数据如何获取
知晓程序员,专注微信小程序开发的程序员! 前言:微信小程序中,form表单提交是比较常见的,今天来说一下form表单提交时,该如何获取表单项的数据。 知识点: A、做过小程序的同学,都知道小程序中是通过数据渲染页面的,没办法获取dom节点,表单提交就不能像H5页面那样去获取表单项的见容了。 B、小程序中的表单提交必须用户手动触发,不能通过JS自动提交~ 获取表单数据有两种方式 一、获取event中的值 正常的form表单提交,都可以在event.detail.value中获取到页面表单项填写的值,如下: [图片] 这里需要在wxml中的,把input,textarea,radio等表单项设置name属性,上图中的title,就是input的name属性~ <input type="text" name="title" auto-focus='true' /> 这种方式获取表单数据很方便,但是,如果需要对表单数据有清除功能,我们该如何实现呢?如下图: [图片] 我们先来看看第二种方式~ 二、通过设置变量值保存表单数据 这种方式也比较好实现,就是给表单项绑定事件,当内容发生变化时,set一下变量值。所以,提交表单的时候直接获取变量值就OK了~ <input type="text" bindinput="inputTitle" name="title" value="{{title}}" auto-focus='true' /> 可以给input绑定事件(bindinput="inputTitle"),然后在inputTitle里面简单处理一下: inputTitle: function (e) { this.setData({ title: e.detail.value, titleEmpty: e.detail.value.length == 0 }) }, 上面的titleEmpty是为了判断title是否为空,如果为空,就不显示右侧的"清除icon"。这种方式很容易实现上面说的清空内容~ 在form的submit时,直接var title = this.data.title; 就获取到了表单数据,很方便~ 《END》 [图片]
2018-01-16 - 请教lookup如何查询数组中的对象?
表一: "_id":"2a0398605f1114*****d69a167ebf9ed" "alist":[{id:1},{id:2},{id:3}] 表二: "_id":"1" "name":"A" "aAid":100 ------------ "_id":"2" "name":"B" "aAid":101 -------------- "_id":"3" "name":"C" "aAid":200 这样的两张表,如何能聚合查询。吧aAid和alist数组中对象的id对应
2023-07-14 - 请问微信小程序pc端有没有对应的鼠标hover事件?
如题
2023-03-10 - 选择地理位置接口调整公告
各位开发者: 为确保选择地理位置接口的合理使用,自 2022 年 6 月 13 日起,wx.choosePoi 和 wx.chooseLocation 接口规则进行以下调整: wx.choosePoi 和 wx.chooseLocation 接口的使用将不再需要用户授权 scope.userLocation,满足使用条件的开发者可直接调用,详情可访问 授权;若开发者调用 wx.choosePoi 和 wx.chooseLocation 接口,需在小程序用户隐私保护指引中,声明收集用户选择的位置信息的目的,详情可访问 用户隐私保护指引填写说明;wx.choosePoi 接口的回调信息中,latitude 和 longitude 字段将不返回真实的经纬度信息,全部返回 ( 0 , 0 ),详情可访问 接口文档。 以上调整将对所有小程序、小游戏和插件生效。 微信团队 2022年5月13日
2022-05-13 - 小程序云开发模糊查询,实现数据库多字段的模糊搜索
最近做小程序云开发时,用到了一个数据库的模糊搜索功能,并且是要求多字段的模糊搜索。 网上也有一大堆资源,但是都是单个字段的搜索。如下图 [图片] 上图只可以实现time字段的模糊搜索。但是我们如果相对数据表里的多个字段做模糊查询呢?该怎么办呢。 多字段模糊搜索 一,如我们的数据表里有以下数据,我们想同时模糊查询name和address字段 [图片] [图片] 如我们搜索“周杰”可以看到我们查询到下面两条数据。 [图片] 二,如我们搜索“编程”,可以搜索到下面数据 [图片] 可以看到我们搜索到的两条数据,一个是name字段为 编程小石头, 一个是address字段里包含“编程“ 字样。 下面把代码贴给大家 [代码] let key = "编程小石头"; console.log("查询的内容", key) const db = wx.cloud.database(); const _ = db.command db.collection('qcl').where(_.or([{ name: db.RegExp({ regexp: '.*' + key, options: 'i', }) }, { address: db.RegExp({ regexp: '.*' + key, options: 'i', }) } ])).get({ success: res => { console.log(res) }, fail: err => { console.log(err) } }) [代码] key就是我们要搜索的关键字。主要是用到了数据库查询的where,or,get方法。 代码都给大家贴出来来,如果对云开发和云数据库还不是很了解的同学可以去翻看下我以前写的文章。
2019-11-06 - 云函数中两个日期字段db.serverDate格式不能直接进行比较吗?
云函数集合表使用查询条件{createDate:db.command.gte(inputDate)},两个日期都是存入的db.serverDate()格式,拿掉这个条件就能返回数据,加上就没有数据,但是确定有符合这个条件的记录,有没有其他办法呢,谢谢
01-31 - 小程序中如何正确删除数组中的指定索引的数据
适应场景:购物车清空、删除某一商品及类似此种操作。 主要使用 JavaScript数组的一个方法 array.splice() 具体使用为: 示例: var array = [“张三”,“李四”,“王五”,“赵云”]; //删除王五(索引值为:2) array.splice(2,1); 输出数组array的结果为: [“张三”,“李四”,“赵云”] 注释: 此方法的第一个参数的含有为:删除数组元素的起始索引 第二个参数的含义为:删除数组元素从起始索引开始需要删除的长度 示例的意义参照上述描述,该语句 array.splice(2,1)含义为 从索引2开始,删除长度为1。 下面阐述在小程序中如何操作。 1、先看代码【其中index的值为“删除数组元素的起始索引”】 [图片] 2、执行结果【其中index的值为“删除数组元素的起始索引”】 [图片] 执行数组删除时,此种方案最好,不需要再向后台重复请求数据。
2019-11-18 - wx.getlocation获取当前位置返回上次位置?
小米10s用户反馈wx.getlocation获取当前位置返回上次位置, 从A地乘车到B地, 中间相隔15公里, 到达B地后, 获取位置信息为A地, 重新打开小程序获取地点仍为A地, 打卡腾讯地图小程序后, 再打开定位小程序, 位置才为B地 ;
2022-04-15 - 社区每周 |位置接口增加频率限制、服务商小程序新能力、新版众测及上周问题反馈(3.08-3.12)
各位微信开发者: 以下是getLocation增加调用频率限制、服务商小程序风险用户扫码能力公测启动、IOS和安卓新版众测及上周我们在社区收到的问题反馈的处理进度,希望同大家一同打造小程序生态。 getLocation增加调用频率限制 当前小程序频繁调用wx.getLocation接口会导致用户手机电量消耗较快,请开发者改为使用持续定位接口wx.onLocationChange,该接口会固定频率回调,使用效果与跟频繁调用getLocation一致。 从基础库2.17.0版本起(预计发布时间2021.4.9),将对getLocation接口增加频率限制,包括: 在开发版或体验版中,30秒内调用getLocation,仅第一次有效,剩余返回与第一次定位相同的信息。正式版中,为保证小程序正常运行同时不过度消耗用户电量,一定时间内(根据设备情况判断)调用getLocation,仅第一次会返回实时定位信息,剩余返回与第一次定位相同的信息。未做好兼容调整可能会影响用户体验,请开发者尽快适配。 服务商小程序风险用户扫描能力公测启动 为提高微信开放平台生态安全性,针对小程序各应用场景中可能存在的恶意注册、营销作弊等黑产风险和安全问题,平台将通过开放API的方式向服务商提供快速查询风险用户的接口,协助服务商保障小程序正常安全运营。 目前风险用户扫描接口支持以下两种应用场景: 1. 营销作弊场景:在首单优惠和特价优惠等营销活动中有效识别刷单、虚假交易、恶意骗保骗补贴等破坏运营秩序和安全的行为。 2. 恶意注册:识别并拦截机器批量注册、垃圾小号、伪造身份等恶意注册行为。 接口具体功能介绍请参考《小程序风险用户扫描功能介绍》。 接入指引及详细信息参考原公告:《服务商小程序风险用户扫描能力公测启动》 微信团队邀请开发者参与内部体验(安卓微信8.0.2) 本次更新概要如下小程序 video组件相关优化需关注地理位置等授权是否正常需关注临时文件相关功能是否正常需关注文件存储空间限制相关是否正常live-pusher组件相关bugfix,需关注麦克风相关功能是否正常蓝牙相关bugfix,需关注蓝牙扫描相关功能是否正常部分重构WebGL组件,需关注WebGL组件渲染是否正常小游戏 (重要)灰度期间尝试支持etc2和astc压缩格式,需关注游戏渲染是否正常优化uniformMatrix效率,需关注游戏运行性能部分重构渲染组件,需关注Touch事件等是否正常请基于以下提供的资源体验。使用过程中若发现问题,欢迎点击进入微信开放社区 #微信客户端内测 主页发表标题包含「微信8.0.2」的问答帖子反馈交流。 [图片] (扫描二维码下载) 如有需要,可查看并转发原公告:《微信团队邀请开发者参与内部体验(安卓微信8.0.2)》 微信团队邀请开发者参与内部体验(iOS微信8.0.3) 本次更新概要如下小程序: 文件系统底层重构,请关注相关接口是否受影响;小游戏: ATSC压缩纹理的支持;* 体验需识别下方二维码报名,若报名成功,则一天内会收到内测推送,内测名额8000人 [图片] 请基于以上提供的资源体验。使用过程中若发现问题,欢迎点击进入微信开放社区 #微信客户端内测 主页发表标题包含「微信iOS 8.0.3」的问答帖子反馈交流,发帖时建议提供以下信息方便定位问题: 1.手机型号 2.手机操作系统版本 3.必要时可提供代码片段 如有需要,可查看并转发原公告:《微信团队邀请开发者参与(iOS微信8.0.3内部体验)》 上周问题反馈和处理进度(3.08-3.12) 已修复的问题云开发-内容管理-短信统计分析数据一直为空的问题 查看详情 关联小程序提示:系统繁忙,请稍后重试(200003)的问题 查看详情 开发工具后控制台报(define,require)2个错误的问题 查看详情 修复中的问题 textarea maxlength 未阻止在中间输入 查看详情 previewImage 在安卓机无法预览,一直 loading 查看详情 ios 直接调hideLoading 没有触发回调 查看详情 安卓机下input输入框收起键盘之类的操作会多触发一次input事件 查看详情 iOS video 小窗模式 收不到bindended和bindtimeupdate的事件 查看详情 安卓performance中的firstRenderrender耗时偶现负数 查看详情 ios wx.previewMedia本地视频点击无法播放 查看详情 微信团队 2021.3.19
06-13 - [打怪升级]小程序自定义头部导航栏“完美”解决方案
[图片] 为什么要做这个? 主要是在项目中,智酷君发现的一些问题 一些页面是通过扫码和订阅消息访问后,没有直接可以点击去首页的,需要添加一个home链接 需要添加自定义搜索功能 需要自定义一些功能按钮 [图片] 其实,第一个问题,在最近的微信版本更新中已经优化了,通过 小程序模板消息 过来的,系统会自动加上home按钮,但对于其他的访问方式则没有支持~ 一个不大不小的问题:两边ICON不对齐问题 [图片] 智酷君之前尝试了各种解决方法,发现有一个问题,就是现在手机屏幕太多种多样,有 传统头部、宽/窄刘海屏、水滴屏等等,无法八门,很多解决方案都无法解决特殊头部,系统**“胶囊按钮”** 和 自定义按钮在Android屏幕可能有 几像素不对齐 的问题(强迫症的噩梦)。 下面分享下一个相对比较完善的解决方案: [图片] 小程序代码段DEMO Link: https://developers.weixin.qq.com/s/cuUaCimT72cH ID: cuUaCimT72cH 智酷君做了一个demo代码段,方便大家直接用IDE工具查看源码~ [图片] 页面配置 1、页面JSON配置 [代码]{ "usingComponents": { "NavComponent": "/components/nav/common" //以插件的方式引入 }, "navigationStyle": "custom" //自定义头部需要设置 } [代码] 如果需要自定义头部,需要设置navigationStyle为 “custom” 2、页面代码 [代码]<!-- home 类型的菜单 --> <NavComponent v-title="自定义头部" bind:commonNavAttr="commonNavAttr"></NavComponent> <!-- 搜索菜单 --> <NavComponent is-search="true" bind:commonNavAttr="commonNavAttr"></NavComponent> [代码] 可以在自定义导航标签上添加属性配置来设置功能,具体按照实际需要来 3、目录结构 [代码]│ ├─components │ └─nav │ common.js │ common.json │ common.wxml │ common.wxss │ ├─images │ back.png │ home.png │ └─index index.js index.json index.wxml index.wxss search.js search.json search.wxml search.wxss [代码] 仅供参考 插件对应的JS部分 components/nav/common.js部分 [代码]const app = getApp(); Component({ properties: { vTitle: { type: String, value: "" }, isSearch:{ type: Boolean, value: false } }, data: { haveBack: true, // 是否有返回按钮,true 有 false 没有 若从分享页进入则没有返回按钮 statusBarHeight: 0, // 状态栏高度 navbarHeight: 0, // 顶部导航栏高度 navbarBtn: { // 胶囊位置信息 height: 0, width: 0, top: 0, bottom: 0, right: 0 }, cusnavH: 0, //title高度 }, // 微信7.0.0支持wx.getMenuButtonBoundingClientRect()获得胶囊按钮高度 attached: function () { if (!app.globalData.systeminfo) { app.globalData.systeminfo = wx.getSystemInfoSync(); } if (!app.globalData.headerBtnPosi) app.globalData.headerBtnPosi = wx.getMenuButtonBoundingClientRect(); console.log(app.globalData) let statusBarHeight = app.globalData.systeminfo.statusBarHeight // 状态栏高度 let headerPosi = app.globalData.headerBtnPosi // 胶囊位置信息 console.log(statusBarHeight) console.log(headerPosi) let btnPosi = { // 胶囊实际位置,坐标信息不是左上角原点 height: headerPosi.height, width: headerPosi.width, top: headerPosi.top - statusBarHeight, // 胶囊top - 状态栏高度 bottom: headerPosi.bottom - headerPosi.height - statusBarHeight, // 胶囊bottom - 胶囊height - 状态栏height (胶囊实际bottom 为距离导航栏底部的长度) right: app.globalData.systeminfo.windowWidth - headerPosi.right // 这里不能获取 屏幕宽度,PC端打开小程序会有BUG,要获取窗口高度 - 胶囊right } let haveBack; if (getCurrentPages().length != 1) { // 当只有一个页面时,并且是从分享页进入 haveBack = false; } else { haveBack = true; } var cusnavH = btnPosi.height + btnPosi.top + btnPosi.bottom // 导航高度 console.log( app.globalData.systeminfo.windowWidth, headerPosi.width) this.setData({ haveBack: haveBack, // 获取是否是通过分享进入的小程序 statusBarHeight: statusBarHeight, navbarHeight: headerPosi.bottom + btnPosi.bottom, // 胶囊bottom + 胶囊实际bottom navbarBtn: btnPosi, cusnavH: cusnavH }); //将实际nav高度传给父类页面 this.triggerEvent('commonNavAttr',{ height: headerPosi.bottom + btnPosi.bottom }); }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, bindKeyInput:function(e){ console.log(e.detail.value); } } }) [代码] 解决不同屏幕头部不对齐问题的终极办法是 wx.getMenuButtonBoundingClientRect() 这个方法从微信7.0.0开始支持,通过这个方法我们可以获取到右边系统胶囊的top、height、right等属性,这样无论是水滴屏、刘海屏、异形屏,都能完美对齐右边系统默认的胶囊bar,完美治愈强迫症~ APP.js 部分 [代码]//app.js App({ /** * 加载页面 * @param {*} options */ onShow: function (options) { }, onLaunch: async function () { let self = this; //设置默认分享 this.globalData.shareData = { title: "智酷方程式" } // this.getSysInfo(); }, globalData: { //默认分享文案 shareData: {}, qrCodeScene: false, //二维码扫码进入传参 systeminfo: false, //系统信息 headerBtnPosi: false, //头部菜单高度 } }); [代码] 将获取的参数存储在一个全局变量globalData中,可以减少反复调用的性能消耗。 插件HTML部分 [代码]<view class="custom_nav" style="height:{{navbarHeight}}px;"> <view class="custom_nav_box" style="height:{{navbarHeight}}px;"> <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;"> <!-- 搜索部分--> <block wx:if="{{isSearch}}"> <input class="navSearch" style="height:{{navbarBtn.height-2}}px;line-height:{{navbarBtn.height-4}}px; top:{{navbarBtn.top+1}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;" maxlength="10" bindinput="bindKeyInput" placeholder="输入文字搜索" /> </block> <!-- HOME 部分--> <block wx:else> <view class="custom_nav_icon {{!haveBack||'borderLine'}}" style="height:{{navbarBtn.height}}px;line-height:{{navbarBtn.height-2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius:{{navbarBtn.height/2}}px;"> <view wx:if="{{haveBack}}" class="icon-back" bindtap='_goBack'> <image src='/images/back.png' mode='aspectFill' class='back-pre'></image> </view> <view wx:if="{{haveBack}}" class='navbar-v-line'></view> <view class="icon-home"> <navigator class="home_a" url="/pages/home/index" open-type="switchTab"> <image src='/images/home.png' mode='aspectFill' class='back-home'></image> </navigator> </view> </view> <view class="nav_title" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;"> {{vTitle}} </view> </block> </view> </view> </view> [代码] 主要是对几种状态的判断和定位的计算。 插件CSS部分 [代码]/* components/nav/test.wxss */ .custom_nav { width: 100%; background: #3a7dd7; position: relative; z-index: 99999; } .custom_nav_box { position: fixed; width: 100%; background: #3a7dd7; z-index: 99999; border-bottom: 1rpx solid rgba(255, 255, 255, 0.3); } .custom_nav_bar { position: relative; z-index: 9; } .custom_nav_box .nav_title { font-size: 28rpx; color: #fff; text-align: center; position: absolute; max-width: 360rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } .custom_nav_box .custom_nav_icon { position:absolute; z-index: 2; display: inline-block; border-radius: 50%; vertical-align: top; font-size:0; box-sizing: border-box; } .custom_nav_box .custom_nav_icon.borderLine { border: 1rpx solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.1); } .navbar-v-line { width: 1px; margin-top: 14rpx; height: 32rpx; background-color: rgba(255, 255, 255, 0.3); display: inline-block; vertical-align: top; } .icon-back { display: inline-block; width: 74rpx; padding-left: 20rpx; vertical-align: top; /* margin-top: 12rpx; vertical-align: top; */ height: 100%; } .icon-home { /* margin-top: 8rpx; vertical-align: top; */ display: inline-block; width: 80rpx; text-align: center; vertical-align: top; height: 100%; } .icon-home .home_a { height: 100%; display: inline-block; vertical-align: top; width: 35rpx; } .custom_nav_box .back-pre, .custom_nav_box .back-home { width: 35rpx; height: 35rpx; vertical-align: middle; } .navSearch { width: 200px; background: #fff; font-size: 14px; position: absolute; padding: 0 20rpx; z-index: 9; } [代码] 总结: 通过微信API: getMenuButtonBoundingClientRect(),结果各类手机屏幕的适配问题 将算好的参数存储在全局变量中,一次计算全局使用,爽YY~ 往期回顾: [填坑手册]小程序PC版来了,如何做PC端的兼容?! [填坑手册]小程序Canvas生成海报(一) [拆弹时刻]小程序Canvas生成海报(二)
2021-09-13 - 微信小程序将字符串转为时间戳
var timestamp = new Date('2014-04-23 18:55:49:123').getTime(); console.log(timestamp); 同样的代码为什么在微信开发者工具上能获取到具体的值,在真机上却获取到null
2018-08-04 - 微信小程序数据库增加一条数据后怎么知道id ? 微信小程序数据库添加新数据并获取id
使用wx.cloud.database().collection('turbine_archives').add({})在数据库中添加一条数据后,怎么获取这条数据的id呢
2023-09-15 - 使用云函数,插入一条数据,如果集合存在,直接返回这条数据,不存在就新增?
使用云函数,插入一条指定_id的数据,如果集合存在,直接返回这条数据,不存在就新增这条数据?云数据库如何实现,感谢。
2023-03-19