玩烂小程序-CSDN博客

原创小程序开通流量主后，两点注意事项！！！一定要知道！！！

小程序累计用户突破1000当天，相信每位开发者都很兴奋，迫不及待的想要开通流量主，添加上梦寐以求的微信广告，但是欲速则不达，为了不耽误广告收益，不影响美丽的心情，提前知道这些，是很有必要的。

2020-05-09 16:13:48 4752

原创小程序—这款工具把加速计、陀螺仪、设备方向的调试痛点解决了

通过接收加速计、陀螺仪、设备方向返回的数据，实时绘制在折现图表上，这样一边晃动手机，一边可以观察图表中数据的变化，能够很快分辨出动作所带来的数据变化，方便调试。

2020-04-13 13:34:42 3815 6

原创 100个微信官方小程序片段

音乐播放列表渲染组件模板组件:host选择器组件styleIsolation样式隔离wxs响应事件—movable、右滑显示左侧侧边栏、滚动菜单栏贴顶、跟随swiper的图片切换效果界面动画的常见方式关键帧动画滚动驱动的动画外部样式类组件间触发事件组件间触发事件的选项组件中使用behaviors组件中使用内置 behaviors: ['wx://form-field']...

2020-02-17 14:50:33 918 1

原创通过小程序性能体验报告，我们早知道小程序开发过程中应该注意哪些问题

体检项详情1.启动性能：待优化描述：根据近期小程序的启动耗时、打开率等数据综合评估建议：减少代码包体积（如使用分包、独立分包），提高启动性能。查看加载性能监控2.页面加载性能：性能良好描述：根据近期小程序的页面加载耗时数据评估3.JS接口性能：性能良好描述：根据近期小程序的JS接口错误数等数据综合评估4.网络性能：待优化描述：根据近期小程序的网络请求成功率、请求耗时...

2020-02-16 09:26:12 1310

原创推荐一组学习小程序（wxss）样式的工具

摘要每当调试小程序样式，我都是猜的，这个参数不合适就换一个，可那么多参数，那么多组合，拔了几百根头发还是调不好，就想能不能有个工具，直接让我去体验效果，效果合适后又能给出参数值，为了防止每次都拔几百根头发，还是决定一次性拔，写下这个工具。部分效果...

2020-01-18 15:53:37 762 1

远看色,近看形,细看质”，我不是设计师，所以彩色那么美，却总也不会用，就想要是有一款颜色的工具可以帮助使用颜色，那不挺好？网上找了一些，要不就不是自己想要的，要不就是收费的，这可不符合我的习惯，所以干脆自己搞一款。首先想到的是怎么找到自己喜欢的颜色，从图片上直接吸取颜色是我第一个要做的。效果还算不错，但交互体验上还有待提升，仅当demo记录，有没有人对怎么实现感兴趣的，可以找我聊聊，随后代码及程序将会在Demo集中营小程序里发布出来，欢迎大家访问。

2023-08-08 00:46:49 739 1

原创小程序使用threejs第五篇—室内效果3D文件的加载，可旋转查看上下四周效果

在上一篇小程序使用threejs第四篇—加载3D模型中我们介绍了threejs加载几种3D模型，包括gltf、obj、glb等格式。但好像一直没有用的场景，最直观的场景应该是室内效果了。解决思路室内效果图一般用到一种.hdr格式的文件，这种文件可以在PolyHaven这个网站下载到，这样素材的问题我们就解决了；由于这种格式的文件较大，放在小程序里不太现实，所以有自己服务器的可以把它放在服务器，没有的也没事，微信云开发给我们提供了很大的方便，传到云存储，用的时候把fileID换成临时下载路径是很完美

2021-11-29 22:33:15 2836 1

原创微信小程序—调用imgSecCheck接口实现多张图片鉴黄，敏感过滤

之前写过单张图片调用微信小程序—智能鉴黄、敏感识别的文章，突然有客户要求批量上传图片时实现这个功能，以为很简单，结果发现还是有很大差别的。效果如下：体验路径：客户端代码：// miniprogram/pages/index/pages/imgSecCheck/imgSecCheck.jsPage({ /** * 页面的初始数据 */ data: { cWidth: "", cHeight: "", srcList: [], srcTips:

2020-12-09 10:45:10 4585 1

原创 H5头像完整制作，可拖拽缩放，可添加装饰图标（装饰图标支持缩放、旋转、拖拽）

看完效果是不是觉得实现还不错！！！1、伪加载效果2、上传图片后支持对图片的拖拽、缩放编辑3、编辑后裁剪4、裁剪后可添加装饰图标5、装饰图标支持缩放、拖拽、旋转、取消等功能6、摆放好图标后生成最终头像7、对UI设计的还原

2020-08-03 17:44:46 1413

原创微信小程序—仿美团酒店入住日期时段选择

美团市值突飞猛进，确实霸占了我们的吃喝玩乐，所以想做什么东西，研究一下美团也是不错的。最近需要用到一个酒店入住日期选择的组件，看了一下美团的设计，很好用，在此实现一下。

2020-06-19 20:56:55 2276 1

原创微信小程序——仿抖音短视频切换效果

一直以为抖音短视频切换假如用小程序做的话应该是比较简单的，直接用swiper实现就好，但在实际写的过程中才发现没那么简单，要控制的逻辑还是挺多的。

2020-06-09 21:13:51 6045 4

原创微信小程序——小程序中利用canvas把数据直接绘制成二维码，不调官方接口

微信小程序中官方支持调用他们接口获取二维码，但能不能小程序端直接生成二维码呢？毕竟Android、ios等都可以调用接口生成二维码，答案是肯定的，因为我们有canvas，只要按照二维码生成的规则去绘制就好了。

2020-04-20 09:29:53 987

原创微信小程序之图表系列——canvas绘制饼状图，带点击效果

上篇文章[微信小程序之图表系列——一步步用canvas实现柱状图](https://blog.csdn.net/WeiHan_Seven/article/details/105422927)制作了柱状图，做完之后不管对制作图表还是canvas都会有一个新的认识，这篇文章做个练习，制作一下饼状图，同时还要再增加一个点击效果，因为毕竟很多图表是需要与用户交互的。

2020-04-10 15:16:02 4059

原创微信小程序之图表系列——一步步用canvas实现柱状图

一图胜千言，相信很多开发者都没有绕开过图表制作这个坑，在小程序中也是，当然可以用第三方echart等制图插件来做，但小程序要求代码量最大12M，还得分好几个包，一个echart插件就将近1M，要是只做一张表或几张表实在浪费，况且小程序的加载速度与程序包大小也是息息相关的。因此写这系列文章，目的是降低程序包大小，又能实现需要的图表。

2020-04-09 23:27:58 6561

原创微信小程序之图表系列——最简单的表格制作

2020-04-09 18:33:30 8105

原创小程序权限逻辑—如何严谨的获取用户录音、地理位置等权限并兼容用户拒绝授权的场景

本方案适合：地理位置、运动步数、录音、保存到相册等权限的获取，至于后台定位、摄像头等特殊权限请稍等片刻

2020-04-05 16:41:59 863

原创微信小程序——转发后场景值不稳定的原因及退回主页的解决方案

分享卡片进到目标页面的想退回主页，发现退不回去了，直接redirectTo到主页，会影响主页进入目标页面再返回的效果，本来那么多场景值就够烦人了，现在还不那么准确

2020-04-01 00:36:33 1275

原创想转产品经理的程序员，先来分析一下这款小程序的用户画像

人人都是产品经理是经常挂在嘴边的一句话，对此，不少程序员蠢蠢欲动，找到了一万种理由去向产品经理靠拢，凡是有这种想法的，大都认为自己很有想法、适合做产品经理，当然，产品经理并不是多牛逼的角色，只是有那么几位神话了这个行业，大多数还是一样的扯淡，即便这样，产品经理与程序员也如隔山一样，难以跨越。

2020-03-31 21:32:34 507

原创微信小程序瀑布流，可直接体验

先看效果：直接体验：还可以的话，再看代码：js：let col1H = 0;let col2H = 0;Page({ data: { scrollH: 0, imgWidth: 0, loadingCount: 0, images: [], col1: [], col2: [] }, onLoad: function...

2020-03-29 08:53:15 514 2

原创微信小程序——秒表组件

这是一个小程序秒表组件，效果如下：体验：组件代码：jsComponent({ properties: { startTime: { type: Number, value: 0 } }, data: { text: '00:00.00', text1:'0 天 0 时' }, ready() { this...

2020-03-16 15:56:46 2308

原创微信小程序—这个完美的搜索框一定是你需要的，拿去用（热门搜索、历史搜索、帮助搜索...）

搜索框是比较常用的，看似简单，逻辑甚是复杂，急需一个逻辑严谨、交互优雅、功能齐全的，假如您是需要搜索框附带热门搜索、历史搜索、帮助搜索等功能，恭喜，这个拿去用就是了。

2020-03-11 20:05:51 740

原创微信小程序—如何使用动画加载神器Lottie

lottie动画是程序员的福音，很有一劳永逸的感觉，本文主要介绍lottie在小程序端如何使用？以及存在哪些问题？

2020-03-10 21:22:49 5518

原创微信小程序—这个位置我们可以做点文章

自定义wx.previewImage，预览图片时可自定义添加内容，比如广告位

2020-03-10 16:35:12 394

原创微信小程序—带qq表情的评论输入框

直接上效果：表情与文字切换部分点击识别表情部分体验实现思路：1、动画控制切换2、emoji-parse解析表情代码：const emojiList = require('components/emoji-parser/wechat_emotion.js')const emojiKeys = Object.keys(emojiList)const emojiValue = O...

2020-03-10 14:44:57 1660

原创微信小程序——图片模糊加载整个过程（默认图>缩略图>原图）

图片加载的整个过程是这样的，当进入一个页面一般我们是没有图片链接的，所以需要先调用接口获取图片链接，再将图片加载渲染到image上，图片一般采用1.5倍资源图，所以大小都在30kb左右，这样图片加载渲染的时间非常短，可以忽略，但是碰到特殊需求尺寸非常大的图片就不能忽略，因此整个过程是这样的：进入页面>>获取图片链接>>加载完毕小图解决方案：进入页面>>加载...

2020-03-10 13:55:55 4573

原创小程序笔记—image中如何显示一张图片的指定部分

image中可以调整mode属性来调整图片要显示的上、中、下、左、右等各个区域，但是在使用过程中并不能精确指定，比如要实现如下效果：怎么办呢？就是在一整张表情中根据点击显示点击区域的表情。体验：上代码，一看就会：.emoji { background: url('https://6e598.tcb.qcloud.la/meinv/qqface.png?sign=675ae84c29...

2020-03-08 20:26:15 2843

原创微信小程序—自定义相机

小程序自定义相机？其实有些名不副实，因为小程序给提供的接口简单到不能再简单，不给你丝毫修改的机会，能做的不过是在相机上覆盖cover-view、cover-image、canvas之类的，来提升相机的拍照体验。今天说的这个自定义相机是除了增加拍照之前的体验之外，拍照之后也增加了图片的处理，如下效果：效果说明：将一张png覆盖在相机上，拍照后，将这张图片与所拍摄照片通过canvas直接拼接，...

2020-03-07 13:31:33 3273 1

原创小程序笔记—手指画一条线，如何判断自相交

在小程序canvas上画一条曲线，如何才能知道这条曲线是否自相交呢？焦点又在哪呢？因为项目需要，不得已问出这样一个问题？本来以为很简单，可是好难啊？实现效果：体验：分析：1、这条曲线是由touchmove所返回的点通过连接绘制而成的2、也就是这条曲线是由好多条短短的线段组成的3、如果能判断任意两条线段是否有交点，就表明曲线相交了，线段的焦点也就是曲线的焦点4、判断两条线段是否有交...

2020-03-07 10:59:55 1263

原创微信小程序——最炫乡村风，流传在父母圈里的动态相册集

市场下沉早已不是新词，可最近俺的麻麻总给我分享一个叫做心语相册的小程序，就是她把我的结婚照上传上去就产生类似幻灯片的动态效果，还带bgm，粗制滥造，满屏广告，可我又不得不做出相应的回应，不说他们的产品如何，只说这款小程序还是挺符合乡村场景的，今天就试着做个demo，回头也做款类似纯净版产品。看效果体验：写这个demo的新路历程：1、第一眼觉得乱糟糟挺复杂；2、后来想想其实就是图片叠加...

2020-03-05 20:26:55 1153

原创分分钟搞定贝塞尔曲线，这款工具值得拥有

贝塞尔曲线听名字就知道可以画一条优雅的曲线，可是上来就是控制点，它怎么控制呢，心里想的图形总是与这个控制点关联不上，憋着急，分分钟搞定。

2020-03-04 10:57:59 1940

原创微信小程序—InnerAudioContext实现一个音乐播放器

直接上效果：体验：自定义系列>>音乐播放器功能描述：1、可播放、暂停内置的一条音乐2、可控制播放进度3、音乐封面在播放过程中实现旋转动画4、背景图片表现为音乐封面的高斯模糊5、离开页面音乐停止播放完整代码：jsconst app = getApp()const innerAudioContext = wx.createInnerAudioContext();...

2020-03-02 15:10:25 3142

原创微信小程序—给图片添加相框

直接上效果：体验：思路：1、通过离屏画布（或者置于屏幕外的画布）将图片与中空png格式的相框叠加绘制（绘制需要计算图片尺寸、相框尺寸与画布宽高的关系）2、通过wx.canvasToTempFilePath将画布上绘制的内容导成图片即可代码：jsPage({ /** * 页面的初始数据 */ data: { canvasWidth:0, can...

2020-02-29 21:40:53 8514 2

原创微信小程序—悬浮球弹出多个item

悬浮球弹出多个item这个效果应用的场景还是挺多的，小程序中实现比较简单，思路也比较清晰，所以写这个demo不为别的，只为熟悉一下小程序的动画操作。

2020-02-28 16:02:42 2660 1

原创小程序笔记—动画的同步执行与异步执行

小程序动画执行的顺序关键点在于step，即动画执行步骤：动画使用 <image style="width:80rpx;height:80rpx;" src="./float.png" bindtap="showAnimate" animation="{{animation}}"></image>异步执行，即一起执行showAnimate(e) { var ...

2020-02-28 13:20:36 563

原创小程序使用threejs第四篇—加载3D模型

外部3D模型格式很多，常用的有gltf、obj、glb等，但是也没有形成类似于2d图片jpg、png这样具有统一标准的规模，同时目前好像没有一个通用的加载器可以兼容所有的，所以也带来一些总觉得乱七八糟的困扰。所以我们这里也就简单介绍一下。

2020-02-27 13:41:25 10607 10

原创小程序使用threejs第三篇—介绍几种几何模型

在上一篇[小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转](https://blog.csdn.net/WeiHan_Seven/article/details/104493821)中，我们还遗留了一个小问题，就是展示的立方体如何随手势旋转缩放，当我们处理了这个问题，接下来介绍几种几何模型，大家可以试着把他们添加到场景下再渲染出来...

2020-02-26 14:51:12 5923 12

原创小程序使用threejs第二篇—立方体展示并自动旋转与手势旋转

在上一篇[小程序使用threejs第一篇——安装](https://blog.csdn.net/WeiHan_Seven/article/details/104472261)中，除了说明了threejs在小程序中如何构建，还附带了一个小小的示例——一个旋转的正方体，接下来我们先花一点点时间通过示例代码了解一下发生了什么？且看代码注释

2020-02-25 16:16:14 6362 1

原创小程序使用threejs第一篇——安装

Three.js 小程序 WebGL 的适配版本（threejs-miniprogram）已经发布很久了，我也好奇了很久，终于有时间去学习研究一下，不对的地方欢迎指正。

2020-02-24 10:25:28 7537 14

原创微信小程序—ocr识别图片上文字

直接上效果：自主体验文字识别代码：// 云函数入口文件const cloud = require('wx-server-sdk')cloud.init()// 云函数入口函数exports.main = async (event, context) => { try { const result = await cloud.openapi.ocr.print...

2020-02-22 17:12:35 5621 4