mp-image-compress 小程序图片压缩接口（图片压缩至指定大小），并返回 width, height, size 为规范前端用户上传照片的大小，减轻存储服务器压力，当用户选取的照片过大时，在前端自动进行压缩至指定大小（比如 1M ）后再上传。 1 - 仓库地址 mp-image-compress【github】 mp-image-compress【码云gitee】 2 - 测试环境 微信小程序基础库版本：2.32.3 及以上 3 - 安装方法：npm安装 [代码]npm i mp-image-compress --save [代码] 依赖包安装后，需要在小程序开发者工具中：构建npm 4 - 接口使用示例 index.js [代码]// 引用 mp-image-compress import mpImageCompress from 'mp-image-compress' Page({ data: { img: '' }, onLoad() { mpImageCompress.clearTempImg() // 页面载入时清除临时文件 }, onUnload() { mpImageCompress.clearTempImg() // 页面卸载时清除临时文件 }, chooseImage() { const that = this wx.chooseMedia({ count: 1, mediaType: ['image'], sourceType: ['album', 'camera'], sizeType: ['original', 'compressed'], async success(res) { const info = res.tempFiles[0] // 选择文件后调用图片压缩接口进行压缩。如果选取的图片没有达到指定的大小，将返回原图 const imgRes = await mpImageCompress.set(info.tempFilePath, 1024) // 1024K console.info(imgRes) /////////////////////// that.setData({ img: imgRes.filePath }) } }) }, preview() { wx.previewImage({ current: this.data.img, urls: [this.data.img] }) }, DelImg() { this.setData({ img: '' }) }, }) [代码]

mp-privacy (小程序隐私保护授权弹窗组件) 微信发布关于小程序隐私保护指引设置的公告，为规范开发者的用户个人信息处理行为，保障用户的合法权益，自2023年9月15日起，对于涉及处理用户个人信息的小程序开发者，微信要求，仅当开发者主动向平台同步用户已阅读并同意了小程序的隐私保护指引等信息处理规则后，方可调用微信提供的隐私接口。 使用mp-privacy小程序隐私保护授权弹窗组件可降低开发成本，简单配置就可使用。需要授权时展示弹窗，用户点击“拒绝”授权隐私接口时，不能调用隐私接口，但不影响小程序其他功能的使用，点击“同意”后继续调用隐私接口。 [图片] 1 - 仓库地址 mp-privacy【github】 mp-privacy【码云gitee】 2 - 测试环境 微信小程序基础库版本：2.32.3 及以上 3 - 安装方法：npm安装 [代码]npm i mp-privacy --save [代码] 3.1 依赖包安装后，需要在小程序开发者工具中：构建npm 3.2 如果不想使用npm安装，可以直接下载源码，然后复制mp-privacy组件进行使用 4 - 配置与使用（两种使用方式都需要以下配置） 4.1 小程序配置文件 app.json （2023年9月15日前调试需要此步配置） [代码]{ "__usePrivacyCheck__": true, } [代码] 4.2 小程序 app.js [代码]App({ onLaunch: function (options) { // 监听隐私接口需要用户授权事件 if (wx.onNeedPrivacyAuthorization) { wx.onNeedPrivacyAuthorization(resolve => { // 需要用户同意隐私授权时，弹出开发者自定义的隐私授权弹窗 this.globalData.showPrivacy = true; this.globalData.resolvePrivacyAuthorization = resolve }) } }, globalData: { showPrivacy: false, resolvePrivacyAuthorization: null, }, }) [代码] 4.3 使用到隐私接口的页面的配置文件 index.json [代码]{ "usingComponents": { "mp-privacy": "mp-privacy" } } [代码] 4.4 使用到隐私接口的页面文件 index.wxml [代码]<mp-privacy /> [代码] 4.5 所有使用到的隐私接口必须要在「小程序管理后台」设置《小程序用户隐私保护指引》，否则无法触发wx.onNeedPrivacyAuthorization 监听

网上有许多文章是讲述小程序将数据导出为excel表格的，但大多需要经过请求服务端，再加上云存储。那一套逻辑之前做后端的时候就玩过了。很多时候，我们浏览页面时数据已经从服务端获取到本地了，直接将之导出即可，再走服务端，实为多此一举。为了减轻服务端压力，于是便有了这篇文章。本文章介绍如何在小程序使用纯前端技术将以获取到的数据导出为excel表格。文末有代码片段 xlsx插件文档 sheetjs插件文档 [代码]const XLSX = require('../utils/excel.js') Page({ data: { }, onLoad() { }, exportData() { // 数据源 const data = [{ code: 1, name: 'A', }, { code: 2, name: 'B', }, { code: 3, name: 'C', }, { code: 4, name: 'D', }] // 构建一个表的数据 let sheet = [] let title = ['序号', '姓名'] sheet.push(title) data.forEach(item => { let rowcontent = [] rowcontent.push(item.code) rowcontent.push(item.name) sheet.push(rowcontent) }) // XLSX插件使用 var ws = XLSX.utils.aoa_to_sheet(sheet); var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "用户表"); var fileData = XLSX.write(wb, { bookType: "xlsx", type: 'base64' }); let filePath = `${wx.env.USER_DATA_PATH}/用户表.xlsx` // 写文件 const fs = wx.getFileSystemManager() fs.writeFile({ filePath: filePath, data: fileData, encoding: 'base64', bookSST: true, success(res) { console.log(res) const sysInfo = wx.getSystemInfoSync() // 导出 if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) { // 电脑PC端导出 wx.saveFileToDisk({ filePath: filePath, success(res) { console.log(res) }, fail(res) { console.error(res) util.tips("导出失败") } }) } else { // 手机端导出 // 打开文档 wx.openDocument({ filePath: filePath, showMenu: true, success: function (res) { console.log('打开文档成功') }, fail: console.error }) } }, fail(res) { console.error(res) if (res.errMsg.indexOf('locked')) { wx.showModal({ title: '提示', content: '文档已打开，请先关闭', }) } } }) } }) [代码] 导出效果如下，如需高级设置请参照xlsx插件文档 sheetjs插件文档 [图片] 代码片段 -完-

很多开发者在使用rich-text组件与editor组件会遇到这样的问题：希望通过rich-text组件按editor组件编辑时呈现的样式渲染出来。但直接用rich-text组件渲染的话，有些样式明显不一样。尤其是有序列表、无序列表、check-list等。 那是因为官方rich-text组件与editor组件是相互独立的。也就是说直接用rich-text组件渲染editor组件获取的html，可能跟想要的结果有差距 这篇文章主要就是告你开发者，怎么消除这些差距。 只需要做到两点就能渲染出想要的结果 1、节点结构 要想得到想要的结果，节点结构必须是下面这样的结构 [代码]<view class="ql-container"> <view class="ql-editor"> <rich-text nodes="{{html}}"></rich-text> </view> </view> [代码] 2、给 .ql-container 做样式调整 [代码].ql-container { display: block; position: relative; box-sizing: border-box; -webkit-user-select: text; user-select: text; outline: none; overflow: hidden; width: 100%; height: auto; min-height: 50px !important; } [代码]

weapp-qrcode-canvas-2d weapp-qrcode-canvas-2d 是使用新版canvas-2d接口在微信小程序中生成二维码（外部二维码）的js包。canvas 2d 接口支持同层渲染且性能更佳，建议切换使用，可大幅提升生成图片的速度。 仓库地址 weapp-qrcode-canvas-2d【码云gitee】 weapp-qrcode-canvas-2d【github】 [图片] 测试环境 微信小程序基础库版本：2.10.4 开发者工具版本：Stable 1.03.2101150 Usage 先在 wxml 文件中，创建绘制的 [代码]canvas[代码]，并定义好 [代码]width[代码], [代码]height[代码], [代码]id[代码] , [代码]type[代码] ，其中type的值必须为[代码]2d[代码] [代码]<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas> [代码] 安装方法1：直接引入 js 文件 直接引入 js 文件，使用 [代码]drawQrcode()[代码] 绘制二维码 [代码]// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目中。路径根据实际引用的页面路径自行改变 import drawQrcode from '../../utils/weapp.qrcode.esm.js' [代码] 安装方法2：npm安装 [代码]npm install weapp-qrcode-canvas-2d --save [代码] // 然后需要在小程序开发者工具中：构建npm [代码]import drawQrcode from 'weapp-qrcode-canvas-2d' [代码] 安装完成后调用 例子1：没有使用叠加图片 [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node // 调用方法drawQrcode生成二维码 drawQrcode({ canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, background: '#ffffff', foreground: '#000000', text: 'abc', }) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ canvasId: 'myQrcode', canvas: canvas, x: 0, y: 0, width: 260, height: 260, destWidth: 260, destHeight: 260, success(res) { console.log('二维码临时路径：', res.tempFilePath) }, fail(res) { console.error(res) } }) }) [代码] 例子2：使用叠加图片(在二维码中加logo) [代码]const query = wx.createSelectorQuery() query.select('#myQrcode') .fields({ node: true, size: true }) .exec((res) => { var canvas = res[0].node var img = canvas.createImage(); img.src = "/image/logo.png" img.onload = function () { // img.onload完成后才能调用 drawQrcode方法 var options = { canvas: canvas, canvasId: 'myQrcode', width: 260, padding: 30, paddingColor: '#fff', background: '#fff', foreground: '#000000', text: '123456789', image: { imageResource: img, width: 80, // 建议不要设置过大，以免影响扫码 height: 80, // 建议不要设置过大，以免影响扫码 round: true // Logo图片是否为圆形 } } drawQrcode(options) // 获取临时路径（得到之后，想干嘛就干嘛了） wx.canvasToTempFilePath({ x: 0, y: 0, width: 260, height: 260, destWidth: 600, destHeight: 600, canvasId: 'myQrcode', canvas: canvas, success(res) { console.log('二维码临时路径为：', res.tempFilePath) }, fail(res) { console.error(res) } }) }; }) [代码] API drawQrcode([options]) options Type: Object 参数 必须 说明 示例 canvas 必须 画布标识，传入 canvas 组件实例 canvasId 非 绘制的[代码]canvasId[代码] [代码]'myQrcode'[代码] text 必须 二维码内容 ‘123456789’ width 非 二维码宽度，与[代码]canvas[代码]的[代码]width[代码]保持一致 260 padding 非 空白内边距 20 paddingColor 非 内边距颜色 默认与background一致 background 非 二维码背景颜色，默认值白色 [代码]'#ffffff'[代码] foreground 非 二维码前景色，默认值黑色 [代码]'#000000'[代码] typeNumber 非 二维码的计算模式，默认值-1 8 correctLevel 非 二维码纠错级别，默认值为高级，取值：[代码]{ L: 1, M: 0, Q: 3, H: 2 }[代码] 1 image 非 在 canvas 上绘制图片，层级高于二维码，v1.1.1+版本支持。具体使用见：例子2 [代码]{imageResource: '', width:80, height: 80, round: true}[代码]