我们在开发小程序时，一个列表里难免会有很多条数据，比如我们一个列表有1000条数据，我们一下加载出来，而不做分页，将会严重影响性能。所以这一节，我们来讲讲小程序分页加载数据的实现。 老规矩，先看效果图 [图片] 可以看到我们每页显示10条数据，当滑动到底部时，会加载第二页的数据，再往下滑动，就加载第三页的数据。由于我们一共21条数据，所以第三页加载完以后，会有一个“已加载全部数据”的提示。 本节知识点 1，小程序分页加载 2，小程序列表显示 3，云数据库的使用 4，云数据库分页请求数据的实现 一，先定义数据 我们做分页数据加载，肯定要先准备好数据，数据已经给大家准备好，如下图，文章末尾会贴出数据源和本节课源码的下载地址。 [图片] 然后把数据导入到我们的云开发的数据库里，关于数据如何导入，这里不再讲解，不知道的同学，请看下面这篇文章。或者去老师历史文章里找一下。 《小程序云开发入门—云数据库数据源的导入与导出》 下面给大家看下我们的数据源，长什么样。其实很简单，就是简单的定义21条数据。 [图片] 然后在看导入到数据库的样子。 [图片] 二，分页请求数据 我们第一步准备好了数据以后，接下来就来讲讲如何在js里做分页加载数据。 首先我们这里用到了小程序云开发数据库的知识点 1，get方法：获取云数据库数据 2，skip方法：跳过前面几条数据，请求后面的数据 3，limit方法：请求多少条数据。 比如下面这段代码,就是跳过前5条，请求从第6条开始往后的10条数据，就是请求6～15的数据，我们做分页加载也就是基于这个原理。 [代码] wx.cloud.database().collection("list") .skip(5) //从第几个数据开始 .limit(10) [代码] 下面把我们index.js的完整代码贴给大家。 [代码]//老师微信：2501902696 let currentPage = 0 // 当前第几页,0代表第一页 let pageSize = 10 //每页显示多少数据 Page({ data: { dataList: [], //放置返回数据的数组 loadMore: false, //"上拉加载"的变量，默认false，隐藏 loadAll: false //“没有数据”的变量，默认false，隐藏 }, //页面显示的事件 onShow() { this.getData() }, //页面上拉触底事件的处理函数 onReachBottom: function() { console.log("上拉触底事件") let that = this if (!that.data.loadMore) { that.setData({ loadMore: true, //加载中 loadAll: false //是否加载完所有数据 }); //加载更多，这里做下延时加载 setTimeout(function() { that.getData() }, 2000) } }, //访问网络,请求数据 getData() { let that = this; //第一次加载数据 if (currentPage == 1) { this.setData({ loadMore: true, //把"上拉加载"的变量设为true，显示 loadAll: false //把“没有数据”设为false，隐藏 }) } //云数据的请求 wx.cloud.database().collection("list") .skip(currentPage * pageSize) //从第几个数据开始 .limit(pageSize) .get({ success(res) { if (res.data && res.data.length > 0) { console.log("请求成功", res.data) currentPage++ //把新请求到的数据添加到dataList里 let list = that.data.dataList.concat(res.data) that.setData({ dataList: list, //获取数据数组 loadMore: false //把"上拉加载"的变量设为false，显示 }); if (res.data.length < pageSize) { that.setData({ loadMore: false, //隐藏加载中。。 loadAll: true //所有数据都加载完了 }); } } else { that.setData({ loadAll: true, //把“没有数据”设为true，显示 loadMore: false //把"上拉加载"的变量设为false，隐藏 }); } }, fail(res) { console.log("请求失败", res) that.setData({ loadAll: false, loadMore: false }); } }) }, }) [代码] 上面的代码就是我们实现分页加载的所有逻辑代码。简单说下代码 1，我们首先进页面时会请求前10条内容 2，10条内容请求成功以后，我们会把请求到的内容加入dataList数组，然后把dataList里的数据显示到页面上。并将currentPage加一，用于请求第二页数据。 3，当用户滑动到底部时，会触发onReachBottom事件，在这个事件里做第二页到请求。然后第二页数据请求成功以后。继续将currentPage加1，这里要记住一定，一定要请求成功以后才将currentPage +1。 三，列表布局和样式 其实index.wxml和index.wxss的代码很简单，给大家把代码贴出来。 1，index.wxml [代码]<scroll-view scroll-y="true" bindscrolltolower="searchScrollLower"> <view class="result-item" wx:for="{{dataList}}" wx:key="item"> <text class="title">{{item.content}}</text> </view> <view class="loading" hidden="{{!loadMore}}">正在载入更多...</view> <view class="loading" hidden="{{!loadAll}}">已加载全部</view> </scroll-view> [代码] 2,index.wxss [代码]page { display: flex; flex-direction: column; height: 100%; } .result-item { display: flex; flex-direction: column; padding: 20rpx 0 20rpx 110rpx; overflow: hidden; border-bottom: 2rpx solid #e5e5e5; } .title { height: 110rpx; } .loading { position: relative; bottom: 5rpx; padding: 10rpx; text-align: center; } [代码] 到这里我们就完整的实现里分页加载功能了。 [图片] 源码和数据源，已经给大家放到网盘里了，有需要的同学请在文章底部留言，或者私信老师。 视频讲解：https://edu.csdn.net/course/detail/9604

JavaScript常用设计模式实例与应用 前言 1. 什么是设计模式 小时候打游戏，我们总是追求快速完美通关；上下班交通，我们总是会选择最方便便捷乘车路线。我们总是追求一件事情的最优美便捷的解决方案，也就是其所谓的最佳实践。 一个设计模式就是一个可重用的方案，可应用于在软件设计中常见的问题，在本次分享主题中，就是编写JavaScript的web应用程序中常见的问题，设计模式的另一种解释就是一个我们如何解决问题的模板。那些在许多不同但类似的情况下使用的模板。 2. 为什么要学习设计模式 JavaScript是一门以原型为基础，面向对象的，动态数据类型语言。在把函数视为第一公民，支持函数式编程的同时也不排斥面向对象的开发方式，甚至在ES6+的标准中还引入了面向对象的一些原生支持。这使得JavaScript成为一门功能强大的语言同时也导致了编程风格的碎片化，同一个功能实现的多样性。对于一些传统的、强面向对象的设计模式会有各种类型的实现，有时候会让人感觉牵强。但是这些并不妨碍我们使用JavaScript来表达设计模式的理念、所要解决的问题以及它的核心思想，这才是我们所要关注的核心。 设计模式可以让我们站在巨人的肩膀上，获得前人的经验，保证我们以优雅的方式组织我们的代码并满足我们解决问题所需要的条件。 内容 一、设计原则 设计原则是指导思想，是我们在程序设计中尽可能要遵守的准则。设计模式就是这些设计原则的一些具体实现，所要达到的目标就是高内聚低耦合。在这里我简单介绍一些六大设计原则中的单一职责原则（SPR）、开放封闭原则（OCP）、最少知识原则（LKP）。 1. 单一职责原则 单一职责原则指的是一个类应该仅有一个引起它变化的原因，也就是说一个对象只做一件事情。这样做可以让我们对对象的维护变得简单，如果一个对象拥有多种职责，职责之间相互耦合，对一个职责的修改势必会影响到其他职责。也就是说，一个对象负责的职责越多，耦合越强，对模块的修改就越危险。 2. 开放封闭原则 开放封闭原则指的是一个模块应该在对扩展开放，而对修改封闭。当需要修改增加需求的时候，应该尽量通过扩展新代码的方式，而不是修改已有的代码。因为修改已有代码会给依赖原有代码的模块带来隐患，从而需要把依赖原有代码的模块重新测试一遍，加重测试成本。 3. 最少知识原则 最少知识原则指的是一个类应该对自己需要耦合或调用的类了解得尽可能少，调用者或依赖着仅需要知道他所需要的方法即可，其他的概不关心。因为类与类之间的关系越密切，耦合性越高，当一个类发生改变时，对另一个类的影响也越大。通常我们减少对象之间的联系的方法是引入一个第三者来帮助通信，阻隔对象之间的直接通信，从而减少耦合。 二、设计模式的分类 设计模式可以被分成几个不同的种类： 创建型设计模式 创建型设计模式关注的是对象创建的机制方法，一般会把对象的创建和使用分离，从而帮助创建类的实例对象。属于这一类的设计模式主要有：构造器模式、工厂模式、单例模式、建造者模式等。 结构型设计模式 结构型设计模式关注对象组成以及不同对象之间的关系。这类模式有助于在系统的某一部分发生变化时减少对整个系统结构的改变。主要包括：代理模式、享元模式、外观模式、适配器模式、装饰者模式等。 行为型设计模式 行为型设计模式关注对象之间的通信，描述对象之间如何相互协作。主要包括：发布订阅模式，策略模式，状态模式，迭代器模式，命令模式，职责链模式，中介者模式等。 三、设计模式示例 1. 单例模式 单例模式（Singleton Pattern）属于创建型设计模式，它限制一个类只能有一个实例化对象，并提供一个访问它的全局访问点。 单例模式可能是最简单的设计模式了，虽然简单，但在实际项目开发中是很常用的一种模式。 单例模式中有几个需要知道的概念： Singleton：特定的类，也就是我们需要访问的类，访问者要拿到的就是它的实例。 Instance： 单例，是特定类的唯一实例。 getInstance： 获取单例的方法。 代码示例 [代码]var GameManager = (function () { // 单例 var instance; function init() { // 私有变量和方法 var _saveData = { name: 'glenn', level: 1 }; function _privateMethod(){ console.log( "I am private function" ); } return { // 公有变量和方法 levelUp: function(){ _saveData.level ++; }, getCurLevel: function(){ return _saveData.level; }, getName: function(){ return _saveData.name; }, publicProperty: "this is a public prop", }; }; return { // 如果存在获取此单例实例，如果不存在创建一个单例实例 getInstance: function () { if ( !instance ) { instance = init(); } return instance; } }; })(); // 使用: var singleA = GameManager.getInstance(); singleA.levelUp(); var singleB = GameManager.getInstance(); console.log( singleA.getCurLevel() === singleB.getCurLevel() ); // true [代码] 在本例中，GameManager是一个单例类，我们首先使用立即调用函数IIFE把希望隐藏的单例示例instance隐藏起来，在init方法中定义该单例类的公有和私有方法变量，然后返回一个对象，把获取单例实例的方法getInstance暴露出去。在getInstance方法中，通过JavaScript的闭包特性把单例实例instance存进闭包中，在第一次获取实例时才初始化单例，并在之后的获取操作中返回的都是这个相同的实例。 可以看到，在使用单例的代码中，我们调用了两次getInstance获取的两个对象singleA和singleB指向的是同一个对象。 源码中的单例模式 以 ElementUI 为例，ElementUI中的全屏Loading蒙层使用服务的形式调用的使用方式示意： [代码]Vue.prototype.$loading = service; this.$loading({ fullscreen: true }); [代码] 我们可以看看这个loading在ElementUI2.9.2源码中是如何实现的。 下面是为了方便观看省略了部分代码后的源码 [代码]import Vue from 'vue'; import loadingVue from './loading.vue'; const LoadingConstructor = Vue.extend(loadingVue); //... //单例 let fullscreenLoading; LoadingConstructor.prototype.originalPosition = ''; LoadingConstructor.prototype.originalOverflow = ''; LoadingConstructor.prototype.close = function() { //... }; const addStyle = (options, parent, instance) => { //... }; const Loading = (options = {}) => { //... //判断示例是否已经初始化 if (options.fullscreen && fullscreenLoading) { return fullscreenLoading; } //一系列的初始化操作 let parent = options.body ? document.body : options.target; let instance = new LoadingConstructor({ el: document.createElement('div'), data: options }); addStyle(options, parent, instance); if (instance.originalPosition !== 'absolute' && instance.originalPosition !== 'fixed') { addClass(parent, 'el-loading-parent--relative'); } if (options.fullscreen && options.lock) { addClass(parent, 'el-loading-parent--hidden'); } parent.appendChild(instance.$el); Vue.nextTick(() => { instance.visible = true; }); //把初始化出来的实例缓存下来 if (options.fullscreen) { fullscreenLoading = instance; } return instance; }; export default Loading; [代码] 这里的单例是fullscreenLoading，缓存在闭包中。当用户调用时传入的options中fullscreen为true且之前已经创建并初始化过单例的情况下直接返回之前创建的单例，否则继续执行后面的初始化操作，并把创建的单例赋值给闭包中的fullscreenLoading后返回新创建的单例。 这是一个典型的单例模式应用，通过复用之前创建的全屏加载蒙层单例，不仅减少了重复实例化过程带来的额外开销，还保证了页面中不会出现重复的全屏加载蒙层。 单例模式的应用场景 当项目中需要一个公共的状态管理时，我们可以引入单例模式来确保访问的一致性。 当项目中存在一些同一时间只会出现一个且会重复出现的对象时，我们可以引入单例模式避免重复创建对象产生的多余开销，例如项目中的弹窗，消息框提醒等。 2. 外观模式 外观模式又叫门面模式，属于结构型模式，它将子系统的一系列复杂的接口集成起来组成一个更高级别的更舒适的高层接口，从而隐藏其真正的潜在复杂性，对外提供一个一致的外观。 外观模式让外界减少对子系统的直接交互，从而降低耦合，让外界可以轻松使用子系统，其本质是封装交互，简化调用。 代码示例 [代码]var module = (function() { var _sportsman = { speed: 5, height: 10, set : function(key, val) { this[key] = val; }, run : function() { console.log('运动呀正在以'+this.speed+'米每秒的速度向前跑着。'); }, jump: function(){ console.log( "运动员往上跳了"+this.height+'米'); } }; return { facade : function( args ) { args.speed != undefined && _sportsman.set('speed', args.speed); args.height != undefined && _sportsman.set('height', args.height); args.run && _sportsman.run(); args.jump && _sportsman.jump(); } }; }()); // Outputs: 运动呀正在以10米每秒的速度向前跑着。 // 运动员往上跳了5米 module.facade( {run: true, speed: 10, jump: true, height: 5} ); [代码] 这是表达外观模式一个简单的例子。在本例中，调用module的门面方法facede会触发运动员对象_sportsman中的一系列私有方法。但在这一次，用户不需要关心运动员对象内部方法的实现，就可以让运动员动起来。 源码中的外观模式 当我们使用Jquery的$(document).ready()来给浏览器加载完成添加事件回调时，Jquery会调用源码中的私有方法： [代码]// ... bindReady: function() { //... // Mozilla, Opera and webkit nightlies currently support this event if ( document.addEventListener ) { // Use the handy event callback document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false ); // A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready, false ); // If IE event model is used } else if ( document.attachEvent ) { // ensure firing before onload, // maybe late but safe also for iframes document.attachEvent( "onreadystatechange", DOMContentLoaded ); // A fallback to window.onload, that will always work window.attachEvent( "onload", jQuery.ready ); // If IE and not a frame // continually check to see if the document is ready var toplevel = false; try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { doScrollCheck(); } } } // ... [代码] 由于IE9之前的IE版本浏览器以及Opera7.0之前的Opera浏览器不支持addEventListener方法，在需要适配这些浏览器的项目中，我们需要自己手动判断浏览器版版本来决定使用什么事件绑定方法以及事件。而如果使用了Jquery库中提供的这个外观方法，用户则不需要关心浏览器的兼容问题，使用一致的外观接口$(document).ready()就可以实现监听浏览器加载完成事件的功能，从而简化了使用。 除了抹平浏览器的兼容性问题之外，Jquery还有一些其他的外观模式的应用： 比如设置或获取dom结点的内容和属性时使用的text()、html()和val()方法时，Jquery判断调用方法是否有传参数来确定是设置还是获取操作。这里Jquery把设置和获取操作对外提供了同一个外观接口，使调用简化了不少。 再比如Jquery的ajax的API[代码]$.ajax(url[,settings])[代码],当我们需要设置以JSONP的形式发送请求时，只需要传入[代码]dataType: 'jsonp'[代码]设置，jquery会进行额外的操作帮我们启动JSONP流程，而不需要调用者添加额外的代码。 外观模式的适用场景 维护设计粗糙和难以理解的上古系统，或者非常复杂的一些系统时，可以为这些系统设置一个外观模块，给外界提供清晰的接口，以后的新系统只需要与外观接口交互即可。 构建多层系统时，可以使用外观模式来将系统分层，让外观接口成为每一层的入口，简化层间调用，给层间松耦。 团队协作时，可以将各自负责的模块建立合适的外观，简化其他同事的使用，节约沟通时间。 发布订阅者模式 发布 - 订阅模式（Publish-Subscribe Pattern, pub-sub）又叫观察者模式（Observer Pattern），属于行为型模式，它定义了一种一对多的关系，让多个订阅者对象同时监听某一个发布者，或者叫主题对象，这个主题对象的状态发生变化时就会通知所有订阅自己的订阅者对象，使得它们能够自动更新自己。 发布 - 订阅模式有几个主要概念： Publisher：发布者，当消息发生时负责通知对应订阅者 Subscriber：订阅者，当消息发生时被通知的对象 SubscriberMap：以type为主键存储数组，每个数组存储所有对应type的订阅者 type: 消息类型，订阅者可以订阅的不同消息类型 subscribe：该方法可以将订阅者添加到SubscriberMap中对应的数组中 unSubscribe：该方法为SubscriberMap中删除订阅者 notify：该方法遍历通知SubscriberMap中对应type的所有订阅者 代码示例 [代码]var Publisher = (function() { var _subsMap = {} // 存储订阅者 return { /* 消息订阅 */ subscribe(type, cb) { if(_subsMap[type]){ if (!_subsMap[type].includes(cb)){ _subsMap[type].push(cb); } }else{ _subsMap[type] = [cb]; } }, /* 消息退订 */ unsubscribe(type, cb) { if(!_subsMap[type] || !_subsMap[type].includes(cb))return; var idx = _subsMap[type].indexOf(cb); _subsMap[type].splice(idx, 1); }, /* 消息发布 */ notify(type) { if (!_subsMap[type])return; var args = Array.prototype.slice.call(arguments, 1); _subsMap[type].forEach(function(cb){ cb.apply(this, args); }) } } })() Publisher.subscribe('运动鞋', function(message){console.log('111' + message)}); // 订阅运动鞋 Publisher.subscribe('运动鞋', function(message){console.log('222' + message)}); Publisher.subscribe('帆布鞋', function(message){console.log('333' + message)}); // 订阅帆布鞋 Publisher.notify('运动鞋', ' 运动鞋到货了 ~') // 打电话通知买家运动鞋消息 Publisher.notify('帆布鞋', ' 帆布鞋售罄了 T.T') // 打电话通知买家帆布鞋消息 [代码] 这是一个发布-订阅模式的通用代码实现，Publisher就是一个发布者，这里使用了立即调用函数IIFE方式来将不希望被外界调用的_subsMap隐藏。订阅者采用回调函数的形式，在消息发布时使用JavaScript的apply、call函数使发布的消息参数可以传到订阅者回调函数中去。 源码中的发布-订阅模式 我们使用Jquery的API可以轻松实现消息的订阅、发布以及退订操作： [代码]function eventHandler() { console.log('自定义方法') } /* ---- 事件订阅 ---- */ $('#app').on('myevent', eventHandler) // 发布 $('#app').trigger('myevent') // 输出：自定义方法 /* ---- 取消订阅 ---- */ $('#app').off('myevent') $('#app').trigger('myevent') // 没有输出 [代码] 对应api源码参见： event.js 其中add方法为on接口的内部直接绑定方法，remove方法对应off接口的内部实现。 发布-订阅模式的优缺点 发布-订阅模式最大优点就是解耦： 时间上的解耦：注册事件后，订阅者不需要持续关注发布者的动态，当事件触发时，发布者会通知对应的订阅者，调用对应的回调函数。 对象间的解耦: 发布者不需要提前知道事件的订阅者有哪些，当事件发生时直接遍历对应的订阅者回调函数来通知订阅者，从而解耦了发布者和订阅者之间的联系，使它们之间互不持有。 发布-订阅模式也有一些缺点： 增加消耗：创建结构和缓存订阅者两个过程都会消耗计算和内存资源，即时订阅后没有触发过，订阅者使用会存在内存中。 增加复杂度 ：订阅者被缓存在一起，如果多个订阅者和发布者层层嵌套，那么程序将变得难以追踪和调试，参考一下 Vue 调试的时候你点开原型链时看到的那堆 deps/subs/watchers 们… 总结 设计模式能够让我站在巨人的肩膀上，享受其他开发者们长期以来在一些有挑战性问题上的解决方案以及优秀的架构。 对我们来讲，知道有这些设计模式是很重要的，但更重要的是应该知道怎样以及什么时候去使用它们。遵守设计原则，使用设计模式是好事，但是过犹不及，在实际项目中我们不能刻板的遵守这些设计原则以及使用设计模式，在想使用每个模式前先去了解下它的优缺点。要真正的理解模式能给你带来什么好处需要花时间去尝试，以实际情况中模式给你的程序带来的好处作为标准来选择。

最近老是有同学问我小程序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识别，可以去看小程序官方文档，结合着我的这篇文章，相信你也可以轻松实现更多的图片识别。 [图片] 源码其实在上面都已经贴给大家了，如果你觉得不完整，想要完整的源码可以在文章底部留言或者私信我。

在小程序中，常常有些数据需要在几个页面或组件中共享。对于这样的数据，在 web 开发中，有些朋友使用过 redux 、 vuex 之类的 状态管理 框架。在小程序开发中，也有不少朋友喜欢用 MobX ，说明这类框架在实际开发中非常实用。 小程序团队近期也开源了 MobX 的辅助模块，使用 MobX 也更加方便。那么，在这篇文章中就来介绍一下 MobX 在小程序中的一个简单用例！ 在小程序中引入 MobX 在小程序项目中，可以通过 npm 的方式引入 MobX 。如果你还没有在小程序中使用过 npm ，那先在小程序目录中执行命令： [代码]npm init -y [代码] 引入 MobX ： [代码]npm install --save mobx-miniprogram mobx-miniprogram-bindings [代码] （这里用到了 mobx-miniprogram-bindings 模块，模块说明在这里： https://developers.weixin.qq.com/miniprogram/dev/extended/functional/mobx.html 。） npm 命令执行完后，记得在开发者工具的项目中点一下菜单栏中的 [代码]工具[代码] - [代码]构建 npm[代码] 。 MobX 有什么用呢？ 试想这样一个场景：制作一个天气预报资讯小程序，首页是列表，点击列表中的项目可以进入到详情页。 首页如下： [图片] 详情页如下： [图片] 每次进入首页时，需要使用 [代码]wx.request[代码] 获取天气列表数据，之后将数据使用 setData 应用到界面上。进入详情页之后，再次获取指定日期的天气详情数据，展示在详情页中。 这样做的坏处是，进入了详情页之后需要再次通过网络获取一次数据，等待网络返回后才能将数据展示出来。 事实上，可以在首页获取天气列表数据时，就一并将所有的天气详情数据一同获取回来，存放在一个 数据仓库 中，需要的时候从仓库中取出来就可以了。这样，只需要进入首页时获取一次网络数据就可以了。 MobX 可以帮助我们很方便地建立数据仓库。接下来就讲解一下具体怎么建立和使用 MobX 数据仓库。 建立数据仓库 数据仓库通常专门写在一个独立的 js 文件中。 [代码]import { observable, action } from 'mobx-miniprogram' // 数据仓库 export const store = observable({ list: [], // 天气数据（包含列表和详情） // 设置天气列表，从网络上获取到数据之后调用 setList: action(function (list) { this.list = list }), }) [代码] 在上面数据仓库中，包含有数据 [代码]list[代码] （即天气数据），还包括了一个名为 [代码]setList[代码] 的 action ，用于更改数据仓库中的数据。 在首页中使用数据仓库 如果需要在页面中使用数据仓库里的数据，需要调用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中，然后就可以在页面中直接使用仓库数据了。 [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad() { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 actions: ['setList'], // 将 this.setList 绑定为仓库中的 setList action }) // 从服务器端读取数据 wx.showLoading() wx.request({ // 请求网络数据 // ... success: (data) => { wx.hideLoading() // 调用 setList action ，将数据写入 store this.setList(data) } }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，可以在 wxml 中直接使用 list ： [代码]<view class="item" wx:for="{{list}}" wx:key="date" data-index="{{index}}"> <!-- 这里可以使用 list 中的数据了！ --> <view class="title">{{item.date}} {{item.summary}}</view> <view class="abstract">{{item.temperature}}</view> </view> [代码] 在详情页中使用数据仓库 在详情页中，同样可以使用 [代码]createStoreBindings[代码] 来将仓库中的数据绑定到页面数据中： [代码]import { createStoreBindings } from 'mobx-miniprogram-bindings' import { store } from './store' Page({ onLoad(args) { // 绑定 MobX store this.storeBindings = createStoreBindings(this, { store, // 需要绑定的数据仓库 fields: ['list'], // 将 this.data.list 绑定为仓库中的 list ，即天气数据 }) // 页面参数 `index` 表示要展示哪一条天气详情数据，将它用 setData 设置到界面上 this.setData({ index: args.index }) }, onUnload() { // 解绑 this.storeBindings.destroyStoreBindings() }, }) [代码] 这样，这个页面 wxml 中也可以直接使用 list ： [代码]<view class="title">{{list[index].date}}</view> <view class="content">温度 {{list[index].temperature}}</view> <view class="content">天气 {{list[index].weather}}</view> <view class="content">空气质量 {{list[index].airQuality}}</view> <view class="content">{{list[index].details}}</view> [代码] 完整示例 完整例子可以在这个代码片段中体验： https://developers.weixin.qq.com/s/YhfvpxmN7HcV 这个就是 MobX 在小程序中最基础的玩法了。相关的 npm 模块文档可参考 mobx-miniprogram-bindings 和 mobx-miniprogram 。 MobX 在实际使用时还有很多好的实践经验，感兴趣的话，可以阅读一些其他相关的文章。

[图片] 老版本的订阅消息在2020年1月10日就下线了，相信不少人在接入新版本订阅系统的时候，或多或少会遇到一些问题，这里智库君跟大家介绍下新版订阅的机制和不需要node/后端的情况下 独立完成功能开发。 一、新版订阅的机制 其实开发过程不难，但是要理清楚它里面的机制，智库君还是花了一些时间的，也踩了不少坑 先来看下官方介绍： [图片] 可以设置多个订阅选项 感叹号里面可以看到详情 有个默认不被选中的“总是”选项 这些就是新不同的地方，智库君在开发的时候也有很多疑问，点了“总是”再点“取消”按钮会怎样？部分选择订阅会怎样？下面为大家一一梳理 （1）部分选中 [图片] 比如现在有三个选项 A,B,C，用户**“部分选中”**返回的情况： [图片] 这里用真机调试可以看到，有个返回值状态为“reject”。 如果我们反复几点点击同一个订阅后，这些值是如何计算的呢？ 举例： [图片] 从这里看出，微信系统会自动记录用户点击的次数，并且做累加记录，如果用户只允许2次发送，而开发者发送了3次，最后一次将会被拒绝。 （2）点击“总是保持以上选择，不再询问”的情况 [图片] 当用户点击“总是”之后，同一个类型的订阅将不再弹出，那如果有多个订阅选项呢？ 举例 订阅AAA 三个订阅模板为 X Y Z 订阅BBB 二个订阅模板为 Y W 这时候如果“订阅AAA”按钮选择了“总是”，那么再点击“订阅BBB”按钮，将只会弹出一个选项“W”,不会有 “Y” 的模板，因为在之前 “订阅AAA” 按钮中已经包含了。 [代码]wx.requestSubscribeMessage({ tmplIds: ["MECDDOdhbC3SrQmMY5XrfqiIGbMTzpEN8Z7ScXJfcd0", "iSb2NIlNnnO60wlI-8Wx5Pe82jR7TRdwjotSXtM1-ww"], success(res) { console.log(res); } }) [代码] 显示内容仅一个选项： [图片] 这里需要注意，“总是”选项是全局有效，不区分页面，选中“总是”的 W,X,Y,Z的模板，在全局任意页面中再次调用，再次调用将不再会显示！ [图片] 返回值无提示用户是否选中“总是”。 （3）用户点击“总是”后，获取状态 [图片] [代码]wx.getSetting({ withSubscriptions: true, success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.subscribeMessage": true // } console.log(res.subscriptionsSetting) // res.subscriptionsSetting = { // SYS_MSG_TYPE_INTERACTIVE: 'accept', // SYS_MSG_TYPE_RANK: 'accept', // zun-LzcQyW-edafCVvzPkK4de2Rllr1fFpw2A_x0oXE: 'reject', // ke_OZC_66gZxALLcsuI7ilCJSP2OJ2vWo2ooUPpkWrw: 'ban', // } } }); [代码] [图片] 这里可以调用wx.getSetting方法，但是需要注意：如果用户第一次选“总是”后点击“取消”按钮或者订阅模板全部是未选中/reject的，那将获取不到状态（这里可能是BUG，期待官方未来修复）。 （4）用户点击“总是”后，让用户手动修改 前面说到用户点击“总是”后，系统将不再弹窗，但是我们可以通过**“wx.openSetting”**引导用户手动修改。 [代码]wx.openSetting({ success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.userLocation": true // } } }) [代码] [图片] [图片] 当然用户自己也可以修改 [图片] 总结 【重点】选择“总是”，很多人认为就可无限发送订阅消息，这个是错误的，勾选和不勾选唯一的区别就是每次触发订阅的时候会不会弹授权窗口！！！ 用户点击次数系统会自动累加，直接影响后台发送通知的次数。 用户选择“总是”后，小程序界面不再弹窗，但仍然有回调/callback。 任意订阅模板在用户选中“总是”（包括接受/拒绝2个状态）后，全局有效，就算其他订阅包含“此模板”也不再显示/弹出 当用户选择“总是”中“accept/选中/接受”的状态后，可以在wx.getSetting查询到用户是否选择“总是”。 当用户选择“总是”中“reject/未选中/拒绝”的状态后，返回值“无感知”（这里可能是BUG） 二、功能开发 使用微信自带的云开发，可以在没有node/后端开发支持下，完成整个订阅流程的开发。 （1）微信后台设置订阅模板和获取模板ID 1、打开小程序后台，找到订阅消息设置 [图片] 2、在公共模板库找模板或者自己申请新模板，建议能用现成模板用现成的，因为申请周期可能较长，且容易被拒 [图片] 3、选好模板后，点击详情 [图片] 4、查看模板内容和发送DATA的结构 [图片] 5、复制模板ID （2）配置云函数 [图片] [图片] 1、新建getOpenId云函数，用于获取用户的openID [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() // 云函数入口函数 exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID, } } [代码] 2、新建订阅推送通知云函数 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() //订阅推送通知 exports.main = async (event, context) => { try { const result = await cloud.openapi.subscribeMessage.send({ touser: event.openid, //接收用户的openId page: 'pages/my/index', //订阅通知 需要跳转的页面 data: { //设置通知的内容 thing1: { value: '小程序订阅填坑' }, thing2: { value: '智库方程式' }, thing3: { value: '一起学习，一起进步' } }, templateId: '5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac' //模板id }) console.log(result) return result } catch (err) { console.log(err) return err } } [代码] 写完云函数记得右键部署下！！！ （3）小程序代码部分 [代码]<!------------html -------------> <button bindtap="getOpenId" type='primary'>获取openId</button> <view class="subBtn" catch:tap="sub">订阅AAA</view> <view class="subBtn" catch:tap="send">订阅推送测试</view> <view class="subBtn" catch:tap="setting">设置“总是”后，跳转修改</view> [代码] [代码]//JS 部分 //获取用户的openid getOpenId() { wx.cloud.callFunction({ name: "getOpenId" }).then(res => { let openid = res.result.openid console.log("获取openid成功", openid) }).catch(res => { console.log("获取openid失败", res) }) }, //发送模板消息给指定的openId用户 send(openid){ wx.cloud.callFunction({ name: "sendSub", data: { openid: openid } }).then(res => { console.log("发送通知成功", res) }).catch(res => { console.log("发送通知失败", res) }); }, //消息订阅 sub: function () { wx.requestSubscribeMessage({ tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"], success(res) { console.log("订阅授权成功："+res); }, fail(res){ console.log("订阅授权失败：" + res); } }) }, //帮助用户跳转修改订阅状态 setting:function(){ wx.openSetting({ success(res) { console.log(res.authSetting) // res.authSetting = { // "scope.userInfo": true, // "scope.userLocation": true // } } }) }, [代码] （4）测试流程 点击发送通知后，获得这样的效果： [图片] [图片] 获得对应返回值： [图片] 当errCode为0时，即发送通知成功。 当errCode为43101，说明用户只授权了一次，但是你发送了2次，超过用户授权次数。 [图片] 三、进阶与思考 1、当你有多个订阅模板同时需要用户选择时，你可以通过以下代码记录，用户哪些选了，哪些没选。 [代码]wx.requestSubscribeMessage({ tmplIds: ["5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac", "OBB_Z10eh_Inm9p8EU6Ml_NS_mijXgTz3T07cxgKvX0","5Efr7IqIooYO9nPw047Iggxbm9Ge2Km10GQ4amGOUac"], success(res) { //console.log(res); if (res.errMsg == "requestSubscribeMessage:ok") { let acceptArray = []; //用户授权模板列表 for (let i = 0; i < tmplIds.length; i++) { const element = tmplIds[i]; if (res[element] == "accept") { acceptArray.push(element); } }; console.log(acceptArray); if (acceptArray.length > 0) { //执行下一步函数 } } } }) [代码] 2、一个关于是否需要记录用户对某个“订阅模板授权的次数”，以控制后台“发送的次数”，智库君在实战中认为，其实没有必要，顶多就是你发送返回一个错误码，微信之所有记录用户授权次数，也是为了保护用户不被骚扰。 3、你只需要记录用户点击了哪些需要授权的模板就行，为了是用户点击订阅后，改变按钮的状态，避免订阅按钮反复弹窗的问题，同时当检测到用户点错“总是”按钮后，可以自动跳转到“设置”界面。 4、这次智库君主要给大家简单介绍了下订阅全流程。后面大家可以根据自己的需要，添加和改进这些代码。比如： 配置云函数中的node函数，实现定时发送 配置云函数中的数据库，实现内容的自定义发送 最后，希望这篇文章能帮助到大家，一起学习，一起进步！ （官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscribe-message.html） 往期回顾： [打怪升级]小程序自定义头部导航栏“完美”解决方案 [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二）

之前的模板消息推送，将在2020年1月10日下线，所以我们不得不使用订阅消息了。 我们先来看下订阅消息的官方简介。 [图片] 接下来我们就来借助云开发，来快速实现小程序消息推送的功能。 一：获取模板 ID 这一步和我们之前的模板消息推送是一样的，也是先添加模板，然后拿到模板id [图片] 首先是开通订阅消息功能，很简单，如下图 [图片] 由于长期性订阅消息，目前仅向政务民生、医疗、交通、金融、教育等线下公共服务开放，后期将逐步支持到其他线下公共服务业务。仅就线下公共服务这一点，长期性订阅消息就和大部分开发者无缘了。 所以我们这里只能以使用一次性订阅消息为例。 [图片] 如上图，我们从公共模板库里选择一个一次性订阅的模板。然后编辑模板如下图 [图片] 下图就是我们添加好的模板，下图的模板id就是我们需要的。 [图片] 二，请求用户授权 我们做订阅消息授权时，只能是用户点击或者支付完成后才可以调起来授权弹窗，官方是这么要求的： [图片] 我们这里用到了wx.requestSubscribeMessage这个方法，来获取用户的授权。 1，编写index.wxml代码 [图片] 2，编写index.js代码,实现点击获取授权 [图片] 这一步tmplIds里的一串字符，就是我们自己添加的模板id 3，点击按钮运行效果如下 开发者工具模拟器上点击授权弹窗是这样的： [图片] 手机上的授权弹窗是这样的： [图片] 可以看到，这里显示的就是我们添加的 ‘上课提醒’的模板。 细心的同学可以看到， 真机上多了一个 ‘总是保持以上选择，不再询问’ 其实，你自己仔细多品一些。也能明天，我们正常订阅消息授权时，用户允许的话，你只能推送一次消息。也就是用户允许一次，我们就可以推送一条消息给用户，并且这个允许不存在过期。所以我们可以让用户尽量多的点击允许，这样我们就可以尽量多的给用户发送消息了。 这里用户允许后，我们就可以给用户推送消息了，接下来我们来借助云开发的云函数来实现消息推送功能。 三，获取用户的opneid 先来看官方爸爸是怎么说的。 [图片] 可以看出官方提供了两种方式，我们这里使用云调用。说白了就是在云函数里调用推送功能。 推送所需参数 [图片] 可以看到我这里用来openapi功能，并且需要用到用户的opneid，关于openid的获取，我之前有写过文章，也录过视频的。文章的话，大家去翻下我历史的文章，视频的话，点击这个即可：《借助云函数获取用户openid》 这里的openid的获取我就不再详细讲解了，把对应云函数的代码给大家贴出来。 [图片] 在使用云开发时，有几点需要注意的 1，需要在project.config.json里创建云函数目录如下图 [图片] 2，需要在app.js里初始化云开发环境 [图片] 至于云开发的环境id从哪里拿，我视频里也讲过很多遍了，直接去看我视频或者翻看我历史文章即可。 《零基础入门云开发视频》 四，用云函数实现消息推送 我们只需要创建一个云函数如下，然后填入用户的openid，要跳转的小程序页面链接，模板内容，模板id即可。通常这些数据都应该传进来，简单起见，我就把这里的模板内容写成固定的。 [图片] 注意：我在编写上面的代码时，推送内容的key必须和小程序模板里的key保持一致，否则就会报如下错误。 [图片] 然后看下调用这个云函数的地方 [图片] 如果用户没有授权，我们推送会报如下错误 [图片] 如果用户授权过，我们就可以成功推送了，推送后的打印日志如下 [图片] 还记得我们真机上的授权吗，如果用户只是点击了允许，没有选择一直允许，那我我们在推送成功一次后，如果再次推送，就需要用户重新授权。否则，还是会报这个错误的 [图片] 所以我们用户点击一次允许，我们就可以推送一次消息，比如，我点击了4次允许那么我就可以成功的推送4次 [图片] 效果图 [图片] 可以看到，我们成功的收到 上课提醒的模板消息，点击进去，就是我们具体的推送内容 [图片] 其实我这是连续收到了4条消息，因为我点击了4次允许推送，所以就可以成功的推送4次。 到这里我们就完整的实现模板消息推送功能了，下面我把主要代码贴给大家，大家也可以私信我获取完整源码。 index.wxml [代码]<button bindtap="shouquan" type='primary'>获取订阅消息授权</button> <button bindtap="getOpenid">获取用户的openid并推送消息</button> [代码] index.js [代码]//编程小石头wechat：2501902696 Page({ //获取授权的点击事件 shouquan() { wx.requestSubscribeMessage({ tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //这里填入我们生成的模板id success(res) { console.log('授权成功', res) }, fail(res) { console.log('授权失败', res) } }) }, //获取用户的openid getOpenid() { wx.cloud.callFunction({ name: "getopenid" }).then(res => { let openid = res.result.openid console.log("获取openid成功", openid) this.send(openid) }).catch(res => { console.log("获取openid失败", res) }) }, //发送模板消息到指定用户,推送之前要先获取用户的openid send(openid) { wx.cloud.callFunction({ name: "sendMsg", data: { openid: openid } }).then(res => { console.log("推送消息成功", res) }).catch(res => { console.log("推送消息失败", res) }) } }) [代码] 推送对应的云函数 [代码]//编程小石头wechat：2501902696 const cloud = require('wx-server-sdk') cloud.init() exports.main = async(event, context) => { try { const result = await cloud.openapi.subscribeMessage.send({ touser: event.openid, //要推送给那个用户 page: 'pages/index/index', //要跳转到那个小程序页面 data: {//推送的内容 thing1: { value: '小程序入门课程' }, thing6: { value: '杭州浙江大学' }, thing7: { value: '第一章第一节' } }, templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id }) console.log(result) return result } catch (err) { console.log(err) return err } } [代码] 后面我会分享更多小程序相关的知识出来，请持续关注。 相关视频讲解：https://edu.csdn.net/course/detail/26572

[图片] 为什么要用云函数来做这个？ 前端一条龙不求人（后端） 利用官方资源来快速解决问题，白piao不香吗？ 之前也有不少人分享过云函数生成小程序码的方法，这里我为大家总结下不同方法的区别和优缺点~ [图片] 开盖食用思路： 小程序端请求 --> 云函数API小程序 --> 返回图片的buffer --> 把buffer转化成图片 1、云函数部分 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { try { const result = await cloud.openapi.wxacode.get({ path: event.url, //传入需要配置的url，但是新版本不能传参param width: 300 }) console.log(result) return result } catch (err) { console.log(err) return err } } [代码] 新建一个云函数名字为getWxacode，示例是openapi.wxacode.get的方法，这个参数可以直接跳转小程序内部对应的page。 注意： 与 wxacode.createQRCode 总共生成的码数量限制为 100,000，如果你需要大量生成码，请谨慎调用。且新版本只能传path，不能传参param~ 2、页面部分 [代码]Page({ data: { imgUrl: "" //图片地址 }, getWxacode() { wx.cloud.init(); let self = this; wx.showLoading({ title: '请求云函数' }) // 调用云函数 获取 内容 wx.cloud.callFunction({ name: 'getWxacode', data: { url: "pages/home/index" }, success: res => { console.log('云函数调用成功', res); let bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(res.result.buffer); self.setData({ //imgUrl: res.result.fileID imgUrl: bufferImg }); wx.hideLoading(); }, fail: err => { console.error('云函数调用失败', err) } }) } }) [代码] [图片] 可以获得一个返回值，里面有个图片的buffer，转化buffer即可展示图片内容。 3、转化buffer流成图片的三种方法 3.1 直接将buffer转化Base64 [代码]console.log('云函数调用成功返回值：', res); let bufferImg = "data:image/png;base64," + wx.arrayBufferToBase64(res.result.buffer); self.setData({ imgUrl: bufferImg }); [代码] 这里用到的方法是 wx.arrayBufferToBase64(buffer)转化，加好base64头，即可食用~ 优点: 方便简单 确定: 阅后即焚，无法保存，个别场景可能需要缓存或者拼接canvas海报 3.2 在云函数直接将Buffer上传到云存储 [代码]await cloud.uploadFile({ cloudPath: 'test/' + event.userInfo.openId + '.jpg', //这里如果可以重复就用openId，如果不可能重复就用 fileContent: result.buffer, //处理buffer 二进制数据 success: res => { // 文件地址 console.log(res.fileID) }, fail: err =>{ console.log(err) } }) [代码] [图片] 将生成的小程序码上传到自带的云存储上，可以长期永久保存 优点: 长期保存，合适只要生成一次反复使用的场景 缺点: 生成量大的话，比较占用有限云存储资源 3.3 将图片转化保存在手机本地 [代码]let { buffer } = res.result; const wxFile = wx.getFileSystemManager(); const filePath = wx.env.USER_DATA_PATH + '/test.jpg'; //把图片写在本地 wxFile.writeFile({ filePath, encoding: "binary", data: buffer, success: res => { console.log(res); //writeFile:ok self.setData({ imgUrl: filePath }); } }) [代码] 这里用到的是wx.getFileSystemManager()的方法，将图片buffer转化后保存一个本地地址~ 优点: 生成实体地址，有时候图片太大，base64会出现一些诡异的BUG 缺点: 耗时 4、最终方案 经过综合考虑，这里使用的是不限次数的 openapi.wxacode.getUnlimited方法。 云函数部分： [代码]const cloud = require('wx-server-sdk') cloud.init() exports.main = async (event, context) => { try { const result = await cloud.openapi.wxacode.getUnlimited({ scene: event.scene }); console.log(result) return await cloud.uploadFile({ cloudPath: 'test/' + event.userInfo.openId + '.jpg', fileContent: result.buffer, //处理buffer 二进制数据 success: res => { // 文件地址 console.log(res.fileID) }, fail: console.error }) } catch (err) { console.log(err) return err } } [代码] 页面代码： [代码]Page({ data: { imgUrl: "" //图片地址 }, getWxacode() { wx.cloud.init(); let self = this; wx.showLoading({ title: '请求云函数' }) // 调用云函数 获取 内容 wx.cloud.callFunction({ name: 'getWxacode', data: { scene: "goTo:pages/home/index" }, success: res => { console.log('云函数调用成功', res); self.setData({ imgUrl: res.result.fileID }); wx.hideLoading(); }, fail: err => { console.error('云函数调用失败', err) } }) }, }) [代码] 5、注意事项 5.1 生成码一共有三种方法： openapi.wxacode.get 小程序码，可以直接生成path，但不能传参，有次数限制 openapi.wxacode.createQRCode 二维码，有次数限制 openapi.wxacode.getUnlimited 特定scene传参，无次数限制 （推荐使用） 1和2方法累积10w次限制 5.2 代码报错，跑不了等 [图片] 记得初始化 wx.cloud.init(); [图片] 记得部署云函数~ ctrl+s 是没用的~~~ [图片] 记得先本地调试好，再上传~~~ 官方文档地址： https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.get.html 看完觉得有帮助记得点个赞哦~ 你的赞是我继续分享的最大动力！^-^

小程序全新上线了订单管理功能！所有小程序购物订单一个页面统一管理。 最近微信公开课小助手收到很多商家、开发者关于“如何接入订单管理”的问询。 目前，小程序面向商家的交易保障正在内测中，成功接入的商家将获得小程序卡片背书标识、交易保障官方组件和搜索加权等权益，欢迎广大商家和服务商扫描下方二维码报名。我们将根据商家报名情况，逐步开放内测。 [图片] 集中管理小程序订单 头天买东西，隔天就忘记。你的购物记录，小程序订单管理都帮你记好了—— 点击“发现-小程序-右上角…”，就可以进入小程序订单页面一次性搞定查询购物记录，接入交易保障的商家订单已经支持退款售后、联系客服、向微信求助解决争议等后续操作。在小程序买的东西，这里一目了然。 [图片] 3月13日起，7.0.10版本以上的微信用户陆续可以获得上述功能，在接入交易保障的商家小程序上看到对应标识 派爷年前下单的生发剂，终于快到货了。 更安心买买买   全新的小程序订单页面里，有一个特别的标志，绿色的“保”，就代表了你下单的商家接入了小程序的交易保障能力。 在这类商家的小程序下单，可以轻松享受商家认证、交易监管、无忧售后及48小时发货的购物权益。点击进入订单详情即可查看物流状态、联系客服、申请退货退款、查看争议/售后进度等等，买买买可以更安心了。 [图片] 有了“保”字护身符，给爸妈、朋友安利好东西，也更稳了。 有争议及时处理 买买买的快落，不应该被有争议的订单影响。今天开始，如果和接入小程序交易保障的商家产生交易争议，简单几步就可以维权。 快速发起争议流程 进入“小程序订单页面-相应订单-订单详情”后点击右上角即可发起争议处理流程，商家会在48小时内处理；如果商家与你没有能达成一致，微信平台将及时介入核实处理。 [图片]   低成本投诉 如果在购物过程中没有留下争议证明（如商品页面截图等）也不要紧，在经过认证的商家店铺里，可以不用举证直接发起争议解决流程，举证及核实将会由商家和微信来完成。 维权“直通车” 对于超出平台调解范围的争议，我们正在探索多种解决方案，包括在征得争议双方同意的情况下，协助将争议递交至互联网法院进行调解处理或申请立案，保障各方的合法权益。 目前，微信正就保障用户权益和广州互联网法院尝试合作，后续，我们也将继续拓展和其他法院的沟通合作，让更多用户也能享受到这一维权“直通车”。 虽说买卖不成情意在，但应有的权益还是要保障的。    

导读 当我们有很多云函数时，其中可能很多 [代码]中间件[代码] 、 [代码]工具[代码] 是共用的。 把这些 [代码]中间件[代码] 、 [代码]工具[代码] 复制到每个云函数下，是一件很麻烦的事情，而且如果发生了更新，还要重新复制。最重要的是，这种方式，不符合科学的设计模式。 云函数里的 层(layer) 就可以很好的解决我们这个问题。它是把我们共通需要的 [代码]中间件[代码] 、 [代码]工具[代码] 等文件放在一个公共的路径下，使用过程中只需要引用进来即可。 注意： 层暂时还没出现在小程序官方文档，但是可以在 [代码]腾讯云 - 云函数[代码]找到文档。 实操 这里我们使用 [代码]Nodejs8.9[代码] 来做示范 1. 先确认小程序已经开通了云开发 2. 登录腾讯云 打开登录界面 选择【其他登录方式 - 微信公众号 - 扫码选择对应的小程序(不是公众号)】. [图片] 注意：小程序云开发和腾讯云的账户体系其实是有关联的，可以把腾讯云面板看作更高级的云开发面板 3. 编写层代码 编写以下代码，并保存为 [代码]demo.js[代码] [代码]exports.main = async (event) => { return "hello,layer." } [代码] 把 [代码]demo.js[代码] 打包成 [代码]demo.zip压缩包[代码] 4. 创建分层 打开云函数面板. 点击左侧菜单的『层』 地域选择『上海』 点击『新建按钮』 层名称：demo 提交方法：本地上传zip包 层代码：选择上一步打包的 [代码]demo.zip[代码] 压缩包 运行环境：Nodejs8.9 [图片] 点击提交 注意： 有些压缩软件压缩后，会多一层文件夹，需要注意下，压缩包内打开应该直接就是文件 [代码]demo.js[代码] 没有多一层文件夹。 5. 小程序·云开发面板创建云函数 创建云函数 [图片] 修改 [代码]云函数 demo 下的 index.js[代码] 代码并上传 [代码]var hello = require("demo.js") exports.main = (event, context, callback) => { return hello.main() }; [代码] 6. 云函数绑定层 回到 腾讯云 云函数面板，选择左侧菜单 [代码]函数服务[代码] 注意左上角的 命名空间 选择小程序云开发的命名空间，地域：上海 选择刚创建的 [代码]demo[代码] 云函数 点击 [代码]层管理[代码] 绑定刚创建的 [代码]demo[代码] 层 7. 调试 还是 [代码]demo[代码] 的云函数里，点击 [代码]函数代码[代码] 项 点击测试，返回结果 [代码]"hello,layer."[代码] 既成功 [图片] Q&A 问：为什么云函数里可以直接[代码]require("demo.js")[代码] 引入 [代码]demo.js[代码] ？ 答：绑定层后，会根据顺序把层文件放在系统目录 [代码]/opt[代码] 下，然后该目录在 Node.js 环境下又在环境变量里。当引入 [代码]demo.js[代码] 在当前目录找不到时，会尝试在环境变量内查找。所以云函数可以找到该文件。 再问：如果层的文件名和云函数列表的文件名冲突，岂不是会引入错误？ 答：是的，这时候可以使用绝对路径确保引入的是层文件 [代码]require("/opt/demo.js")[代码] 再再问：如果云函数绑定了多个层，每个层里都有 [代码]demo.js[代码] 会怎么样？ 答：会根据层的顺序，逐个覆盖文件，最终 [代码]/opt/demo.js[代码] 文件是最后一层的文件。 再再再问：环境变量除了这个路径，还有哪些路径？ 答：这里有一份各语言的环境变量路径，可以参考下，具体查看文档 关环境变量 路径 THONPATH [代码]/var/user:/opt[代码] ASSPATH [代码]/var/runtime/java8:/var/runtime/java8/lib/*:/opt[代码] DE_PATH [代码]/var/user:/var/user/node_modules:/var/lang/node6/lib/node_modules:/opt:/opt/node_modules[代码] 问：云函数只支持 [代码]Nodejs8.9[代码] 版本吗？ 答：在小程序云开发面板里，确实只能创建。但是可以通过服务端 SDK 创建以下语言支持。 Python 3.6 Python 2.7 Nodejs 10.15 Nodejs 8.9 Nodejs 6.10 Php 7.2 Php 5.6 Java 8 Golang 1 持续更新… 参考资料 腾讯云·云函数文档

1. 写在前面 自从上次介绍了宇宙第一强集成IDE的微信开发者工具安装插件等隐藏功能后，很多开发者社区哥们老铁感兴趣，一些哥们还私我问我是否支持代码块功能。答案是：支持！而且很完美的支持（此处必须有感恩，感恩微信团队每天的辛苦开发，作为同开发过小编辑器的人知道其中的苦与乐，同时呼吁各位猿少些喷喷喷的负能量，多些宣传和赞美的正能量！）。代码块是小编非常非常常用的一个功能，基本从04年开始建站和开发过程用过的所有IDE中都必备的功能。熟练使用微信开发工具的代码块功能提升编码效率，降低高频代码段的误写率。 2. 什么是代码块 可能有些刚接触开发的哥们不了解什么是「代码块」，这里我仅仅说说我个人对「代码块」功能的理解：代码块，英文名字：Code snippets,代码块的作用就是把比较长的一段代码在编码时只需要输入简写后的几个字母，比如把高频的代码console.log();简写成「clg」，再比如把小程序的页面.js里面的onLoad(),onShow等常用代码简写成「page_init」几个字母，最早提出这个概念和想法的人我也不知道是谁，总之得感谢他。如果说现在很多的编程语言有「语法糖」的说法，那么我个人觉得「代码块」可以称为「代码糖/编码糖」！熟练使用编码糖一定能让你尝到编码中的甜味。他的优点非常明显：极速，0误差输入高频代码段。个人觉得无论你现在处在编码的哪个级别都应该熟练使用Code snippets来提升工作效率。 3. 如何使用 3.1 打开开发者工具的编辑器扩展目录 [图片] 3.2 创建相关文件夹 返回上一级目录到User目下（里面有Workspaces文件夹），创建/进入snippets，此目录mac下完整路径应为："~/Library/Application Support/微信开发者工具/【当前开发者工具特征码】/Default/Editor/User/snippets" [图片] 3.3 新建/编辑代码块json文件（如上图） [图片] 格式如上面，1，2，3是我比较常用的代码糖，生效后输入图1里面的clg回车就是console.log()(可以用这个来检测你代码糖功能是否生效);并且光标自动定位到()里，如下图： [图片][图片] 3.4 附带自用all.code-snippets 下面附上我常用的粗陋的代码糖块文件all.code-snippets（可以直接复制使用，你可以自行自己添加删除。里面有自己写的java框架常用的代码块,php常用和html常用以及nginx比较常用的，个人习惯不一样建议全部干掉重来，只需按里面的格式来写就可以了，格式如下： 字段名 意义 备注 prefix 简写后的字符串 必填 body 原字符串，可以用转义符 必填 description 备注 可控 [代码]{ // Example: // "Print to console": { // "scope": "javascript,typescript", // "prefix": "log", // "body": [ // "console.log('$0');", // "$2" // ], // "description": "Log output to console" // } //java begin "valueOf": { "prefix": "val", "body": "valueOf($0)", }, "parseInt": { "prefix": "par", "body": "Integer.parseInt($0);", }, "parseLong": { "prefix": "parl", "body": "Long.parseLong($0);", }, "equ": { "prefix": "equ", "body": "equals(\"$0\")", }, "isnull": { "prefix": "isnull", "body": "Tools.myIsNull($0)", }, "setattr": { "prefix": "setattr", "body": "request.setAttribute(\"$0\",$2)", }, "getattr": { "prefix": "getattr", "body": "request.getAttribute(\"$0\")", }, "getparam": { "prefix": "getparam", "body": "request.getParameter(\"$0\")", }, "getpost": { "prefix": "getpost", "body": "TtMap postUrl = Tools.getUrlParam();\r\nTtMap post = Tools.getpostmap(request, true);// 过滤参数，过滤mysql的注入，url参数注入\r\n" }, "tcf": { "prefix": "tcf", "body": "try{\r\n}catch(Exception e){\r\n\tTools.logError(e.getMessage());\r\n}finally{\r\n\t$0.closeConn();\r\n}", }, "777": { "prefix": "777", "body": "Runtime.getRuntime().exec(\"chmod 777 -R \" + strFileFullPath);" }, "go-1": { "prefix": "go-1", "body": "javascript:history.go(-1);" }, "dbctrl": { "prefix": "!dbctrl", "body": "DbCtrl dbCtrl = new DbCtrl(\"$0\");\r\ntry{\r\n\tTtList list = dbCtrl.lists(\"\", \"\");\r\n\tTtMap info = dbCtrl.info($2);\r\n}catch(Exception e){\r\n\tTools.logError(e.getMessage());\r\n\tif (Config.DEBUGMODE) {\r\n\t\te.printStackTrace();\r\n\t}\r\n}finally{\r\n\tdbCtrl.closeConn();\r\n}", "description": "TT-DbCtrl" }, "dbtools": { "prefix": "dbtools", "body": "DbTools dbTools = new DbTools();\r\ntry{\r\n\tTtList list = dbTools.reclist(\"$0\");\r\n\tTtMap info = dbTools.recinfo(\"$2\");\r\n}catch(Exception e){\r\n\tTools.logError(e.getMessage());\r\n}finally{\r\n\tdbTools.closeConn();\r\n}" }, "!recinfo": { "prefix": "rrecinfo", "body": "Tools.recinfo(\"$0\")", "description": "TT-DbTools-recinfo" }, "!reclist": { "prefix": "rreclist", "body": "Tools.reclist(\"$0\")", "description": "TT-DbTools-reclist" }, "ss": { "prefix": "ss", "body": "String[] sS = new String[]{}; ", "description": "new String[]" }, "mss": { "prefix": "mss", "body": "TtMap info = new HashMap<>();", "description": "new Map<String,String>" }, "lss": { "prefix": "lss", "body": "TtList lmss = new ArrayList<>();", "description": "new TtList " }, "<%": { "prefix": "!s", "body": "<%\r\n\t$0\r\n%>", "description": "TT-JSP<%自动完成" }, "<%=": { "prefix": "!ss", "body": "<%=$0%>", "description": "TT-JSP<%=自动完成" }, "jsp_include": { "prefix": "!sss", "body": "<jsp:include page=\"<%=$0%>\">\r\n\t<jsp:param name=\"$3\" value=\"$2\"/>\r\n</jsp:include>" }, "jsp_include2": { "prefix": "<jsp", "body": "<jsp:include page=\"<%=$0%>\">\r\n\t<jsp:param name=\"$3\" value=\"$2\"/>\r\n</jsp:include>" }, "!jsp_requery": { "prefix": "!req", "body": "request.getParameter(\"$0\")", }, "!jsp_requery_getAttribute": { "prefix": "!req2", "body": "request.getAttribute(\"$0\")", }, "!": { "prefix": "!ssss", "body": "<%@page import=\"com.tt.tool\"%>\r\n<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\"%>\r\n<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\"%>\r\n<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jsp/jstl/fmt\"%>\r\n<%@ taglib uri=\"http://java.sun.com/jsp/jstl/functions\" prefix=\"fn\"%>\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n <title>$0</title>\r\n</head>\r\n<body>\r\n\t$2\r\n</body>\r\n</html>", "description": "jsp-header" }, "div": { "prefix": "<div", "body": "<div id=\"$0\" name=\"$0\">\r\n\t\r\n</div>", }, "p": { "prefix": "<p", "body": "<p id=\"\" name=\"\"></p>", }, "a": { "prefix": "<a", "body": "<a href=\"$0\" id=\"\" name=\"\">$2</a>", }, "head": { "prefix": "<head", "body": "<head>\r\n\t$0\r\n</head>", }, "img": { "prefix": "<img", "body": "<img id=\"\" name=\"\" src=\"$0\">" }, "ul": { "prefix": "<ul", "body": "<ul id=\"\" name=\"\">\r\n\t\r\n</ul>" }, "li": { "prefix": "<li", "body": "<li id=\"\" name=\"\">\r\n\t\r\n</li>" }, "select": { "prefix": "<select", "body": "<select id=\"\" name=\"\">\r\n\t\r\n</select>" }, "option": { "prefix": "<option>", "body": "<option value=\"\">$0</option>" }, "input": { "prefix": "<input", "body": "<input type=\"$0\" id=\"$2\" name=\"$2\" value=\"$3\">" }, "form": { "prefix": "<form", "body": "<form id=\"info_form\" action=\"$${posturl}\" class=\"form-horizontal\" method=\"post\" enctype=\"multipart/form-data\">\r\n\t$2\r\n</form>" }, "!i": { "prefix": "!i", "body": "<%@ page contentType=\"text/html;charset=UTF-8\" language=\"java\"%>\r\n<%@ page import=\"com.tt.tool.Tools\" %>\r\n<%@ page import=\"com.tt.data.TtMap\" %>\r\n<%@ page import=\"com.tt.data.TtList\" %>\r\n<%@ page import=\"com.tt.tool.JspTools\" %>\r\n<%@ page import=\"java.util.*\" %>\r\n<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\"%>\r\n<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jsp/jstl/fmt\"%>\r\n<%@ taglib uri=\"http://java.sun.com/jsp/jstl/functions\" prefix=\"fn\"%>\r\n<%@ taglib prefix=\"Tools\" uri=\"/tld/manager\" %>\r\n", }, "loginfo": { "prefix": "loginfo", "body": "Tools.logInfo($0)", "description": "loginfo" }, "logerror": { "prefix": "logerror", "body": "Tools.logError($0)", "description": "loginfo" }, //javascript "!go-1": { "prefix": "!go-1", "body": "javascript:history.go(-1);", }, "!tag": { "prefix": "!tag", "body": "<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\"%>\r\n<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jsp/jstl/fmt\"%>\r\n<%@ taglib uri=\"http://java.sun.com/jsp/jstl/functions\" prefix=\"fn\"%>\r\n<%@ taglib prefix=\"Tools\" uri=\"/tld/manager\" %>", }, "$$": { "prefix": "$$", "body": "$(function(){$0\r\n});", "description": "TT-jquery自动运行" }, "$(": { "prefix": "$f", "body": [ "$(function(){", "});" ], "description": "TT-jquery自动运行" }, "timer": { "prefix": "timer", "body": "inv = setInterval(\"$0showtimes();\",1000);", "description": "TT-JS每隔几秒自动运行", }, "!posturl": { "prefix": "!posturl", "body": "<%=Tools.urlKill(\"id$0\")%>", }, "!ifdebug": { "prefix": "ifd", "body": [ "if (Config.DEBUGMODE) {", "\te.printStackTrace();", "}" ], }, "reload":{ "prefix": "reload", "body": "location.reload(true);" }, //PHP "<?php": { "prefix": "php", "body": "<?php $0 ?>", "description": "Global-PHP插入标签" }, "nav":{ "prefix": "nav", "body": "<navigator url=\"car_yy/car_yy_ppuser/car_yy_ppuser\">", "description": "老子的微信小程序的跳转", }, "bind":{ "prefix": "bind", "body": "bindtap=\"$1\"", "description": "老子的bindtap" }, "wx_ra":{ "prefix": "wepy_ra", "body":"let result = await util.wxRequest(httpSet);", "description": "微信小程序阻塞等待请求" }, "wx_r":{ "prefix": "wepy_r", "body":["util.wxRequest(httpSet).then(function(result){\r\n\tif(result.result==\"success\"){$1\r\n\t}\r\n});"], "description": "微信小程序阻塞等待请求" }, "httpset":{ "prefix": "wepy_hs", "body": "let params= {};\r\nlet httpSet={\r\n\turl:'$1',\r\n\tparams:params,\r\n\tmethod:'GET',\r\n\tisShowLoading: false,\r\n}", "description": "httpSet" }, "wepy_global":{ "prefix": "wepy_global", "body": "wepy.$$instance.globalData.$1", }, "wepy_castfail":{ "prefix": "wepy_castfail", "body": "this.$$broadcast('alertHeaderWarning', '$1');" }, "wepy_castOK":{ "prefix": "wepy_castok", "body": "this.$$broadcast('alertHeader', '$1');" }, "wepy_castfail_height":{ "prefix": "wepy_castfailh", "body": "this.$$broadcast('alertHeaderWarningHeight', '$1',60);" }, "wepy_castOK_height":{ "prefix": "wepy_castokh", "body": "this.$$broadcast('alertHeaderHeight', '$1',60);" }, "clg": { "prefix": "clg", "body": "console.log($0);" }, "wepy_tt":{ "prefix": "wepy_tt", "body": "let that = this;" }, "wepy_currtarget":{ "prefix": "wepy_currt", "body": " e.currentTarget.dataset.$1", }, "wepy_gourl":{ "prefix":"wepy_gourl", "body":"@tap=\"goUrl\" data-url=\"$1\" data-memberflag=\"$2\"", }, "wepy_goback":{ "prefix": "wepy_goback", "body":"wepy.navigateBack();" }, "wepy_urlencode":{ "prefix": "wepy_urlencode", "body": "encodeURIComponent($1);" }, "wepy_urldecode":{ "prefix": "wepy_urldecode", "body": "decodeURIComponent($1);" }, "wepy_noimg":{ "prefix": "wepy_noimg", "body": "/images/imgload.png", }, "wepy_errmsg":{ "prefix": "wepy_errmsg", "body": "(result && result.errorMsg) ? result.errorMsg :\"删除失败！\"", }, "wepy_sets":{ "prefix": "wepy_sets", "body": "wepy.setStorageSync($1,$2);" }, "wepy_gets":{ "prefix": "wepy_gets", "body": "wepy.getStorageSync($1);" } } [代码] 4. 相关链接 持续更新：收藏整理官方隐藏的小程序功能/参数/方法/API 动手打造更强更好用的微信开发者工具-编辑器扩展篇 点击wxml里面的绑定事件/变量名/样式名直接跳转到对应文件代码 小程序编码时变量名中文转英文变量名工具，各种驼峰取名 微信开发者工具编辑器支持「书签」功能，快速跳转到指定文件指定行和列 愉快的编写和调试Java：体验新版开发者工具的编辑器扩展功能 5. 其他未公布的隐藏功能 当你觉得有用的时候，就点赞和收藏或者分享，觉得没用的话就投诉，不管点赞还是投诉后的码农写代码永无BUG ，CP设计的产品人见人爱，BOSS每年收入翻番！ ↓↓↓↓↓↓__________________________________________________________________________投诉的话点…↓↓↓

文章声明 这篇文章虽然很短，但很实用… 核心代码 打开你的 [代码]app.wxss[代码] 文件，在第一行加上 [代码]page {   filter: grayscale(100%); } [代码]

大家好，又是我拎包哥，今天我们来实现在云开发中批量上传图片。 经过Stephen哥的指正，我改用了Promise.all的方法来达到目的。 Promise.all的作用就是等待所包含的promise函数结束后再执行下一步逻辑，非常方便好用！const db = wx.cloud.database() const test = db.collection('test') Page({     onLoad() {         this.imgList = []         wx.chooseImage({             success: (res) => {                 this.TFP = res.tempFilePaths             }         })     },     btn() {         let promiseMethod = new Array(this.TFP.length)         for (let i = 0; i < this.TFP.length; i++) {             promiseMethod[i] = wx.cloud.uploadFile({                 cloudPath: 'img' + i + '.png',                 filePath: this.TFP[i]             }).then(res => {                 this.imgList.push(res.fileID)             })         }         Promise.all([...promiseMethod]).then(() => {             test.add({                 data: {                     imgList: this.imgList                 }             })         })     } }) --------------------------------------我是分割线-------------------------------------- async await 要点： ctrl c + ctrl v这里用了await阻塞在wx.cloud.uploadFile前面，避免还没上传完图片就往数据库插入数组。减少了then里的代码，美观逼格高。嘻嘻嘻。await wx.cloud.uploadFile不能放在wx.chooseImage里，如果可以的话，请告诉我怎么做，谢谢!欢迎交流，指出错误，我立刻修改么么哒。 标准版 const db = wx.cloud.database() const test = db.collection('test') Page({   onLoad() {     this.imgList = []       wx.chooseImage({       success: (res) => {         this.TFP = res.tempFilePaths               }     })   },      async btn() {     this.imgList = []     console.log(this.TFP)     for (let i = 0; i < this.TFP.length; i++) {       await wx.cloud.uploadFile({         cloudPath: 'img' + i + '.png',         filePath: this.TFP[i]       }).then(res => {         this.imgList.push(res.fileID)       })     }     test.add({       data: {         imgList: this.imgList       }     })   } }) 新手最爱一锅炖版（不推荐） 为什么不推荐呢，因为选择图片并不意味着要上传图片，用户还没进行最终的确定操作（不过可以用来了解async await）。 onLoad() {     this.imgList = []     wx.chooseImage({       success: async res => {         this.TFP = res.tempFilePaths         for (let i = 0; i < this.TFP.length; i++) {           await wx.cloud.uploadFile({             cloudPath: 'img' + i + '.png',             filePath: this.TFP[i]           }).then(res => {             this.imgList.push(res.fileID)                      })         }         test.add({           data: {             imgList: this.imgList           }         })       }     })   } [图片] ==========================end==========================