![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序
文章平均质量分 70
CreatorRay
这个作者很懒,什么都没留下…
展开
-
微信小程序云开发如何实现多条件多字段模糊查询
之前的博文中,已经跟大家介绍过,微信小程序云开发如何实现单条件单字段的模糊查询,这个是很常见的业务需求。在一些更复杂的场景下,我们需要实现多条件多字段的模糊查询,比如同时兼容对商品名称、类别、产地等多条件的模糊查询。我们看一下云开发如何实现。原创 2023-10-31 01:49:31 · 1607 阅读 · 0 评论 -
微信小程序云开发如何优雅的实现模糊查询
微信官方自从推出微信小程序云开发之后,让小程序开发的门槛再次降低,你可以不需要掌握任何后端的语言和数据库,有一些js的基本功,就可以完成一个完整带前后端交互功能的小程序项目。今天我们介绍一个日常开发中非常常见的需求,就是实现模糊查询,这个主要是后端做的,我们看看云开发如何实现。原创 2023-10-30 00:44:37 · 1438 阅读 · 0 评论 -
在微信小程序中使用WebSocket的踩坑日记
`WebSocket`是现在很主流的协议,大范围使用在即时通讯,协同协作等功能中,它很好的弥补了`HTTP`协议的不足,可以很容易的实现长连接。原创 2023-01-19 22:22:38 · 4022 阅读 · 3 评论 -
微信小程序自定义tabbar底部导航栏
最近开始在某站更新一个零基础从0写一个失物招领小程序的系列视频,涉及到了自定义tabBar,也就是底部导航栏的内容。看了下我的博客似乎之前没更新过,所以给大家写一篇。原创 2022-10-07 02:14:42 · 3785 阅读 · 2 评论 -
关于微信小程序保存文件的最佳解决方案
最近在写微信小程序的时候,涉及了用户下载文件到本地的需求。去看了下文档,首先要先通过,将文件下载到本地。然后我记得有一个的,可以进行文件的保存,看了下文档,看到这个已经停止维护了。推荐使用的是,而这个是通过获取。经过一些列的操作之后,终于可以使用的方法了。然后,重要是在成功执行之后的返回值,会有一个,也就是这个文件被保存到了哪儿。但是,单纯看这个路径,是不容易找到这个文件。微信的解释是,想维护一个属于小程序自己的域,不想共享到外部,所以,这个文件地址是一个相对隐式的地址,不容易被直接找到。我查阅原创 2022-06-03 20:12:27 · 5859 阅读 · 7 评论 -
零基础入门微信小程序系列之——校园跑腿
从0开始,带着大家写一个校园跑腿小程序。无论是做毕设、课设,还是自己运营赚钱,都是一个很好的项目。原创 2021-12-31 16:35:38 · 1799 阅读 · 0 评论 -
微信小程序如何封装自己的组件?
在现在前端领域,最常见的话语就是组件化、工程化的内容。所有的框架都在朝着这方面发展。作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发。在我们的日常开发中,可以封装一些常用的组件达到复用效果,可以大大提高我们的工作效率。今天我们学习一下如何在微信小程序中封装自己的组件。首先我们在app.json中新建一个页面,组件自己的结构和普通页面的机构是一样的,同样由.js、.json、.wxml、wxss组成,所以我们像注册一个普通页面一样注册它。我们来试着封装一个一键返回顶部的按钮。首先进去页面.原创 2021-06-30 22:18:34 · 4396 阅读 · 0 评论 -
微信小程序如何实现将数据导出生成excel
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。这个需求也是我在接私活的时候遇到的,需求就是,要实现将指定数据库表的数据全部导出生成excel和按需导出,也就是导出全部数据,或者导出指定哪天的数据。其实我一开始是没有思路的,但是我查了一些资料,发现强大的node是有处理excel表格的模块的。生产环境的话,因为我为了方便还是选用的云开发,但是云开发其实在语法和内容上和node是没有区别的,无论是写法还是模块,都是相同或者类似的。虽然我没有看过云函数的底层.原创 2021-03-30 21:55:13 · 17724 阅读 · 3 评论 -
微信小程序如何生成当前页面二维码
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。在微信小程序的开发中,很多的业务场景下都会有生成二维码,然后通过扫码二维码,进入指定页面的需求。我之前也没碰到过这种需求,最近接了一个私活,就有这种需求,查了下资料,发现官方是提供了API的,下面我们就来操作一下。这是官方文档的介绍,我这里采用云调用。首先在云函数文件夹中,新建一个名为QrCode的云函数。写入以下内容。const cloud = require('wx-server-sdk')cl.原创 2021-03-26 14:01:54 · 5772 阅读 · 0 评论 -
基于微信小程序云开发的校园类平台
这期给大家介绍一个我压箱底的项目,一个集二手市场、兼职发布、失物招领、代取快递等功能为一身的校园类平台。前端使用ColorUI,后端使用微信小程序云开发。现在已经上线发布,并且长期运营维护。大家可以直接在微信小程序中搜索校园海滨,在线体验功能。主要推荐给三类人群:1.打算干程序员这行的,已经学完微信小程序基础内容的,想找个项目实战。这个小程序的业务功能已经涵盖了小程序大部分的内容,并且很多的业务逻辑很贴合实际开发。2.准备课设、毕设、比赛的。这个小程序我之前git过一次,大概有个8000多行,原创 2021-02-05 15:31:37 · 4319 阅读 · 3 评论 -
普本在校生是如何零基础在一个月内开发出第一款微信小程序的
先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设、课设的开发在2020年上半年的疫情期间挣了一万多RMB。首先先说一下,我们为什么想做一个微信小程序。我个人觉得,需求是源于生活的,能解决实际生活需求的产品就是好产品。在QQ诞生之前,人们之间联系的主要途径可能是短信,不仅麻烦,而且费钱,所以即时聊天工具QQ才有诞生的社会背景。在淘宝诞生之前,人们所有的购物活动都是在线下实体店完成的,线下的店铺因为房原创 2021-01-13 20:08:52 · 1185 阅读 · 0 评论 -
微信小程序如何实现转发/分享功能
在微信小程序的开发中,我们经常遇到把当前页面转发给好友的需求。并且大部分时候,转发的页面都是带参数的。这里面坑还是比较多的。 <button open-type="share" type="primary"> 分享给好友 </button>首先我们先写一个button按钮,很重要的一个点就是button按钮的open-type属性,这个一定要写为share。其实,这其中的实际原理就是通过按钮触发onShareAppMessage这个生命周期函数。 onShare原创 2021-01-12 21:35:09 · 5494 阅读 · 0 评论 -
微信小程序云开发实现分页功能(简单易懂)
我们在页面上进行数据展示的时候,无论是pc端还是移动端,很多情况下需要展示很多很多条的数据。比如商城,商品的数量是非常多的。但是在我们从后台获取数据的时候,数据的传输数量总是有限制的,这也是为了性能考虑,后台给我们的数据可能是20条,可能是100条。那我们的任务如果是渲染数据库中的1000条商品,应该怎么做呢?这时候就需要用到分页的功能了,我们可以把1000条商品分为50页,每页20条数据。这样就既达到渲染1000条数据的目的,也不影响过多的性能。下面我们利用微信小程序云开发实现一下数据的分页。原创 2020-12-28 18:27:33 · 3278 阅读 · 3 评论 -
微信小程序解决诡异的异步问题
先说一下什么是异步,我举一个通俗易懂的例子。你现在有两个任务:向Java老师要一份复习资料买一瓶矿泉水如果你是同步执行,那么你的执行过程就是,先去向老师要一份复习资料,等老师把复习资料给到了你的手里,然后你才去买那瓶矿泉水。但是如果你是异步执行,那么你的执行过程就是,跑到老师面前,跟老师说,老师我要一份复习资料,然后你就立刻去买矿泉水了,在你买矿泉水的时候,那份复习资料,你可能拿到了,可能没拿到,取决于实际的情况。大家应该能明白我表达的意思。然后我们讨论一个问题,在程序执行中,到底是同步好原创 2020-11-19 22:49:13 · 2080 阅读 · 0 评论 -
微信小程序云开发项目实战之商城开发日记 05
hello童鞋们,我又来了,今天写tabbar的最后一个页面,个人中心页。个人中心页的布局也是比较常规的。其实当你看过了很多成品之后你会发现,代码千篇一律,重要的还是UI的设计。顶部是一个头像和昵称的展示,然后下面是订单的板块,再下面是一些其它功能块的集合。<view class="head"> <view class="user"> <open-data type="userAvatarUrl" mode="aspectFit" class="img">原创 2020-11-17 13:13:41 · 923 阅读 · 0 评论 -
微信小程序云开发项目实战之商城开发日记 04
今天是愉快开发商城项目的第四天了,相信如果大家跟着我能把前两天的前端内容敲完,相信你是有比较大的收货的。今天的内容是完成购物车的前端代码。购物车的设计还是比较常规的UI,展示商品的信息,提供选中按钮,提供加减按钮,提供结算按钮,提供一键清空按钮,并在界面底部实时展示目前的购物车已选中的商品的总价。首先是商品的信息卡片,依然是以flex为核心的布局方式。<view class="body"> <view class="product"> <checkbox-gr原创 2020-11-16 13:01:17 · 860 阅读 · 0 评论 -
微信小程序云开发项目实战之商城开发日记 03
经过了昨天的内容,相信大家已经多微信小程序的前端页面编写有了一定的认识,昨天的内容是非常重要的,尤其是flex布局,会贯彻整个项目的开发。今天我们来编写tabbar页中的分类页的前端代码。分类页我的设计就是很大众的那种,左右布局,左边提供分类框,右边展示对应分类的商品。核心要点还是flex布局。我们先把整体的框架做出来<view class="body"> <view class="left"></view> <view class="right"&原创 2020-11-15 13:01:23 · 906 阅读 · 0 评论 -
微信小程序云开发项目实战之商城开发日记 02
hello,今天是第二天了,正式开始编写商城的前端代码。今天的任务是完成商城首页的前端代码编写,任务还是比较重的哦。我们进行的第一步操作就是进入编辑器,点开文件目录中的pages下的index文件夹,进入index.wxml。在这里说一下在微信小程序中一个页面的文件组成吧。其实在昨天我们注册页面的时候,其实已经注意到了,每一个被注册的页面,都会生成四个文件,分别是.js,.json,.wxml,.wxss。首先这个wxml文件就是编写页面的结构,和web前端中的html是一模一样的作用,wxss是原创 2020-11-14 15:44:04 · 1040 阅读 · 0 评论 -
微信小程序云开发项目实战之商城开发日记 01
从今天开始,我们就要动手从零做一个基于微信小程序云开发的商城项目喽~这个项目非常适合那些懂一点web前端基础的同学学习,收货会很大!零基础的同学也可以试着做一下,我的代码会给的很详尽,讲解的也会很透彻,实在不明白的可以加我的联系方式找我。还有我的公众号,等我最后一期做完之后,我会把源码放到我的公众号里,大家也可以关注一下,我比较懒,之前公众号更新的不多,以后会经常更新干货的,因为我本身是打算做前端的,所以内容基本都会和前端有关,包括一些前端技术栈的学习心得、面试刷题、优秀的工具插件、职业规划等等。所以,还原创 2020-11-13 16:58:25 · 1997 阅读 · 1 评论 -
微信小程序云开发实现图片的上传、存储、访问
零基础入门微信小程序云开发QQ群:1073011570我们在进行项目开发时,经常需要处理用户上传的图片,如果用传统的后端开发,处理起来是比较繁琐的。微信小程序云开发提供了一系列API供开发者完成想要的效果。下面我们要实现用户图片的上传、存储及访问。<button type="primary" bindtap="upImg">上传图片</button>因为只是演示功能,我们用一个按钮实现点击事件的产生。首先我们用到的第一个API就是wx.chooseImage官方文档介绍原创 2020-11-12 20:26:59 · 9915 阅读 · 5 评论 -
基于微信小程序云开发的商城项目~
最近参加学校的比赛,7天赶了一个微信小程序云开发的商城,一个普通的商城应该有的功能都有,一些细节没有完善,后续会持续更新和完善项目。目前已开源到GitHub,有需要的同学可以下载学习一下,点个star,谢谢!地址:https://github.com/Creator12333/Shopping-Mall有任何问题联系个人QQ:505417246微信小程序云开发零基础交流QQ群:1073011570...原创 2020-10-21 17:25:11 · 2302 阅读 · 0 评论 -
微信小程序云开发实现模糊查询需求
代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章,贡献一丢丢的浏览量,感激不尽。我们在进行微信小程序开发时很多的业务场景都需要用到搜索框,普通的查询似乎并不能满足我们的需求,我们要实现模糊查询。如果用传统的后端开发实现模糊查询,过程十分繁琐并且要有比较好的基础知识积累。但是——微信小程序云开发为我们提供了很完美的接口实现模糊查询。先亮代码:WXML:<input bindinput="search"></input><button bindtap=".原创 2020-10-09 16:53:41 · 2205 阅读 · 7 评论 -
微信小程序开发笔记,你收藏了吗?
**微信小程序开发笔记,你收藏了吗?**最近在开发微信小程序,把自己在项目中经常遇到的知识点记录下来,以便下次开发的时候查看。开发小程序开发工具推荐vscode写代码,微信开发工具用于查看效果和调试。1、自定义标题栏现在UI要求越来越高,高频出现自定义标题栏的情况"navigationStyle": "custom"2、获取用户信息用户授权是每个小程序中都会用到的,可以根据自己的项目流程编写自己的逻辑。 用户授权<button wx:if="{{canIUse}}" open-t转载 2020-10-06 13:10:36 · 492 阅读 · 0 评论 -
微信小程序如何实现下拉刷新
我们在进行微信小程序的开发时,经常遇到需要上拉刷新数据的需求。可能大家都不经意间看到过,当新建一个页面的时候,原始JS文件中的生命周期函数里就有实现这个需求的函数。但是如果直接在里面写代码的话,根本无法触发这个函数。我当时也很懵逼,但是看过微信小程序开发文档后,我们发现,需要在页面的json文件中配置一下属性enablePullDownRefresh的值为true还有很关键的一点是,如果用onPullDownRefresh这个生命周期函数的话,就必须要写wx.stopPullDownRefresh来原创 2020-09-10 18:44:05 · 4270 阅读 · 0 评论 -
微信小程序云开发实现订阅消息推送
代码自用自取,复制粘贴直接使用,喜欢的话可以查看博主其它文章,贡献一丢丢的浏览量,感激不尽。我们在进行微信小程序项目开发时,尤其商城类小程序,很需要订阅消息的辅助,订阅消息就是将模板内容实例化直接发送至指定手机微信上。比如我们在进行商城类小程序开发时,用户购买了商品,商家需要收到是谁买了商品,买了什么商城,什么时候买的,收货地址是哪里等等信息。虽然这些可以去数据库查看,但是甚为不便,而且也不能实时接收。微信小程序目前不支持APP的推送类功能,这个订阅消息就是最接近推送的功能了。首先第一步,我们.原创 2020-08-23 21:25:11 · 3645 阅读 · 6 评论 -
微信小程序实现长按复制和点击复制
我们在进行微信小程序开发时,经常会遇到用户通过长按文字复制和用户通过点击事件复制指定内容的需求。长按复制:微信小程序中text标签中有一个selectable属性可以满足我们的需求,我们只需要把属性的值设置为true即可。<text selectable='true'>哈哈哈哈哈哈哈哈哈哈哈哈</text>点击复制:点击事件的介质可以是任何有bindtap属性的标签。我们以view为例。<view bindtap='onClick'>点我</vie原创 2020-08-15 22:47:20 · 12416 阅读 · 1 评论 -
详解前端开发之flex布局(附代码及演示效果)
我们在进行微信小程序的开发时,基本都需要对页面进行布局,布局方式有很多,flex布局可以基本解决我们所有的需求,并且简单易学。flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。flex布局的核心就是在容器内,默认存在两个轴,一个是水平的主轴,一个是垂直的交叉轴,支撑起整个容器。任何一个容器都可以指定为 flex 布局。.body { display: flex;}这样我们就对容器进行了flex类型布局的设定flex布局的重要属性有:fl原创 2020-07-20 16:03:50 · 1431 阅读 · 1 评论 -
微信小程序云开发轻松实现用户openid的获取
现在微信小程序越来越火,遍布各个行业,也有越来越多的开发者涉及小程序的开发。云开发的发展也越来越迅速,对于个人开发及初学者十分的友好。云存储、云数据库、云函数可以基本满足开发者的所有需求。openid是微信小程序用户的唯一标识,是开发者很需要获取的信息。传统的小程序开发,获取用户openid,十分的繁琐,要进行一系列的校验及数据交换。但是云开发获取起来就十分的简单。我们创建一个云函数,取名为getOpenId,创建完成之后,我们可以发现初始的代码片段,就有返回openid的操作。// 云函原创 2020-07-19 22:23:07 · 2165 阅读 · 0 评论 -
微信小程序实现元素的垂直居中
我们在进行日常前端页面的开发时,让元素垂直居中的操作数不胜数,初学者可能不太了解如何操作,方法很多,我说一种我用的比较多的。我们以一个块元素view为例,首先我们写一个宽高分别为300rpx的view,加一个背景色方便我们直观感受效果。这是默认的效果,view会在左上角。现在我们的任务是让这个view垂直居中。垂直居中分为两步,我们先实现水平居中。因为view是块元素,我们只需要设置margin值即可<view class="test"></view>.test原创 2020-08-12 22:16:28 · 5645 阅读 · 0 评论 -
微信小程序过渡提示框showLoading的使用
在微信小程序中用户进入一个页面时会经历一个页面的加载渲染过程,这个过程的时间受诸多因素影响,如果不加以处理,用户体验就会很差,很多开发者都会选择加一个提示框用以过渡。官方提供了一个showLoading界面交互API用以此需。一般我们都是把它放到页面的生命周期函数onLoad中,showLoading和hideLoading并用。wx.showLoading({ title: '加载中'})wx.hideLoading({ })这两个API都是有回调函数的,可以根据原创 2020-08-12 13:16:22 · 3397 阅读 · 0 评论 -
微信小程序云开发实现增删改查(查)
目录:微信小程序云开发实现增删改查(增)微信小程序云开发实现增删改查(删)微信小程序云开发实现增删改查(改)微信小程序云开发实现增删改查(查)之前我们已经实现了增删改查的增删改操作,这次我们实现最后一个查询操作。有实际项目经验的同学都知道,增删改查中,最复杂,情况最多的就是查询操作了。因为主要针对的是刚入门的同学,所以我们这篇文章不讲解特别复杂的情况,如果在实际开发中遇到情况,可以联系我。承接上文,现在product集合中已经有了一组数据,我们再加入一组。首先我们说一下全部查询,就是将一原创 2020-08-05 22:29:13 · 3605 阅读 · 1 评论 -
微信小程序云开发实现增删改查(改)
在之前的文章中,我们已经实现了增加和删除的操作,这次我们实现改的操作。我们依然像讲解增加操作的那篇文章一样,先添加一些字段进product集合中,方便我们修改。模板: onLoad: function (options) { db.collection('集合名称').doc('要修改的数据表的_id值').update({ data:{ // 采用键值对的方式,填入修改的数据 }, success(res){ // 修改原创 2020-08-05 21:36:19 · 2977 阅读 · 1 评论 -
微信小程序云开发实现增删改查(删)
承接上文,上文实现了增删改查的增操作,这次我们实现一下删除操作。之前我们向云数据库的product集合在中,增加了name,age,gender三个字段的数据,_id和_openid是系统自带的。现在我们删掉它。模板: db.collection('集合名称').doc('要删除的数据的_id').remove({ success(res){ // 删除成功的回调函数 }, fail(res){ // 删除失败的回调函数原创 2020-08-05 21:23:33 · 2530 阅读 · 0 评论 -
微信小程序云开发实现增删改查(增)
微信小程序云开发技术越来越普及,更低的开发门槛,更快的开发效率,更合理的开发成本,吸引着更多的开发者涉足。作为一个完整的项目,增删改查一定是必不可少的环节,云开发实现增删改查非常的无脑,有手就行。首先我们做一下准备工作,打开app.js,在onLaunch函数中,初始化云开发环境。这里的env,可以打开云开发的可视化面板,点设置那里查看,每个人的都不一样。ok,我们先实现增。我们先在云数据库目录,新建一个product的空集合。然后新建一个空页面。首先我们需要在新建页面的js文件中的顶部原创 2020-08-05 20:46:14 · 3717 阅读 · 1 评论