- 微信小程序制作抽奖小程序(三)--随机积分获取
微信小程序制作抽奖小程序(三)--随机积分获取1.效果展示这一次来说说怎么实现上一幅图所展示的随机点屏幕一处即可加分的效果 先来看下图 [图片] 效果是我点击了广场的某一点,它会显示这个“+2”,然后我的积分也加2。 2.具体实现先说设计想法:1.确定事件范围是整个页面 2.给该范围绑定一个bindtap事件事件返回的X轴和Y轴数据用于定位点击具体位置 3.利用随机数生成随机加分 4.设计动画并显示 5.将积分变化假如到记录中 那就一个一个来了 1.确定事件范围是整个页面这个部分主要体现在wxml里 <view class="back"> <view bindtap="randomCredit" class="creditaddarea"> <view class="word"> <view class="wordfront">积分广场</view> <view class="wordback">哈哈皮</view> </view> 还有对于的css [代码].creditaddarea{[代码] [代码]width: 100%;[代码] [代码]height: 100vh;[代码] [代码]display: flex;[代码] [代码]justify-content: center;[代码] [代码]align-items: center;[代码] [代码]}[代码] 这样一来就让[代码]creditaddarea[代码]铺满了 2.给该范围绑定一个bindtap事件事件返回的X轴和Y轴数据用于定位点击具体位置这个[代码]bindtap[代码]他绑定的事件[代码]randomCredit[代码]里的[代码]e.detail.x[代码]和[代码]e.detail.y[代码](randomCredit: function (e){}内包含这两个)即时我们要的(x,y位置) 不妨打印一下试试 [代码]console.log(e.detail.x)[代码] [代码]console.log(e.detail.y)[代码] [图片] 没有问题,利用这个就可以给我们要呈现的积分动画定位了 3.利用随机数生成随机加分 [代码]//网上找的随机数生产器,要用就this.rand(number),number为想要的最大数字[代码] [代码]rand: function (number) {[代码] [代码]var today = new Date();[代码] [代码]var seed = today.getTime();[代码] [代码]seed = (seed * 9301 + 49297) % 233280; //为何使用这三个数?我也不知道[代码] [代码]seed = seed / (233280.0)[代码] [代码]return Math.ceil(seed * number);[代码] [代码]},[代码] 上一篇也发了,这里就再复制一遍,要随机积分1~3就number给赋3 4.设计动画并显示位置也有了,要加的积分也有了,剩下就是显示出来了。这里就说说怎么实现的(我感觉应该还可以提升一下,但是遇到了一些困惑,但也先说说) 这是“+1“,”+2”,“+3”对应的wxml <text class="text" style="color: aliceblue;font-weight: 1000; left: {{text_ax}}px;top: {{text_ay}}px;opacity: {{opacity_a}};" wx:if="{{text_a}}"> {{text_a}} </text> <text class="text" style="color: aliceblue;font-weight: 1000; left: {{text_bx}}px;top: {{text_by}}px;opacity: {{opacity_b}};" wx:if="{{text_b}}"> {{text_b}} </text> <text class="text" style="color: aliceblue;font-weight: 1000; left: {{text_cx}}px;top: {{text_cy}}px;opacity: {{opacity_c}};" wx:if="{{text_c}}"> {{text_c}} </text> 比较重要的就是这里面的"left","top",和{{text_a}}、{{text_b}}、{{text_c}}。left和top将会被赋值(X,Y),当然X和Y可以稍微偏移一点,这样动画就会出现再你点击处的位置附近 然后是{{text_a}}、{{text_b}}、{{text_c}},这三个都是放在[代码]wx:if[代码]里,显然思路就是假如我点击后,随机数生成了的是"1",那么我就将{{text_a}}赋值,这样对应的动画就会出现 [代码]var randresult = this.rand(3)[代码] [代码]if (randresult == 1) {[代码] [代码]that.setData({[代码] [代码]text_a: "+1",[代码] [代码]text_ax: x,[代码] [代码]text_ay: y,[代码] [代码]opacity_a: 1,[代码] [代码]})[代码] [代码]}[代码] 这么做的话就可以让”+1“呈现出来了。但是我们肯定要让它又消失掉,因为留在屏幕没有意义,所以再给它设个停留时间,就可以用了。这里就用了[代码]setTimeout[代码]。 [代码]let timer_a = setInterval(function () {[代码] [代码]that.setData({[代码] [代码]opacity_a: 0,[代码] [代码]text_ay: y - 60, //Y坐标移动移动,变成向上的动画一点[代码] [代码]})[代码] [代码]setTimeout(function () {[代码] [代码]that.setData({[代码] [代码]text_a: '', //赋值为空,即让它消失[代码] [代码]})[代码] [代码]}, 1000)[代码] [代码]clearInterval(timer_a);[代码] [代码]}, 200)[代码] 这样就能呈现积分显示出来,在慢慢往上移一段距离,最后消失的样子了 5.将积分变化假如到记录中[代码]CreditRecord.add({ //在CreditRecord添加一个记录,说明reason,加的分,时间[代码] [代码]data: {[代码] [代码]reason: reason,[代码] [代码]creditChange: randresult,[代码] [代码]createdAt: new Date(),[代码] [代码]date: String(date.getFullYear()) + "/" + String(date.getMonth()) + "/" + date.getDate(),[代码] [代码]}[代码] [代码]}).then(res => { console.log(res) })[代码] [代码]DrawUser.where({ _openid: app.globalData.userOpenId }).update({ //更新用户记录的数据[代码] [代码]data: {[代码] [代码]credit: _.inc(randresult)[代码] [代码]},[代码] [代码]success: function (res) {[代码] [代码]console.log("用户积分已经加了" + randresult + "积分")[代码] [代码]console.log(res)[代码] [代码]DrawUser.where({ _openid: app.globalData.userOpenId }).get().then(re => {//读取用户记录数据,[代码] [代码]// 并将积分和票存到缓存,用于页面显示积分和票[代码] [代码]that.setData({[代码] [代码]usercredit: re.data[0].credit,[代码] [代码]userticket: re.data[0].ticket,[代码] [代码]})[代码] [代码]wx.setStorageSync('usercredit', re.data[0].credit)[代码] [代码]wx.setStorageSync('userticket', re.data[0].ticket)[代码] [代码]})[代码] [代码]},[代码] [代码]})[代码] 这部分没什么好说的,就是存好数据,给用户展示 3.总结与问题搞定了看到效果还是很开心的,而且还因为点击次数太多被限制访问了hhhh。 碰到的问题就是假如点的太快,连续两次生成的随机数相同的情况下会将第二次点击的坐标值赋给第一个,使其出现的动画变成第一个”+1“飘向第二次点击的地方这样奇怪的动画,当然这个是代码的问题,因为同一个增加积分值时共用一个数据绑定。不知道大家有什么好的办法呢?我现在在想可不可以给点击[代码]randomCredit[代码]本身加一个定时器不让其交替触发?
2021-11-20 - 微信写程序制作抽奖小程序(二)
上一篇写了一些绑定的事件,主要是想让自己清晰数据的存储,后来我又改了很多地方,但是数据的存储基本没有变。 这一次就实现了抽奖功能,用的方法就是随机数,上网找了一下,有好多帖子都用这个,并且说明它“很随机”,我有点看不懂,但是拿来用了 //网上找的随机数生产器,number为想要的最大数字 rand: function (number) { var today = new Date(); var seed = today.getTime(); seed = (seed * 9301 + 49297) % 233280; //为何使用这三个数?我也不知道 seed = seed / (233280.0) return Math.ceil(seed * number); }, 至于为什么用这三个数,网上的帖子有写,但是需要一些数学知识,我也不清楚。 然后设定某个值为中奖,我设了1和2表示中奖,让rand(100),所以中奖概率就是百分之二。 其实抽奖是算好设计的,这次主要还是丰富了下小程序,让它更有趣。主要就是让获取积分更加有趣一点。 获取积分一种的方法就是第一篇里面所讲的点击气泡,这一次就实现了气泡的随机产生,点击即可获得20积分 [图片] (不会做GIF,,但是这个泡泡会动) 第二种是点击广场页面的任意处,会随机加1-3分,如下图 [图片] 有了一定的积分以后,就可以去换抽奖票了 [图片] 好的我先凭空变出一些分数换个票 [图片] 点击那个中间的图片,就可以抽奖了,然鹅我竟然没中奖,我设定中奖率为2/100 [图片] 我们还可以再“我的”里看积分记录 [图片] [图片] 积分记录还没好好渲染,暂时能看就行 这就是最近做的东西,虽然也没啥好看的,就是给自己当个记录吧。
2021-11-17 - 真机调试的时候服务器配置的次数有限制吗?
刚入门,想问问真机调试的服务器配置次数有限制吗?是用完了就没了吗?而且有时候在android上调试没有问题,但是在ios上会发生SSL错误,无法建立与该服务器的安全连接。
2021-11-15 - 数据结构折半查找判定树的画法(较简单易懂!)
复习数据结构做的笔记: 折半查找判定树的画法思路: 1. 先画出满足有序表长度的最大满二叉树,然后将剩下的结点个数一个个插入该树 2. 从上往下看,比较每个结点的左右子树结点个数,如果左右子树结点个数相同优先放右边,左边比右边少就放左边,直到往下塞到二叉树底部成为叶子结点。 对于步骤1和2的具体做法,见下列实例分析: 长度为12的有序表画出折半查找判定树 12>2^3,即最大能画出3层的满二叉树,接着将剩余5个结点插入该树 [图片] 先插入h,a的左右子树结点个数都为3,则到c,c的左右子树结点个数都为1,接着到g,g的左右子树都为0,最后h到了g的右边 [图片] 先插入i,a的左子树结点个数为3小于右子树的4,则到b,b的左右子树结点个数都为1,接着到e,e的左右子树都为0,最后i到了e的右边 [图片] 同理后面插入J,K,L [图片] [图片] [图片] 折半查找判定树就完成了 如果要求各元素查找概率相同的情况下平均查找长度,则 n=(1[代码]*[代码]1+2[代码]*[代码]2+4[代码]*[代码]3+5[代码]*[代码]4)/12=37/12 觉得该篇文章有用的请不要忘记忘记点击左下角的大拇指~
2021-11-15 - 小程序路由的跳转
在微信小程序实战视频中(https://developers.weixin.qq.com/community/business/doc/00008c2f9d83a040de5ad3a945b80dw ),由于编写注册页面代码时,视频仅仅是使wx.navigateBack调回上n级页面:(delta表示第几级,例:1表示上一级) [图片] 但是在登录页面由于是自己完成的小作业,而且作为登录页面,逻辑上先于注册页面出现,注册页面自然也就不是登录页面的上一级页面,所以我把目光放在了wx.redirectTo,如下: [图片] 但是出现了如下bug,页面not found: [图片] 根据报错信息,我们可以看到url:pages/login/pages/enroll/enroll,这是为什么呢?我明明写的是pages/enroll/enroll为什么前面还多了个前缀? 原来这个是作为相对路径寻找页面的,而我写的确实绝对路径,自然出现bug。 那好,我现在修改好了,总不会出bug了吧。 [图片] 确实,我可以正确跳转到了注册页面,那我们再点击返回登录页面试试?然后,没错,又出bug了,如下: [图片] 找不到前一个页面?明明我是从登录页面过来的,怎么会找不到前一个页面呢?然后我去看了一些微信开发者文档https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html 查询了wx.navigateBack的相关信息,如下: [图片] 原来,使用wx.redirectTo并不会把前一个页面保存到堆栈,而wx.navigateBack是从堆栈中寻找先前页面,自然也就找不到先前页面 所以,我改用了wx.navigateTo函数,不出意料,这次成功了 [图片] [图片]、 反复横跳,流畅无比,哈哈。 感谢各位观看,期待下次再见。 如果觉得写得还不错,可以给文章点个赞哦~ [图片]
2021-11-15 - 文档有页面404了?
在浏览weui组件库的文档时(URL:https://wechat-miniprogram.github.io/weui/docs/quickstart.html#%E4%BD%BF%E7%94%A8%E4%B9%8B%E5%89%8D),点击下面这个链接会404 [图片] 跳转结果 [图片] 所以这种引入方式是啥?QAQ
2021-11-15 - 搜索不到小程序、公众号
是否是七天内注册或者改名的? 如果是的话,可以再等几天 排名比较低,没有滑到底? 由于小程序、公众号的简介、昵称、关键词等没有设置好导致搜索权重比较低。 是否受到官方的私信?违规被限制搜索? 打开小程序、公众号的后台查看私信,看看近期是否因为违规被限制搜索,如果存在的话,按照官方的指示进行修改。
2021-11-14 - 为什么每天凌晨的时候发什么都发不出来?
已经连续两天了,有的问题写好了就是发不出来,当时是1:00左右,早上起来又好了
2021-11-14 - 【入门】小程序的图片应该放在哪里?不妨试试强大的云存储功能
开发小程序的过程是离不开image组件的,如果图片比较少,我们可以直接把图片存储在本地,加入代码包一起上传,但在图片数量多、体积大的时候,将图片存储在本地可能会超过代码包的限制,显然不是一个好的选择。常用的存储方式是将图片传到服务器上,但并不是每个开发者都有自己的服务器,本文将介绍微信云开发中的云存储功能,可以方便快捷、可视化地管理小程序的文件。 打开微信开发者工具,点击左上角的云开发,打开云开发控制台,点击存储进入云存储界面。 [图片] [图片] 在存储管理界面,我们可以点击上传文件、上传文件夹的方式来上传文件,也可以直接从电脑上拖取文件上传,这里我在test文件夹中上传了一张图片,点击文件就可以看到图片的详细信息,例如ETag,下载地址和File ID等。 [图片] 回到小程序,在.wxml中使用image组件,设置参数src为图片的下载地址和File ID都可以显示图片,往往我们还会设置mode="widthFix"来让图片自适应宽度比例显示,代码如下: <!--index.wxml--> <image src="图片的下载地址 形式为https://..."></image> <image src="图片的File ID 形式为cloud://..." mode="widthFix"></image> 显示效果如下图,第二张图片的比例更接近原图: [图片] 当然,云存储的强大之处可不只是上传图片,你可以配合云函数来实现小程序内的上传、下载和删除文件,还可以根据文件ID换取临时文件网络链接,详细使用方法请参考官方文档https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/storage.html
2021-11-07 - Write request overrun...这个报错是什么情况?
今天写着写着突然报这个错,反复检查了还是一样,一旦和数据库相关的操作就会这样,我以为是写不下了,就删了一些记录,结果还是这样,代码不变也是这个错,但之前没有错。 神奇的是过了一段时间再运行又没问题了,想问问到底怎么回事 [图片]
2021-11-14 - 思考到半夜,费了苦心,微信官方听我一言吧?
对于其他短视频平台要求将视频分享到微信的问题,我个人认为微信可以默认分享到专门的视频号,而不要开通分享到朋友圈和群聊的入口,这样确实会影响微信用户体验。分享到视频号将丰富微信视频内容,为腾讯搜索生态完整助力,增强微信内容质和量。同时,微信可以借机会发展视频号和短视频,与抖音竞争。麻烦管理员向上司传达下建议!!!
2021-11-13 - 微信公众号发的文章在微信搜一搜里搜不到?搜索文章全标题,也搜索不了,跪求管理大大进来查看!
苦心运营一年多的9个公众号,今天开始一篇文章都搜索不出来,崩溃了,这什么情况?后台也没有违规提示什么都没有直接就全部内容都看不见了! 跪求管理大哥大姐过来查看一下! 情况如下图,我几乎每个公众号都发过这种标题现在一个都搜索不出来,什么情况? 公众号名称:vip课程下载 专业拼课团 拼课学习站 全网课程大全 网课分享站 知识分享菌 网课殿堂 知识圣殿 网课联盟 文章链接:https://mp.weixin.qq.com/s/SSBjKRX0mR_3mVtq_Vdjvw 跪求大哥大姐看下怎么回事,我现在彻夜难眠 [图片]
2021-11-13 - 手把手教你搭建消防安全答题小程序-实现转发分享答题成绩功能
手把手教你搭建知识竞答小程序,系列文章前面的三章是界面设计篇,分别写了如何搭建答题小程序的首页、答题页以及答题结果页。 现在进入到功能交互篇,此为功能交互篇的第二章,实现转发分享答题成绩功能。 软件架构:微信原生小程序+云开发戳源码地址,获取源码,版本持续迭代中... 项目效果图 [图片] 那么,实现转发分享答题成绩功能?其实很简单,千万不要被文档里密密麻麻的API所吓唬到。 记住一点,不需要通读文档。我教你一个小窍门,“查文档技法——用到什么查什么”。手把手教小白学习开发小程序之如何查文档。 微信小程序官方文档提供了转发分享的API,是: onShareAppMessage(Object object),注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮。 [图片] 我们可以清晰的看到,它的配置项都有哪些,都是可选项。 这里,我们怎么简单怎么来,就配置个title就行了。 项目示例代码 .js文件 Page({ onShareAppMessage(res) { return { title: '@你,快来参与消防安全知识答题活动吧~' } }, }) 瞧,这不就实现了转发分享答题成绩功能了吗。就这么一小段代码,就轻松实现了答题小程序的转发分享功能。 但这个功能很重要,对于运营小程序的来说,这个转发分享能力至关重要。我们不是经常看见一些运营领域的关键词吗?啥“用户增长:裂变、转化才是关键”的,啥“拉新、转化”啥的。 这些不都是基于,转发分享给好友、群,或者是发朋友圈等进行传播嘛,就是所谓的实现流量闭环,流量循环。
2021-11-12 - 谈谈这一年,身边跟小程序开发有关的人和事
谈谈这一年,身边跟小程序开发有关的人和事 ! 今天是2021-11-11,做今年的总结,还有点早,但不妨碍开始记录今年小程序运营过程中结交的一些人和事~ 本人主要记录一些流水记忆 很荣幸接触到小程序的开发,由于本人习惯记录开发过程中的种种心得和笔记,暂且谈不上文章,只能称呼为笔记,在社区相对比较活跃, 也通过社区或者其他一些渠道人接触到一些小程序发烧友 他们有的是全职开发,有的用爱发电,比如说我,平时在一个群内有说有笑,甚是欢喜 ~ 但是之前用心维护的一个小程序核心群,由于群友无约束的聊天被封号了,因为我在维护这些群的时候,我会有意识的把一些活跃的同学往一个核心群拉, 那就是这个核心群 之前聊天相当活跃,自从被封之后,再创建的其他群,都反响平平,我也疏于再去维护了,因为至于我而言,维护这种群纯碎是一种无意义的事情 之前维护那个活跃群,感觉还有点价值,因为里面确实积累了不少大(话)佬(痨) ~ 在群里也认识了不少优秀的小程序开发和运营以及靠小程序支持的老板,他们的小程序有的日活百万,有的日活可能就个位数,真的都有 我对这里面的几个大佬都很熟悉, 里面有无码科技的同学,有甚至图样的同学,有行业No1的同学,总之很优秀拉 今天我讲我印象比较深刻的几个 暂且称呼他为A A的小程序从各方面都很优秀,除此之外他在群里发言都很有价值,对事物的认知和看法是远超群里一般用户的 他的小程序偏小众,虽然竞争少,但是即使产品做的很出色,用户也陆续有上升的趋势,但是由于首先于受众人群本来就少,所以每日的流量主收益,离A同学的预期差距甚大 由于A同学本身是全职开发,这种收益不能养活自己甚至还入不敷出的时候,结局是可以预知的 (肯定滚回去上班了) A同学已近期入职某大厂,做一颗安安静静的螺丝刀,群内已很少再见到他发言了,我能怎么说呢 祝福A同学 我们能从A同学的经历,得到什么呢? 那就是目前纯靠小程序养活自己,养活团队,真的是太难了,即使那位小程序日活百万(行业排名No1)的老板,养活团队也是有很大的压力 确实 小程序的红利期已经到拐点了,如果还有同学天真的以为用心做一款产品真的可以养活自己那就答错特错了 其实我也一直在摸索求证,通过身边的人我其实已经放弃这种模式 今天絮絮叨叨很多,但是还有很多话没有说完, 2021-11-11 后面继续更新
2021-11-11 - 小程序开发笔记#1 封装一个页面栈工具类:思路分析(一)
为啥想要写一个页面栈工具类? 关于官方API 微信官方文档中提供了有关路由的5个API,对应实现不同的页面切换需求,分别为: wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object object) wx.reLaunch(Object object) wx.redirectTo(Object object) 改进思路(主要还是打代码的习惯) 1)5个API可以看作页面栈的进出栈操作 tabBar之间的跳转 保留当前页面,跳转到应用内的某个页面(但是不能跳到 tabbar 页面)——push(进栈) 关闭当前页面,返回上一页面或多级页面——pop(出栈) 关闭所有页面,打开到应用内的某个页面——清空栈后push一个页面 关闭当前页面,跳转到应用内的某个页面(但是不能跳 tabbar 页面)——先pop后push一个页面 不妨尝试封装一个页面栈工具类,通过更简洁的进出栈操作实现页面切换 2)要实现页面间跳转时的数据传输,一般采用把data放入url中,如: [代码]wx:navigateTo({ url: '../pageTest/pageTest?id=123&name='bao'' }) [代码] 在目标页面pageTest的onload方法中可以这样获取数据: [代码]onLoad: function (res) { this.setData({ id:res.id, name:res.name }) console.log(this.data.id); console.log(this.data.name) }, [代码] 可以看到,对于大量数据的传输时,url会非常长,处理起来比较不方便,我们可以尝试封装一些方法实现从要传输数据对象到url的转换 NavigateUtilAPI push(page页面地址,data需要传递的数据) pop(delta返回层数) switch(page页面地址,data需要传递的数据):进行tabBar间的切换 change(page页面地址,data需要传递的数据):改变当前页面 goto(page页面地址,data需要传递的数据):强制跳转 (……更加细化的接口,如将data嵌入url,当前页面获取等 后记 下一节开始写代码实现!希望能对刚开始学小程序的朋友有所帮助! 还是小白,如果有错误或更好的想法,欢迎各位大佬一同交流、指出哇~
2021-11-13 - 【笔记】横向滑动列表的渲染
前言 今天在学习列表渲染的时候,尝试实现了支持横向滑动的列表,但是遇到了很多问题,做一个小小的总结。 组件scroll-view scroll-view是一种视图容器,指定可滚动视图区域。通过设置属性scroll-y=true并给给scroll-view一个固定高度height,可以实现竖向滚动;通过设置属性scroll-x=true可以实现横向滚动,其他的属性可以参考官方文档。 列表渲染 列表渲染是一种很基础的渲染方法,在组件上使用 wx:for 绑定一个数组,即可使用数组中各项的数据重复渲染该组件。在组件中,使用 wx:for-item 可以指定数组当前元素的变量名,默认为item;使用 wx:for-index 可以指定数组当前下标的变量名,默认为index;使用 wx:key 来指定列表中项目的唯一的标识符,可以提高渲染效率(没有特殊需求的话可以直接用index指定)。 例如,在.js中声明一个含有六个元素的数组list,可以用以下代码循环地渲染list中的所有元素 [代码]<!-- index.wxml 列表渲染 --> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> [代码] 显示效果如下: [图片] 横向滑动列表 将组件scroll-view和列表渲染结合,就可以实现横向滑动列表了,样例代码如下: [代码]<!-- index.wxml 横向滑动列表 --> <text style="margin-left: 40%;">横向滑动列表</text> <scroll-view scroll-x="true" class="scroll-x-list"> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> </scroll-view> /* index.wxss */ .scroll-x-list{ height:150px; } .view-item{ width:100px; height:100px; background:#1bf891; margin:10px; } [代码] 显示效果如下: [图片] 可以看到结果和预期差很多,不仅没有实现横向滑动,还没有显示出所有的元素。原因是代码虽然在组件中设置了需要的属性,但是在样式上没有做对应的调整,我们必须在wxss中设置布局才可以达到预期效果。最容易想到的就是我们常用的flex布局,关于flex布局的内容比较多,这里就不展开了,推荐看官方文档学习。在进行下一步修改前,先声明几个必须要知道的小细节: 组件scroll-view是不支持flex布局的,要想在scroll-view中使用flex布局,必须嵌套一个其他的支持flex布局的容器,如view。 scroll-view 中的需要滑动的元素不可以用 float 浮动。 scroll-view 中在需要装载滑动元素的父容器中开启flex布局是没有作用的,应该使用dislay:inline-block来进行元素的横向编排。 第一种方法,由于要实现的是横向滑动列表,那么容器中的元素一定是不允许换行的,刚刚提到,scroll-view是不支持flex布局的,所以开启flex布局并设置flex-wrap=nowrap是无效的行为。我们选择在类scroll-x-list中设置white-space: nowrap来处理元素中的空白,让容器内的换行无效。同时,还应设置装载滑动元素的父容器——view-parent的dislay为inline-block,代码如下: [代码]/* index.wxss */ .scroll-x-list{ height:150px; white-space: nowrap; } .view-parent{ display:inline-block; } [代码] 显示效果如下,已经可以横向滚动列表了。 [图片] 第二种方法,可以在scroll-view中嵌套一个view,在这个view中开启flex布局并设置flex-wrap=nowrap来阻止换行,代码如下: [代码]<!-- index.wxml 另一种横向滑动列表 --> <text style="margin-left: 40%;">横向滑动列表</text> <scroll-view scroll-x="true" class="scroll-x-list"> <view class='flex-view'> <view wx:for="{{list}}" wx:key="{{index}}" class="view-parent"> <view class="view-item">{{item.txt}}</view> </view> </view> </scroll-view> /* index.wxss */ .scroll-x-list{ height:150px; } .flex-view{ display:flex; flex-wrap: nowrap; } .view-parent{ display:inline-block; } [代码] 显示效果与刚刚相同: [图片] 一些改进 在第一种方法中,我们没有使用到flex布局,就很容易遇到一些对齐的问题,假设我们设置数组中第三个元素为空,就会出现下面的情况: [图片] 原因很简单,inline-block的属性中在某个元素没有内容的情况下,它的基线对齐方式是基于这个元素的底边的,解决方式是设置一个垂直的对齐方式: [代码]/* index.wxss */ .view-parent{ display:inline-block; vertical-align: top; } [代码] 显示效果如下: [图片] 同时,你会发现第二种开启flex布局方法的横向列表不会有这种对齐的问题,我们还可以在装载滑动元素的容器中开启flex布局来让内容更加美观: [代码].view-item{ width:100px; height:100px; background:#1bf891; margin-right: 20px; align-items:center; display:flex; justify-content:center; } [代码] 显示效果如下: [图片] 总结 scroll-view是一个十分常见实用的组件,但是使用时也有一些需要注意的问题,比如不支持直接使用flex布局。总体来看,比起设置inline-block的布局,更推荐在scroll-view中嵌套一层view再开启flex布局的方法,可以更灵活的摆放控制滑动元素。
2021-11-15 - 微信小程序制作抽奖小程序
最近在尝试做抽奖小程序,还在做JS部分,还没有搞一些渲染美化之类的。 目前的已经实现了用户点击获取积分按钮获取积分,还有用积分兑换抽奖票。 我的方法是用户首先得登录,第一次登录后将在一个集合里创建一条记录存放着自带的_openid和积分credit还有抽奖票ticket,后两者都初始化为0。并保存个人的openid用于等会的检索 用户在广场页面可以点击”获取20积分“的按钮来获取积分。该按钮绑定一下事件 bubbleCredit(){ DrawUser.where({_openid:app.globalData.userOpenId}).update({ data:{ credit:_.inc(20) //积分加20 }, success: function(res) { console.log(用户积分已经加了20) console.log(res) }, }) }, 在另外一个页面可兑换抽奖票,类似的暂时也只是一个按钮。点击后不仅在用户的积分和票会对应变化,然后我分别存下了这两个个数据,方便给用户看 [图片] trade300(){ CreditRecord.add({ data:{ creditChange:-300, //积分减300 reason:"trade300", //变化原因 createdAt:new Date(), //时间 } }) let that=this DrawUser.where({_openid:app.globalData.userOpenId}).update({ data:{ credit:_.inc(-300), ticket:_.inc(1) //更新用户数据 }, success: function(res) { console.log(用户成功兑换了一张抽奖票) DrawUser.where({_openid:app.globalData.userOpenId}).get().then(res=>{ console.log(res.data) that.setData({ usercredit:res.data[0].credit, // userticket:res.data[0].ticket, //这两个是为了实时给用户看到积分和票 }) //console.log(that.data.usercredit) }) }, }) }, 接着要实现的便是抽奖了。现在我有不会的就是不知道如何随机抽奖,但是想好了怎么对集合进行操作了 draw(){ DrawRecord.add({ data:{ prize:某奖品, //等等写 createdAt:new Date(), //时间 } }) let that=this DrawUser.where({_openid:app.globalData.userOpenId}).update({ data:{ ticket:_.inc(-1) }, success: function(res) { DrawUser.where({_openid:app.globalData.userOpenId}).get().then(res=>{ console.log(res.data) that.setData({ //dataob:res.data, usercredit:res.data[0].credit, userticket:res.data[0].ticket, }) console.log(that.data.usercredit) }) }, }) }, 这大概就是我的想法 现在遇到的困难就是怎么随机抽奖 Math.ceil(Math.random()*10); // 获取从 1 到 10 的随机整数,取 0 的概率极小。 想试试这个方法,抽到0就算中奖,这样也方便到时候判断 以上就是我大概想到的如何做抽奖小程序 希望有相关经验的大佬可以给我提一点建议,谢谢
2021-11-11 - 微信电脑端登陆不上,一直显示微信版本过低,登录不上
微信电脑端登陆不上,一直显示微信版本过低, 现在我的微信没法在电脑上使用,很不方便。 微信号 bearbear279
2021-11-10 - 如何自定义顶部导航栏背景透明同时标题居中?
本人也在社区,百度所搜了一下,也参考了一下,没看太懂,复制下来也是一直报错
2021-11-09 - 用户生成不同的邀请码,可以通过微信扫一扫将邀请码带进小程序吗?
每个用户生成的邀请码都不同,扫描普通二维码打开小程序里面的二维码规则,是如果有参数,参数也要相同才行。但每个用户的邀请码都不一样,如何解决?
2021-11-09 - 打开小程序提示打开失败 缺少ID,从公众号进入小程序提示打开失败 缺少ID?
[图片][图片]
2021-11-09 - 微信小程序分享到不同地方的结果不同应该怎样实现?
小白又来提问了,自己在制作项目的过程中,要根据分享到不同的地方(比如分享给用户和分享到群聊中)产生不一样的分享结果,比如分享给好友增多5点经验,分享到群聊中增多15点经验。如何实现使用者分享给朋友与分享到群中有着不同的结果呢?
2021-11-09 - 小白怎么制作小程序?
大佬们,小白怎么入门啊
2021-11-07 - 更改小程序其他页面的顶部标题
如何更改小程序其他页面的顶部标题? 作为刚入门微信小程序开发的小白,自己在开发过程中发现,小程序的每个页面顶部都有一个标题,可在[代码]app.json[代码]中进行设置,但是其他页面会默认显示[代码]navigationBarTitleText[代码]中设置的标题。如果需要每个页面有自己的标题,应该怎样做呢? 经过上网查询资料未果后,我就在微信开放社区中提问了。没想到没过多久就收到了几位大佬的评论解答,在此十分感谢他们。 原来在微信开发文档中就有这个问题的答案 [图片] 当我们需要给每个页面设置单独的标题时,就要在当前页面的文件夹下新建一个[代码].json[代码]的配置文件,[代码]navigationBarTitleText:[代码],我们就可以设置自己想要的标题了。 总之,这算是自己开发过程中遇到的一个小问题,记录一下,感谢大佬们的帮助,希望能帮到有需要的人。
2021-11-08 - 关于微信小游戏可视化开发工具的常见问题20211105
常见问题 为了让大家更快更好的熟悉工具,每周会把大家的问题进行汇总并给出一个解决方案,方便大家参考! 1.如何设定物体向下落的时候不穿透地面呢 下面的物体设置静态刚体 [图片] 2.请问如果不能导入GIF图片,那怎么做到物体的自己走动?这样的效果呢? 换成帧动画,详情可以查看文档:资源管理 [图片] 3.请问如何在游戏结束之后获取用户信息 要点击之后才能获取 [图片] 4.这样子的积木为什么切换不到场景二呢? [图片] 这个积木主要检测的是运动中的精灵,通过积木去修改大小不起作用,改成这样: [图片] 5.发布在社区的游戏可以加入广告吗? 建议申请软著,可以不填
2021-11-05 - 提交审批申请,附件为什么总是为空?确定素材是存在的。
数据结构: { "creator_userid": "PengQing", "template_id": "C4NvGy3NE99xY46xV5arUoLzxgwerNz2MbLTQDfaP", "use_template_approver": "0", "choose_department": "7", "approver": [{ "attr": "1", "userid": ["PengQing"] }], "notify_type": "1", "apply_data": { "contents": [{ "control": "Number", "id": "Number-1635994284502", "value": { "new_number": "10030" } }, { "control": "Money", "id": "Money-1635994298613", "value": { "new_money": "5000" } }, { "control": "Text", "id": "Text-1635999673223", "value": { "text": "HKD" } }, { "control": "Text", "id": "Text-1635994353700", "value": { "text": "T1636361399" } }, { "control": "File", "id": "File-1636358214395", "value": { "files": { "file_id": "3wT8ZGyr4UDskUWApWkQgEYGoR8r4VZEATS9d1k3eG8YBg5NOQMxxMz_NM2TaWz4R" } } }] }, "summary_list": { "summary_info": { "text": "test", "lang": "zh_CN" } } } 返回结果: 调用接口 提交审批申请 请求地址 https://qyapi.weixin.qq.com/cgi-bin/oa/applyevent 返回状态 status: HTTP/1.1 200 OK date: Mon, 08 Nov 2021 08:50:27 GMT content-type: application/json; charset=UTF-8 content-length: 113 connection: close error-code: 301025 error-msg: Warning: wrong json format. get approval param error:File-1636358214395 is required 返回结果 { "errcode": 301025, "errmsg": "Warning: wrong json format. get approval param error:File-1636358214395 is required" }
2021-11-08 - 小白求助?
[图片][图片] 为啥只能获取到位置信息,各位大佬求求了
2021-11-07