![](https://img-blog.csdnimg.cn/20191011094920974.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序
文章平均质量分 90
微信小程序相关
爱唱歌的前端
今天采坑了吗?
展开
-
微信小程序全局组件的定义
项目场景:在做项目中,当我们写到一些共用的js代码时,为了去耦合实现模块化,会把共用js代码提取出来封装好,哪里需要使用到的引用一下就好了。同理的,在小程序开发中,为了精简化项目,我们可以把共用的一部分代码(比如说登录弹窗、活动状态弹窗等)提取出来,写成组件,需要用到也页面引入一下就好了。Demo演示:为了方便演示父页与子组件间的数据传输,我写了个简化版的全局登录弹窗,具体可以看下面的GIF代码部分:项目结构: 我们先看下目录的具体结构,一般情况下创建的组件都会放到components文件夹原创 2021-10-02 15:16:04 · 3633 阅读 · 2 评论 -
微信小程序云开发-证件照的实现
项目场景:最近发现一些好玩的小程序,那就是证件照制作,不知道是干嘛的可以微信搜索一下“证件照”,会有特别多这样的小程序,自个体验下,那么在小程序云开发中可以怎么去实现这一功能了?效果展示:功能分析:首先我们来分析一下这项目的大致功能,首先需要一张图片,然后把这张图片的人物与背景分离,接着把分离后的人物放到一个容器,之后做一个选项按钮来更改容器的背景颜色,最后将其合并保存成新的图片就好了。具体实现: 1.首先为了方便截取图片,我使用了SimpleCrop截图插件,但是在开发过程中,我发现用原创 2021-09-01 09:11:52 · 4801 阅读 · 53 评论 -
微信小程序云开发如何将页面生成为pdf?
项目场景:最近有小伙伴问了一个问题,那就是在微信小程序云开发如何将页面生成为pdf?但是在没有后端工程师的协助下,我们要怎么办了?解决方案:于是便逛了一下午的微信社区,但很遗憾腾讯baba没有给出相应的api或决绝方案,好在有神奇的留言,找到了关键词,那就是wxml→canvas→img→pdf,wxml转化转化成canvas之后在生成img,微信官方已经给出了组件wxml-to-canvas可以解决,那么img转化成pdf要怎么办呢?可以用pdf-lib,好在看到了黄宝~这位大佬的文章,省去了很多原创 2021-08-17 15:05:46 · 10950 阅读 · 27 评论 -
微信小程序云开发之券码领取,怎么防止用户领取到相同的数据?
项目场景: 之前在云开发中遇到了券码领取类型的活动, 但是在没有后端提供接口领取的情况下,我们要怎么去分配券码给用户了?问题描述:当项目把一批券码发过来的是后,我的第一反应是给每一个券码都加上一个boolean值,用于标识当前的券码有没有被领取过,当用户点击领取时,把预先存放在云数据库表里的集合数组拿过来,之后循环数组,直到遇见未被领取过的那一条数据,把它发放给用户,之后把云数据库表里的这一条数据状态改已领券。但是,当我做完后,我发现了一个问题,那就是当用户A和B同时点击领取时会领取到相同的券原创 2021-08-02 14:33:51 · 609 阅读 · 0 评论 -
微信小程序九宫格抽奖和转盘抽奖的实现
描述:最近在工作中遇到了小程序抽奖的一些页面制作,以前制作网页抽奖的时候,在jQuery插件库谁便找一个Demo就可以满足我们的需求了,自己动手写的话不仅会拖慢项目进度,而且写出来的也未必有别人的那么流畅自然。而在小程序中我们就没有这么幸福了(ಥ﹏ಥ),并没有丰富的插件库供给我们使用,所以该写的还得自己动手写。好了,下面是常见的两种抽奖方式:九宫格和转盘,在实际项目中用的还不错,分享给大家。一、九宫格抽奖:效果:思路: 首先是结构上,用弹性布局就可以了,每一个奖品的宽度设置成3分之1,超原创 2021-05-07 20:08:18 · 14575 阅读 · 20 评论 -
微信小程序自定义swiper轮播图面板指示点|小圆点|进度条
描述:在工作中开发一个页面,多少都会用到轮播图,但是由于微信官方提供的轮播图swiper组件局限性太大了,所以接下来我会教大家怎么去自定义轮播图的进度条。简单修改:如果你的项目只是简单的修改小圆点的颜色,那么只需要修改官方提供的indicator-color和indicator-active-color参数就可以了 属性 类型 默认值 说明 indicator-color原创 2020-12-12 18:28:15 · 21411 阅读 · 8 评论 -
微信小程序怎么批量生成带参数的小程序码?
最近在工作中遇到了一个问题,公司需要批量生成二维码,但是通过微信公众平台生成只能一次生成一张,如果通过云函数循环的去调用云函数api生成的话实现起来也比较费时间,所以最终找到了一个第三方的网站-草料二维码生成器,使用后还不错,分享给大家。草料二维码怎么通批量生成带参数的微信小程序码?效果我录制了一个GIF大家可以看一下,挺方便的,只要把图片的文件名和二维码的参数排列到excel表就可以批量生成了。详细步骤首先我们就进入草料二维码官网,然后用微信扫码快速登录一下就好了,因为我们只用生成二维码的原创 2020-10-25 15:28:17 · 3054 阅读 · 0 评论 -
微信小程序云开发之模糊搜索
以前在做前后端分离的项目时,要实现一些搜索框的模糊搜索时,运气好一点,后端攻城狮会处理好逻辑,前端只需在输入框的value值发生变化时去调用接口重新渲染数据就好了。运气差点,后端攻城狮只会给你一个总的数组,然后在值发生变化时得自己动手写逻辑去筛选数据。那么在微信小程序云开发上是怎么实现的了?微信小程序云开发之模糊搜索可以重下面的例子看到...原创 2020-10-24 17:28:42 · 7072 阅读 · 16 评论 -
微信小程序通过云函数生成带参数的小程序码
微信小程序通过云函数生成带参数的小程序码小程序云开发还是挺强大啊,以前动不动就需要后端攻城狮进行操作,现在没后端啥事了,但是头发却开始紧张了啊!o(╥﹏╥)o效果:接下来我说一下学了云函数后,如何通过云函数生成带参数的小程序码,具体效果请看GIF。然后手机上的话,大概是接过样子的憨憨模式:在没有用云函数时,只能先在微信公众平台去生成带参数的小程序码,接着,因为路径不支持中文,所以只能在接收到参数时在onLoad中去判断后另外赋值, onLoad: functi原创 2020-09-10 09:16:05 · 2132 阅读 · 7 评论 -
微信小程序云开发快速入门手册-告别切图仔的时刻到了
文章很长,建议先收藏,有充分的时间再学习,没有小程序基础的,也阔以先收藏哦。 本文章会手把手带各位小伙伴入门微信小程序云开发,因为我还不是全栈工程师,所以不是特别清楚前后端分离模式下,后端工程师需要做的具体事情,所以我就不扯普通开发模式和云开发模式的区别了以及其他相关的理论知识了,不过各位放心,我有信心教会各位怎么在实际项目中使用云开发模式。 ٩͡( 。ớ ₃ờ)۶呵呵下面这张图是我自己理解的云函数开发模式,大家阔以瞄瞄。(づ◡ど)1、 首先云开发给我们提供了三大功能:2、其次等我们写完静态代码后,就可原创 2020-09-03 22:25:46 · 2003 阅读 · 2 评论 -
微信小程序红包(优惠劵)弹窗的实现
现在的小程序红包、优惠劵满天飞,So,老板终于忍不住把产品经理叫了过去,苦逼的我只好摸了摸头,瞬间安心了。好了,接下来分享个小程序红包(优惠劵)弹窗给大家,效果看我录制的GIF。首先梳理一下我的思路,先是设置一遮罩层悬浮,宽高沾满,然后在遮罩层的上一层再设置一个盒子也是悬浮且宽高沾满,里面内容居中的话用弹性布局就好了,然后再内容用catchtouchmove禁用滚动条,禁用滚动条没必要放...原创 2020-01-21 16:27:33 · 7761 阅读 · 5 评论 -
微信小程序自定义navigation-bar导航栏(自适应安卓苹果)
最近在写商城,中途遇到了需要自定义修改导航栏的操作,大概是如下图接过样子的,于是想手写一份,但我发现右上分的分享按钮在不同设备离顶部的距离是不一样的,于是找了下官方程序员写的文档(点这里查看),(⊙o⊙)…一脸懵逼咧,貌似不能满足这需求,而且后续也要实现点击导航滚动定位,组件传参麻烦,而且未必能实现,于是我把WeUI的navigation-bar组件的精华提取出来写了一份。wxml文件<...原创 2020-01-02 23:11:44 · 20307 阅读 · 8 评论 -
微信小程序中实现点击导航条切换页面(可左右滑动视图)
我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动。wxml代码:首先在js定义了navState用于判断导航的当前状态,定义了data-index用于js中动态修改导航的当前状态,nav-switch-style为选择导航条时的样式,不可滚动视图切换很简单,用wx:if判断转态显示相应页就好了,滚动页视图切换要用到swiper和 swiper-item,用bindch...原创 2019-11-05 14:40:41 · 13996 阅读 · 12 评论 -
微信小程序中实现点击导航标签滚动定位到对应位置
公司的项目不好展示效果,我就直接用我的简历小程序示范了wxml部分specify-style是我自定义选中标签时的样式,可自行更改;block_ScrollTop多减70是因为我的导航是悬浮的,会挡住部分内容,自行修改;板块里的内容就不给了,自己随便写点东东; <!-- 导航 --> <view class='nav' id="tab-con"> &...原创 2019-10-12 20:23:07 · 8987 阅读 · 5 评论 -
微信小程序返回上一页携带参数
首先用navigateBack返回的流程一定是这样的:A页面跳到了B页面,B页面要返回A且代参在B页面wxml写了个按钮点击<button bindtap="lastStep">点击返回页面A</button>在B页面js中编写返回代参的方法 //选择项目 lastStep: function() { //自定义返回值 let returned...原创 2019-10-12 14:25:07 · 1329 阅读 · 0 评论 -
原生微信小程序报错笔记
1.如下图报错:域名不在以 request 合法域名列表中解决方法:打开微信开发工具,点击右边详细,再点击本地设置,然后把不校验合法域名打上勾。原创 2019-07-22 17:52:07 · 436 阅读 · 0 评论 -
我的小笔记 =》原生微信小程序
1.封装http新建utils目录与pages文件夹同级,然后创建config.js文件数据如下图。(GetReserveShop_config为自定义的名字)/** * 小程序后端接口配置文件 */var host = "https://xxx.net"var config = { // 下面的地址配合 Server 工作 host, //配置 GetReserv...原创 2019-07-24 11:10:32 · 336 阅读 · 0 评论 -
微信小程序wxParse循环输出多个HTML富文本(标签)
如下图,这是我要实现的效果,每一行都是一个超文本。经过一番百度我找到了官方给的列子:wxParse多数据循环使用方法但是我发现输出的结果是介个样子的,这样我很懊恼于是进过一番尝试我发现可以用index解决,有两重循环,其实都是循环同一个数组,我给两for循环添加了一个for-index分别为idx和idx1,输出时我让他两相等才通过,这样就可以解决这个问题了<block wx:f...原创 2019-09-29 17:44:53 · 1397 阅读 · 2 评论 -
微信小程序中使用ECharts&怎么动态绑定数据?报表数目不确定怎么办?
快速到达官网:ECharts官方网址说明ECharts相关JS文件导入项目下载GitHub项目:ECharts官方给的GitHub项目然后把ec-canvas文件夹放到你项目的pages同级目录pages下4个文件引用与使用下面是我工作中的某一个页面page(需注意导入路径,我这page离根目录3层,所以是../../../ec-canvas/ec-canvas).json文件...原创 2019-10-08 14:32:49 · 2391 阅读 · 5 评论 -
微信小程序中实现点击当前标签改变样式以及同时改变后几个标签的样式
如下图,这便是我要实现的效果,点击11点添加样式随后的11点半和12点也添加样式,做小程序的你应该可以发现下边的时间数组并不是一次就可以遍历完,上午、下午、晚上各循环了一遍,之前我用JS和JQuery写过了一遍一样文章:点击跳出,但是小程序并不支持DOM对象,所以这里来看下小程序是怎么实现的。先看下wxml我的思路是这样的,首先在循环遍历数组时判断上午下午晚上的时间进行输出,我直接用字符串进...原创 2019-10-09 14:08:47 · 5434 阅读 · 0 评论 -
微信小程序用npm导入WeUI以及使用
首先进来的我相信都会用npm了,不会的滚出去度娘学习下。配置package.json文件我新建了个项目叫test,然后在项目目录栏上输入cmd回车键进入命令行然后在命令行输入npm init回车键然后会提示输入项目名、作者等,一直按回车键就可以了,因为后期可以改的。然后会提示确定,yes回车键导包与构建然后输入npm install --save weui-miniprogram...原创 2019-10-10 16:37:07 · 5330 阅读 · 0 评论 -
我的小笔记 =》Taro
123原创 2019-06-01 18:11:50 · 183 阅读 · 0 评论