公众号编辑完成，保存一直转圈，无法保存并群发，怎么办？

方案一： 直接使用 1 px 存在的问题是 border 会比较粗 [代码]border[代码][代码]: [代码][代码]1px[代码] [代码]solid[代码] [代码]red[代码][代码];[代码] 方案二： 直接使用 1px,并且添加 transform:scaleY(0.5); [代码]border[代码][代码]: [代码][代码]1px[代码] [代码]solid[代码] [代码]red[代码][代码];[代码][代码]transform:scaleY([代码][代码]0.5[代码][代码]);[代码]

最近老是有同学问我小程序ocr识别的问题，就趁机研究了下，实现了小程序识别身份证，银行卡，驾照，营业执照，图片文字的功能。今天来给大家讲讲详细的实现流程。 先画一张流程图出来 [图片] 第一次看到这个流程图，可能有点萌，什么云开发，云函数。。。。 不要着急，我们接下来会一步步带大家实现。 先看下我们的页面和效果图。 [图片] 功能其实很简单，就是我们点对应的按钮后，去拍照或者去相册选择对应的图片。然后把图片上传到云存储，会有一个对应的图片url，然后把这个图片url传递到云函数，然后云函数里使用小程序的开发ocr能力，来识别图片，返回对应的信息回来。如下图所示，我们识别银行卡（身份证什么的就不演示了，涉及到石头哥个人隐私） [图片] 接下来就是代码的实现了。 一，首先要创建一个云开发的小程序项目 这里我前面文章有讲解过，就不再细说了，不会的同学去翻看下我之前的文章。或者看下我录制的 讲解视频 这里有一点需要注意的给大家说下 [图片] 二，创建一个简单的小程序页面 1，index.wxml如下 [图片] 2，index.js完整代码如下 [代码]Page({ //身份证 shenfenzheng() { this.photo("shenfenzheng") }, //银行卡 yinhangka() { this.photo("yinhangka") }, //行驶证 xingshizheng() { this.photo("xingshizheng") }, //拍照或者从相册选择要识别的照片 photo(type) { let that = this wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { // tempFilePath可以作为img标签的src属性显示图片 let imgUrl = res.tempFilePaths[0]; that.uploadImg(type, imgUrl) } }) }, // 上传图片到云存储 uploadImg(type, imgUrl) { let that = this wx.cloud.uploadFile({ cloudPath: 'ocr/' + type + '.png', filePath: imgUrl, // 文件路径 success: res => { console.log("上传成功", res.fileID) that.getImgUrl(type, res.fileID) }, fail: err => { console.log("上传失败", err) } }) }, //获取云存储里的图片url getImgUrl(type, imgUrl) { let that = this wx.cloud.getTempFileURL({ fileList: [imgUrl], success: res => { let imgUrl = res.fileList[0].tempFileURL console.log("获取图片url成功", imgUrl) that.shibie(type, imgUrl) }, fail: err => { console.log("获取图片url失败", err) } }) }, //调用云函数，实现OCR识别 shibie(type, imgUrl) { wx.cloud.callFunction({ name: "ocr", data: { type: type, imgUrl: imgUrl }, success(res) { console.log("识别成功", res) }, fail(res) { console.log("识别失败", res) } }) } }) [代码] 上面代码注释讲解的很清楚了，再结合我们的流程图，相信你可以看明白。 [图片] 三，重头戏来了，识别的核心代码是下面这个云函数 [图片] 云函数的完整代码也给大家贴出来 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async(event, context) => { let { type, imgUrl } = event switch (type) { case 'shenfenzheng': { // 识别身份证 return shenfenzheng(imgUrl) } case 'yinhangka': { // 识别银行卡 return yinhangka(imgUrl) } case 'xingshizheng': { // 识别行驶证 return xingshizheng(imgUrl) } default: { return } } } //识别身份证 async function shenfenzheng(imgUrl) { try { const result = await cloud.openapi.ocr.idcard({ type: 'photo', imgUrl: imgUrl }) return result } catch (err) { console.log(err) return err } } //识别银行卡 async function yinhangka(imgUrl) { try { const result = await cloud.openapi.ocr.bankcard({ type: 'photo', imgUrl: imgUrl }) return result } catch (err) { console.log(err) return err } } //识别行驶证 async function xingshizheng(imgUrl) { try { const result = await cloud.openapi.ocr.vehicleLicense({ type: 'photo', imgUrl: imgUrl }) return result } catch (err) { console.log(err) return err } } [代码] 其实没什么特别的，就是用一个switch方法，根据用户传入的不同的type值，来实现不同的识别效果。 如用传入的type是‘ yinhangka’，我们就调用银行卡识别 [代码]try { const result = await cloud.openapi.ocr.bankcard({ type: 'photo', imgUrl: imgUrl }) return result } catch (err) { console.log(err) return err } [代码] 进而把识别的结果返回给小程序端，如下图 [图片] 到这里我们就完整的实现了，小程序识别身份证，银行卡，行驶证的功能。至于别的更多的ocr识别，可以去看小程序官方文档，结合着我的这篇文章，相信你也可以轻松实现更多的图片识别。 [图片] 源码其实在上面都已经贴给大家了，如果你觉得不完整，想要完整的源码可以在文章底部留言或者私信我。

在详情页，如果手机型号是iPhoneX的话有一个吸底区域，是用fixed固定在底部，但在详情页底部也有一个用fixed固定在底部的购买view，都是bottom：0；导致两个重叠，想要的效果是如果有吸底区域的话购买view会被挤上去，请问这个问题怎么解决，谢谢大神们🙏[图片]

打开社区，突然发现社区变白了，应该是擦粉了。🤣🤣🤣 分享一个表单验证组件，可提供数据验证和界面错误显示，效果截图如下： [图片][图片] 传送门在这里 https://github.com/ikrong/miniprogram-form-validator 下面格式不知道为什么都乱了，这什么鬼编辑器😒😒😒 安装 [代码]npm install miniprogram-form-validator // or yarn add miniprogram-form-validator [代码] 引入 在app.json中引入可全局使用 引入之后需要点击小程序开发工具的 【工具>构建npm】, 否则会报错的 [代码]{ "usingComponents": { "form-validator": "miniprogram-form-validator/form-validator", "form-tip": "miniprogram-form-validator/form-tip" } } [代码] [代码]<form-validator id="form" formGroup="{{formGroup}}" formData="{{formData}}"> <form-tip name="id"></form-tip> </form-validator> [代码] 验证器的字段含义 [代码]{ required: true, // 是否必填 message: "", // 出错后的提示信息 type: "", // 内置验证方法 regexp: RegExp, // 正则表达式 validator: Function // 自定义验证方法，返回 boolean 或者 Promise<boolean> } [代码] [代码]Page({ data:{ formGroup:{ id:[ { required:true }, { validator:(value,name)=>Promise<Boolean> }, ] }, formData:{ id:"", } }, async validate(){ let result = await this.selectComponents("#form").validate(); // 验证通过了 } }) [代码]

fetch.js [代码]const api = 'www.qq.com' export const Fetch = ({ url = '', data = {}, header = { "content-type": "application/json" }, method = 'GET', api = Api }) => { return new Promise((resolve, reject) => { wx.request({ url: api + url, header: header, method: method, data: data, success: res => { // 成功时的处理 if (res.data.error == 0) { resolve(res.data); } else { reject(res.data); } }, fail: err => { reject(err); } }) }) } [代码] api.js [代码]import { Fetch } from './fetch.js'; export const PostMiniList = data => { return Fetch({ url: '/post/post_mini_list.json', data: data, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' } }) } export const GetMiniList = data => { return Fetch({ url: '/get/get_mini_list.json', data: data }) } [代码] index.js [代码]import { PostMiniList, GetMiniList } from './api.js'; PostMiniList({ a:1, b:2 }).then( res => { // 成功处理 }, err => { // 失败处理 } ) GetMiniList({ a:1, b:2 }).then( res => { // 成功处理 }, err => { // 失败处理 } ) [代码] 把所有api放在api.js里统一管理，利用promise使我们只关注返回的结果

wxutil 这是一款在公司上班无聊时写的小工具，希望能帮到那些小程序圈内的朋友们，使用该工具能在很大程度上提高开发效率 wxutil工具使用promise语法封装了微信小程序官方的高频API，以及常用的开发方法。项目地址: https://github.com/YYJeffrey/wxutil/ 快速上手 方法一：在需要使用的位置引入wxutil（下方示例调用代码均以该方法引入） [代码]const wxutil = require("../../utils/wxutil.js") [代码] 方法二：通过导入自己所需模块来引入wxutil [代码]import { request } from "../../utils/wxutil.js" [代码] 工具模块 网络请求 文件请求 socket通信 图片操作 提示 showToast showModal showLoading showActionSheet 缓存 setStorage getStorage 授权 getLocation getUserInfo requestPayment 其他工具 网络请求 封装微信小程序wx.request()方法实现五大http请求方法 get 使用promise语法异步获取请求数据或捕获请求异常信息 [代码]const handler = { url: url, data: data, header: header } wxutil.request.get(handler).then((data) => { console.log(data) // 业务处理 }).catch((error) => { console.log(error) // 异常处理 }) [代码] 亦可用更快速的方法请求 [代码]wxutil.request.get(url).then((data) => { console.log(data) }) [代码] post [代码]const handler = { url: url, data: {}, header: {} } wxutil.request.post(handler).then((data) => { console.log(data) }) [代码] 亦可用直接传递参数的方式请求 [代码]wxutil.request.post({url: url, data: data}).then((data) => { console.log(data) }) [代码] put [代码]wxutil.request.put({url: url, data: data}).then((data) => { console.log(data) }) [代码] patch [代码]wxutil.request.patch({url: url, data: data}).then((data) => { console.log(data) }) [代码] delete [代码]wxutil.request.delete({url: url, data: data}).then((data) => { console.log(data) }) [代码] 文件请求 封装微信小程序wx.downloadFile()和wx.uploadFile()方法 download [代码]wxutil.file.download({url}).then((data) => { console.log(data) }) [代码] upload [代码]wxutil.file.upload({ url: url, fileKey: fileKey, filePath: filePath, data: {}, header: {} }).then((data) => { console.log(data) }) [代码] socket通信 封装微信小程序的websocket部分方法，实现整个socket流程如下 [代码]let socketOpen = false // socket连接标识 wxutil.socket.connect(url) // 监听socket通信 wx.onSocketMessage((res) => { console.log(res) } wx.onSocketOpen((res) => { socketOpen = true if (socketOpen) { // 发送socket消息 wxutil.socket.send("hello wxutil").then((data) => { console.log(data) }) } // 关闭socket连接 wxutil.socket.close(url) }) [代码] 图片操作 封装微信小程序的wx.saveImageToPhotosAlbum()、wx.previewImage()、wx.chooseImage()方法，用于保存图片到本机相册、预览图片以及从相机或相册选择图片 save [代码]wxutil.image.save(path).then((data) => { console.log(data) }) [代码] preview [代码]wxutil.image.preview(["img/1.png"]) [代码] choose 参数：count, sourceType [代码]wxutil.image.choose(1).then((data) => { console.log(data) }) [代码] 提示 封装微信小程序的wx.showToast()、wx.showModal()、wx.showLoading()和wx.showActionSheet()方法，用于给用户友好提示 showToast [代码]wxutil.showToast("hello") [代码] showModal [代码]wxutil.showModal("提示", "这是一个模态弹窗") [代码] 亦可传入参数并在回调函数中处理自己的业务 [代码]wxutil.showModal(title: title, content: content, handler = { showCancel: showCancel, cancelText: cancelText, confirmText: confirmText, cancelColor: cancelColor, confirmColor: confirmColor }).then((data) => { console.log(data) }) [代码] showLoading [代码]wxutil.showLoading("加载中") [代码] showActionSheet [代码]wxutil.showActionSheet(['A', 'B', 'C']).then((data) => { console.log(data) }) [代码] 缓存 封装微信小程序的wx.setStorageSync()和wx.getStorageSync()方法，异步设置缓存和获取缓存内容，并可以设置缓存过期时间 setStorage [代码]wxutil.setStorage("userInfo", userInfo) [代码] 亦可为缓存设置过期时间，单位：秒 [代码]wxutil.setStorage("userInfo", userInfo, 86400) [代码] getStorage [代码]wxutil.getStorage("userInfo") [代码] 授权 封装了需要用户授权微信小程序的方法 getLocation 获取用户的地理位置 [代码]wxutil.getLocation().then((data) => { console.log(data) }) [代码] 亦可通过传入可选参数打开微信小程序的地图 [代码]wxutil.getLocation("gcj02", true).then((data) => { console.log(data) }) [代码] getUserInfo 获取用户信息，可传递两个参数：login和lang，login为true可返回wx.login获取到的code，lang默认为中文，该方法需要使用button触发 [代码]wxutil.getUserInfo().then((data) => { console.log(data) }) [代码] requestPayment 封装了微信小程序的requestPayment方法，需要传递后端的timeStamp、nonceStr、packageValue、paySign这几个参数，加密方式默认为“MD5” [代码]wxutil.requestPayment({ timeStamp: timeStamp, nonceStr: nonceStr, packageValue: packageValue, paySign: paySign }).then((data) => { console.log(data) }) [代码] 其他工具 封装了常用的微信小程序方法，便于高效开发，也可以增加自己的工具方法在下方 autoUpdate 在app.js中引用该方法，可以在微信小程序发布新版本后自动更新 [代码]wxutil.autoUpdate() [代码] isNotNull 判断字符串是否为空、空格回车等，不为空返回true [代码]wxutil.isNotNull("text") [代码] getDateTime 获取当前日期时间，格式：yy-mm-dd hh:MM:ss [代码]const datetime = wxutil.getDateTime() console.log(datetime) [代码] getTimestamp 获取当前时间戳 [代码]const timestamp = wxutil.getTimestamp() console.log(timestamp) [代码]

有没有自己封装的上拉下拉 不要小程序带的 可以局部刷新的 不要整个页面刷新的

本月份的组件分享，事件效果由 wxs事件完成，注释在代码片段里有。 按钮可拖动，子菜单上没有点击事件，是根据touchend位置来判断点击的谁。有bug欢迎反馈 代码片段：https://developers.weixin.qq.com/s/9BNYnhmG7tcl 社区这会儿效果图gif上传不了。。不是我的错 图标iconfont下的，没版权问题吧。。

背景 由于我们无法将小程序直接分享到朋友圈，但分享到朋友圈的需求又很多，业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片，然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的，往往为了绘制一张简单图片，就得写上一堆 boilerplate code ，而且一不小心还会踩到 Canvas 的各种彩蛋（坑）。我想此时你的心情肯定是这样的。 分析 想到小程序中有如此大量的生成图片需求，而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片，并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢？所以我们发起了 “画家计划— 通过 json 数据形式，来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下： 首先，我们定义了一套绘图 JSON 规范，开发者可以根据需求构建生成图片的 Palette（调色板），然后在程序运行过程中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。 解决问题 那可不可以开发一款生成海报的插件库呢? 首先，只需要提供一份简单的参数配置文件即可 解决掉小程序Canvas遇到的一些大大小小的坑 有严苛的测试环节，解决各种环境和各种机型遇到的问题，并提供稳定的线上版本 长期维护，并有专人更新迭代更新颖的功能 ###隆重介绍 Painter 的优势 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转） 支持渐变色，阴影，配置简单，容易上手，兼容性好 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。 How To Use 运行例子 [代码]git clone https://github.com/Kujiale-Mobile/Painter.git [代码] 代码下载后，用小程序 IDE 打开后即可使用。 注：请选择小程序项目，非小游戏，例子中无 appid，所以无法在手机上运行，如果需要真机调试，请在打开例子时，填上自己的小程序 id 具体详细使用教程 GitHub 地址https://github.com/Kujiale-Mobile/Painter 扩展工具 由于编写配置再加上调试还是有些麻烦,故制作一款可视化编辑工具,直接拖动编辑元素即可生成海报 可视化编辑拖拽直接生成painter代码 工具体验地址https://lingxiaoyi.github.io/painter-custom-poster/ 工具使用文档https://juejin.im/post/5d8b20ba51882509615bca09 例子展示 [图片] [图片] [图片] [图片]

const inter = ‘主域名’; var obj={}; const post=(url,obj)=>{ return new Promise( (resolve,reject)=>{ wx.showLoading({ title: ‘加载中’,mask:true}) wx.request({ url: inter+url, method:‘post’, data:obj, header: { ‘content-type’: ‘application/x-www-form-urlencoded’, }, success: function (res) { wx.hideLoading(); if (res.statusCode != 200) { reject({ error: ‘服务器忙，请稍后重试’, code: 500 }); return; } resolve(res.data); }, fail: function (res) { reject({ error: ‘网络错误’, code: 0 }); }, complete: function (res) { wx.hideLoading(); } }) }).catch(err=>{ reject(err) console.log(‘请求失败了’,err) }) } module.exports=post;

权限处理流程分析及整合 权限申请方式 通过 button 的 open-type 方式来获取相应的权限及信息。 通过 wx.authorize()和wx.openSetting() 两个接口来申请相应的权限。 特别注意的是：需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明 通过button申请权限 通过button获取权限对于开发者来说相对简单一些，开发者只需要绑定相应的回调函数即可，权限申请的成功和失败都可以在回调函数中处理。 其实我们可以把通过button申请权限的方式当作普通的信息获取接口，只不过这个接口必须通过button组件来调用而已。 通过wx.authorize()来申请权限 通过wx.authorize()来申请权限的方式是比较繁琐的。因为它的状态比较多，大致可分为： 如果用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意后方可调用接口； 如果用户已授权，可以直接调用接口； 如果用户已拒绝授权，则不会出现弹窗，而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景 针对这三种状态，开发者的处理方式也有所不同。 用户未接受或拒绝过此权限，会弹窗询问用户，用户点击同意 —— 可调用相应接口。 用户未接受或拒绝过此权限，会弹窗询问用户，用户点击拒绝 —— 打开设置页面。 如果用户已授权 —— 可调用相应接口。 用户已拒绝授权 —— 打开设置页面。 上述情况的2/4是需要开发者结合 wx.openSetting() 来帮助用户进行二次授权的。就是这个 openSetting 打开设置页面的过程让开发者比较抓狂。2.3.0 版本开始，用户发生点击行为后，才可以跳转打开设置页。也就是说 openSetting 只能通过 button 组件和点击（bindtap）的回调函数里来调用。然而我们在申请权限的时候无法保证用户一定会在第一次申请的时候同意，所以一定是需要配合openSetting来使用的。那我们在每个调用openSetting的地方都加一个button也是很不别扭的。当下来说我们最好的处理方案就是把wx.authorize()和wx.openSetting()结合起来使用，并把他们放在一个bindtap/catchtap（或其他手势事件）的回调函数里。接下来我们重点来整合一下这种方式的权限处理。 wx.authorize()来申请权限整合 权限工具类代码逻辑预览 以下是整合的工具类代码，我们暂时命名其为 authorizer.js，可直接复制使用。 [代码]const authsName = { "scope.userInfo": "用户信息",// 请用button获取该信息 "scope.userLocation": "地理位置", "scope.userLocationBackground": "后台定位", "scope.address": "通讯地址", "scope.invoiceTitle": "发票抬头", "scope.invoice": "获取发票", "scope.werun": "微信运动步数", "scope.record": "录音功能", "scope.writePhotosAlbum": "保存到相册", "scope.camera": "摄像头", } var scope = null; var success = null; var fail = null; var denyBack = null; var deniedFun = null; /** * 申请某个权限 * _scope 权限名称 * _success 成功回调 * _fail 失败回调 * _denyBack 申请权限时用户 拒绝 后的回调 * _deniedFun 之前申请过该权限但被拒绝了，该情况下调用此函数 */ function authorize(_scope, _success, _fail, _denyBack, _deniedFun) { resetData(); scope = _scope; success = _success; fail = _fail; denyBack = _denyBack; deniedFun = _deniedFun; if (!scope) { return; } // 判断权限状态 wx.getSetting({ success: function(res) { let currentScope = res.authSetting[scope]; if (currentScope == undefined || currentScope == null) { // 之前没有申请或该权限 wx.authorize({ scope: scope, success: function(res) { authSuccess(res); }, fail: function(err) { authDeny(); } }); } else if (currentScope == false) { // 之前申请过该权限但被拒绝了, 如果配置 deniedFun 函数，则有执行 deniedFun 方法， // 由调用者决定改中情况下如何处理。 if (authDenied()) { return; } // 如果没有配置 deniedFun 函数，走默认逻辑，打开设置界面 wx.showModal({ title: '权限申请', content: '点击 “确定” 按钮，打开 “' + authsName[scope] + '” 的权限设置界面', cancelText: '取消', confirmText: '确定', success(res) { if (res.confirm) { wx.openSetting({ success: function(res) { let cScope = res.authSetting[scope]; if (cScope) { authSuccess(); } else { authFail(); } }, fail: function(res) { authFail(); } }); } } }); } else { // 已经获得该权限 authSuccess(); } }, fail: function() { authFail(); } }); } /** * 权限申请成功 */ function authSuccess(res) { if (success && typeof success == 'function') { success(res); } resetData(); } /** * 权限申请失败 */ function authFail() { if (fail && typeof fail == 'function') { fail(); } resetData(); } /** * 拒绝使用该权限 */ function authDeny() { if (denyBack && typeof denyBack == 'function') { denyBack(); } resetData(); } /** * 之前申请过该权限但被拒绝了 */ function authDenied() { if (deniedFun && typeof deniedFun == 'function') { deniedFun(); resetData(); return true; } else { return false; } } /** * 重置参数 */ function resetData() { scope = null; success = null; fail = null; denyBack = null; deniedFun = null; } module.exports = { authorize: authorize, } [代码] 工具类的使用 wxm代码： [代码] <view bindtap="authApply">权限申请</view> [代码] js代码： [代码]/** * 权限申请--微信步数 */ authApply(e) { authorizer.authorize("scope.werun", function(res) { console.log('success', res); wx.getWeRunData({success: function(res){ console.log('WeRunData', res) }}); }, function(err) { console.log('denyback', err); }, function(err) { console.log('deniedBack', err); }); }, [代码] 总结 微信小程序的权限申请有两种方式； 分析了一下wx.authorize这种方式发生的几种情况以及相应的处理； 整理了一份wx.authorize使用的通用方法，且此方法须在某个手势事件的回调函数中。 文中如有不准确或不对的描述还请不吝指出。

1、微信小程序动画有自己的方法：官方链接 但需要自己去写动画效果，比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。 animate.css包含76种动画，使用非常简单。animate.css官网 : https://daneden.github.io/animate.css/ 3、由于小程序对代码大小限制比较大，所以删除了animate.css中 所有@-webkit-部分css，减少了一半体积 再把文件后缀名改为wxss，以后出来的百度小程序、支付宝小程序、今日头条小程序估计修改对应的后缀名就可以直接使用了。 下载地址：http://nodejs999.com/animate.wxss 4、放到小程序代码中，然后@import到app.wxss文件中。 我项目是把animate.wxss文件放在utils文件夹下。 所以在app.wxss中加入 @import './utils/animate.wxss'; 即可。 就可以像animate.css一样使用了。