WeiHan_Seven的博客

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基于微信aiCrop接口实现智能裁剪功能，选择一张图片，由微信智能算法返回裁剪的位置，自主实现裁剪功能。

小程序提供内容安全接口security.imgSecCheck：图片检测security.msgSecCheck：文本检测调用效果如下：敏感信息，不好暴漏，可自行体验体验路径：扫码>>AI智能系列>>安全检测—敏感词语、黄色图片...

在使用搜索框功能时发现微信、淘宝、百度等都会弹出顶部带语音输入功能的软键盘，觉得很不错，小程序或许也会用到，先试着实现一下，结果发现，限于小程序官方接口的原因，并不能做到尽如人意，只是形似而已

逛淘宝的时候，发现淘宝搜索框中一直在垂直方向上轮播热搜提示词，觉得这是个不错的设计，除了能让空间更充分使用，也能让页面更有动感，最重要的是能够增加搜索框的使用频率。就在小程序中试着实现实现。

小程序顶部总会看到滚动的通知栏，一般单条的都会用跑马灯去实现，但面对多条的内容，就需要用轮播去实现，轮播自然是swiper了，查了查，还真有vertical这个属性，swiper真好用。

flex布局是小程序的主流布局之一，在写布局的时候总是无法避免align-items与align-content这两个属性，除了知道它们是控制交叉轴的对齐方式，但究竟什么时候用哪个，只能这个不行，就换那个，今天就来搞明白他们的异同。

本文提供自定义弹出式键盘，包含车牌键盘、十六进制等四种类型

本文提供三种验证码的实现思路及代码，滑块验证、无规则验证码、拼图验证。

最近在研究拼图验证码实现，需要对图片的部分模块进行特殊形状切割出一小块，明白后原来是如此简单，第一步就是将所有绘制的形状用线勾出（直线、弧线、贝塞尔曲线都可以）形成闭环，第二步就是切割绘制，第二步不麻烦，麻烦的只是第一步，需要一些计算，所以会在以后，尽力的多保存一些特殊形状的方法。

美图秀秀处理图片的功能真是没的说，那些什么小美好、小森林、白兔糖、小纸条等等的特效，说白了都是滤镜的作用，只不过滤镜的参数需要调整才能起到美化的作用，再接着起个小美好、小森林这样毫无关系却又优美无比的名称，这里只提供特效方法，不提供美化参数。

计算机的发明让手写受到毁灭性打击，但手写的经典不能埋没，这是一款手写签名工具，根据手写速度计算笔宽，很有毛笔的风韵，请拿去使用。

这是一款图分析图片配色方案demo，图片色彩分析或许可以应用在智能分析色彩领域，比如穿衣搭配、家装等设计或生活领域，但需要大量数据的支持，希望技术能够更好的被应用

刮刮乐，因为未知而格外显得神秘，特别是在奖项激励的场景下，更加激动人心，没人给奖，刮个美女是啥效果？？？????嘻嘻嘻.....充满想象空间.

个人认为，一个拥有良好交互的应用，一定在细节上抠的特别细，loading相信就是其中之一的细节，从网上搜集了一些不错的loading动画，现在分享一下，对应代码，我会以免积分下载方式附在文末。

指南针是中国的四大发明之一，小程序实现并不复杂，却总有一种冲动去实现，可能是为了向老祖宗致敬吧！感兴趣的同学可以把它实现的更精致。

摇一摇算法网上很多，但都是简单的实现，并不能达到微信摇一摇那种监听动作的准确，为了更好的实现摇一摇，首先需要理解加速计返回数据与摇晃动作的关系，因此介绍一款找加速计数据规律的工具，可直接扫码使用，理解关系后，就很容易实现摇一摇功能。

实现水平仪的算法不难，但是理解加速计—wx.onAccelerometerChange、陀螺仪—wx.onGyroscopeChange、设备方向—wx.onDeviceMotionChange这些接口返回数据很恶心，一是只能真机调试，二是晃动手机很难在一堆数据中找到规律，很恶心，为此，本文除了介绍水平仪的简单算法外，更重要的是介绍一款找数据规律的工具。