上周微信云开发上线了「工作流」能力。支持通过拖拉拽的方式搭建流程，支持调用、时间、消息通知、支付等多种驱动场景的业务计算，主要目的是降低开发门槛，提升开发效率。 一、什么是工作流？ 工作流这个概念我们并不陌生，其概念发端于上世纪70年代，正常解释为：对工作流程及其各操作步骤之间业务规则的抽象、概括描述。 说白了就是我们在做任何任务时（不管是线下任务还是线上任务），在组织团队中或者合作关系的他人之间，按照既定的规则完成工作的过程，都可以用一个流程图来清楚的表达出来。 下面是企业员工入职流程的流程图，无需繁杂的文字描述，任何人都能够通过该图清楚整个流程，这其实就是一种工作流。 [图片] 为实现特定的业务目标，多个参与者之间按某种预定规则传递文档、信息或者任务可以被称为特定业务目标的工作流程。 而如果使用计算机对上述工作流程抽象实现，让计算机能够参与其中，自动化的完成信息交互或者相关任务的设计，就被称为工作流。 二、微信推出的工作流体验 在小程序开发中，除了业务数据的增删改查之外，还有些业务需要对接外部的平台。比如 1.小程序用户在客服中发送消息，需要根据消息关键词自动匹配相应回答并显示。 2.小程序接收到用户支付后，完成订单的状态扭转和相应的通知发送。 3.小程序用户撤销信息授权时，执行相关的数据库信息删除工作。 4........ 我们在与这些外部平台来做连接的过程中，会发现其都是可抽象化的，可以简化成若干个事件驱动。比如微信支付成功或失败，就可以转化为微信支付的事件驱动，当支付完成时，特定的执行什么事情。 单纯用代码来实现时，我们需要做很多事情，包括事件监听链接的配置，事件内容解析，同步或异步回复。开发成本还是比较高的，并且有时候受经验限制会没办法对接的非常好。 工作流将微信相关的事件整合进来，你可以通过配置关键信息，直接接入事件的触发，然后根据你自己的业务逻辑设计整个处理链路。 比如接收小程序用户消息做自动回复的工作流如下： [图片] 在触发上直接配置小程序appid和token，就可以完成接入。 我们以消息自动回复举例子，完成整个工作流的体验 1.  首先需要在小程序开发者工具IDE中，打开云开发云函数控制面板，新建时选择工作流，然后创建消息触发，如下图演示： [图片] 工作流是由触发器节点开始的，目前支持的触发器节点如下： [图片] 2. 对触发器节点配置一些基本信息，我们点击触发节点，在右侧抽屉栏中对应的填写appid，以及token还有解密AESkey [图片] 这样我们就配置好了触发节点，通过模拟数据或者实际监听推送来完成后续的工作流建设。 [图片] 当你需要真实的调试时，需要在小程序后台配置相关的信息，下图appid、token、EncodingAESKey和url需要对应的填入公众号或者小程序后台。 [图片] [图片] 3. 我们添加一些条件判断，用来判断事件监听的类型，针对不同的类型分开处理。比如「用户消息」和「撤销信息」我们就需要对应的做不同的流程。 我们可以通过模拟数据或者真实监听来看到触发时接收的消息结构，以便于后面我们做相关判断处理。如下图我们知道接收文本消息时，MsgType 为 text。 [图片] 接下来我们做个判断，来区分用户发送文本消息和图片消息，如流程演示： [图片] 添加条件分支并编辑的操作如上，我们相对应的做出监听图片以及其他的分支，如下图： [图片] 4. 有了条件分支我们就可以相对应的做处理了，在这里为了简化演示，我们直接用被动回复来做（主要注意被动回复只在公众号生效，小程序需要调用接口回消息）。返回的格式我们还是要遵循微信文档描述的响应模式。 [图片] 我们来实践一下，如下图： [图片] 对应的我们给所有的条件都设置上返回内容，当遇到我们没有匹配的MsgType时，直接返回空消息告诉微信服务器我们收到消息了，就不用持续发送了。 [图片][图片][图片] 5. 设置完毕后，我们就开始整体流程调试，点击右上角「流程调试」，前面我们配置小程序后台之后，我们就可以在调试时主动发送小程序客服消息来实现触发。如下演示： [图片] 我们可以看到我们的判断逻辑生效了，工作流会根据我们发送的消息类型完成扭转。 [图片] 如果调试没有问题，就可以发布了，发布后你可能需要在公众号或者小程序后台更改一下推送URL为正式URL，之前的是调试用的。 [图片] 除了由微信消息触发之外，工作流还提供了很多触发节点，比如HTTP调用，组件访问，微信支付事件等。 以上就是一些基本的操作介绍，如果你觉得这样操作点击很多，你想在现成的上面修改，可以在开通时直接选择相应的模板，这些模板都是常见场景可用的。 [图片] 三、总结 工作流通过将判断逻辑和接入节点抽象化，来做到所见及所得的逻辑编写，上手门槛很低，只需要有一定的逻辑思维就可以自己构建一个基本的工作流，配合一些简单的代码编写，完成稍微复杂的工作流不是问题。 有的时候作为产品经理在策划功能的时候，都喜欢用UI界面做前端设计，用流程图做后端逻辑设计。产品经理可以用工作流来自己搭建验证策划的功能，跟研发同学沟通会更加轻松，甚至自己就可以实现一些基础的，不用麻烦研发同学，自力更生了。 另外工作流的模板可以共建起来，任何人都可以上传自己制作的工作流给其他人用。如果场景和工作流节点有其他需求，可以在这里提交。 如果你在使用中有任何疑点或者寻求方案，可以联系微信云服务的架构师。 关于本文中提出的观点和内容，如果你有其他补充和意见，欢迎在文章下留言～

微信小程序中提供了日志的监控api，鉴于uniapp去进行开发微信小程序下，uniapp还未兼容wx.getRealtimeLogManager()此API，所以写下使用的方式在uniapp下也可以使用日志打印到小程序管理后台中。步骤一：创建log.js文件 内容如下： var log = wx.getRealtimeLogManager ? wx.getRealtimeLogManager() : null module.exports = { debug() { if (!log) return log.debug.apply(log, arguments) }, info() { if (!log) return log.info.apply(log, arguments) }, warn() { if (!log) return log.warn.apply(log, arguments) }, error() { if (!log) return log.error.apply(log, arguments) }, setFilterMsg(msg) { // 从基础库2.7.3开始支持 if (!log || !log.setFilterMsg) return if (typeof msg !== 'string') return log.setFilterMsg(msg) } } 第二步：页面引用 [图片] 第三步：调用方式 [图片] 第四步：效果展示 [图片] ps：替换完成后需要使用log.info 或warn error等方式去进行插入，具体的方式写在log.js中封装的情况 具体接口文档链接：API文档：https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getRealtimeLogManager.html 日志监控文档：https://developers.weixin.qq.com/miniprogram/dev/framework/realtimelog/

微信公众号官方文档中因为比较旧，导致很多API已经失效或已经被隐藏不再提供，之前设置的可以用，但是后续不再提供。 比如修改公众号自定义菜单的接口，以及文档中供API设置的type类型与在管理后台配置的类型不一致。【详情可看我提问url:https://developers.weixin.qq.com/community/develop/doc/000ae2a14e4b88b5621ea494055c00】 官方文档地址如下：https://developers.weixin.qq.com/doc/offiaccount/Custom_Menus/Creating_Custom-Defined_Menu.html 开始步入正题，怎么通过API去设置公众号的历史资讯跳转。 一：根据百度搜寻答案：http://www.scicat.cn/jingyan/20210906/5866591.html 中的文章展示之前的公众号是提供直接设置的，但是现在的公众号没有了如图[图片] 二：说明此按钮以及页面经过迭代已经被取消了，因此找到此前设置了历史资讯的公众号，查询一下将获得一个url，此链接我先放下面提供使用： https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=【如下获取】==#wechat_redirect [图片] 三： 方式一：如何获取__biz， 1、可以扫码打开微信管理后台，首页中的发布历史记录中会有数据 [图片] 2、在网页中按下F12打开源代码视图，选中element，如果是中文的小伙伴就选择元素这一栏，如下 [图片] [图片] 3、点击左上角的小箭头，然后将它移动【点击-定位】到近期发表的一个文章中上，查看源码中的链接，这样就可以找到属于这个公众号的__biz了 [图片] 方式二：通过官方文档中这个接口去进行获取URLhttps://developers.weixin.qq.com/doc/offiaccount/Publish/Get_publication_records.html【此方法我没获取出来0.0】 方式三：参考前辈的方式：https://developers.weixin.qq.com/community/develop/article/doc/00086055b04c28af016d22fdd5b813 四：拼接完成后进行API接口去设置就好了  https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN [图片]

自定义navigate+分包+自定义tabbar，有需要的可以拿去用用，可能会存在一些问题，根据自己的业务改改吧 大家也可以多多交流 代码片段：在这里 {"version":"1.1.5","update":[{"title":"修复 [复制代码片段提示] 无法使用的问题","date":"2020-06-15 09:20","imgs":[]}]} 更新日志:     2019-11-25  自定义navigate 也可以调用wx.showNavigationBarLoading 和 wx.hideNavigationBarLoading     2019-11-25  页面滚动条显示在自定义navigate 和 自定义tabbar上面的问题(点击“体验custom Tabbar” [图片] [图片] 其他demo: 云开发之微信支付：代码片段

前言 在开发小程序的过程中，很多时候会需要使用富文本内容，然而现有的方案都有着或多或少的缺陷，如何更好的显示富文本将是一个值得继续探索的问题。 [图片] 现有方案 WxParse [代码]WxParse[代码] 作为一个应用最为应用最广泛的富文本插件，在很多时候是大家的首选，但其也明显的存在许多问题。 格式不正确时标签会被原样显示 很多人可能都见到过这种情况，当标签里的内容出现格式上的错误（如冒号不匹配等），在[代码]WxParse[代码]中都会被认为是文本内容而原样输出，例如：[代码]<span style="font-family:"宋体"">Hello World!</span> [代码] 这是由于[代码]WxParse[代码]的解析脚本中，是通过正则匹配的方式进行解析，一旦格式不正确，就将导致无法匹配而被直接认为是文本[代码]//WxParse的匹配模式 var startTag = /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/, endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/, attr = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; [代码] 然而，[代码]html[代码] 对于格式的要求并不严格，一些诸如冒号不匹配之类的问题是可以被浏览器接受的，因此需要在解析脚本的层面上提高容错性。 超过限定层数时无法显示 这也是一个让许多人十分苦恼的问题，[代码]WxParse[代码] 通过 [代码]template[代码] 迭代的方式进行显示，当节点的层数大于设定的 [代码]template[代码] 数时就会无法显示，自行增加过多的层数又会大大增加空间大小，因此对于 [代码]wxml[代码] 的渲染方式也需要改进。 对于表格、列表等复杂内容支持性差 [代码]WxParse[代码] 对于 [代码]table[代码]、[代码]ol[代码]、[代码]ul[代码] 等支持性较差，类似于表格单元格合并，有序列表，多层列表等都无法渲染 rich-text [代码]rich-text[代码] 组件作为官方的富文本组件，也是很多人选择的方案，但也存在着一些不足之处 一些常用标签不支持 [代码]rich-text[代码] 支持的标签较少，一些常用的标签（比如 [代码]section[代码]）等都不支持，导致其很难直接用于显示富文本内容 ps：最新的 2.7.1 基础库已经增加支持了许多语义化标签，但还是要考虑低版本兼容问题 不能实现图片和链接的点击 [代码]rich-text[代码] 组件中会屏蔽所有结点事件，这导致无法实现图片点击预览，链接点击效果等操作，较影响体验 不支持音视频 音频和视频作为富文本的重要内容，在 [代码]rich-text[代码] 中却不被支持，这也严重影响了使用体验 共同问题 不支持解析 [代码]style[代码] 标签 现有的方案中都不支持对 [代码]style[代码] 标签中的内容进行解析和匹配，这将导致一些标签样式的不正确 [图片] 方案构建 因此要解决上述问题，就得构建一个新的方案来实现 渲染方式 对于该节点下没有图片、视频、链接等的，直接使用 [代码]rich-text[代码] 显示（可以减少标签数，提高渲染效果），否则则继续进行深入迭代，例如： [图片] 对于迭代的方式，有以下两种方案： 方案一 像 [代码]WxParse[代码] 那样通过 [代码]template[代码] 进行迭代，对于小于 20 层的内容，通过 [代码]template[代码] 迭代的方式进行显示，超过 20 层时，用 [代码]rich-text[代码] 组件兜底，避免无法显示，这也是一开始采用的方案[代码]<!--超过20层直接使用rich-text--> <template name='rich-text-floor20'> <block wx:for='{{nodes}}' wx:key> <rich-text nodes="{{item}}" /> </block> </template> [代码] 方案二 添加一个辅助组件 [代码]trees[代码]，通过组件递归的方式显示，该方式实现了没有层数的限制，且避免了多个重复性的 [代码]template[代码] 占用空间，也是最终采取的方案[代码]<!--继续递归--> <trees wx:else id="node" class="{{item.name}}" style="{{item.attrs.style}}" nodes="{{item.children}}" controls="{{controls}}" /> [代码] 解析脚本 从 [代码]htmlparser2[代码] 包进行改写，其通过状态机的方式取代了正则匹配，有效的解决了容错性问题，且大大提升了解析效率 [代码]//不同状态各通过一个函数进行判断和状态跳转 for (; this._index < this._buffer.length; this._index++) this[this._state](this._buffer[this._index]); [代码] 兼容 [代码]rich-text[代码] 为了解析结果能同时在 [代码]rich-text[代码] 组件上显示，需要对一些 [代码]rich-text[代码]不支持的组件进行转换[代码]//以u标签为例 case 'u': name = 'span'; attrs.style = 'text-decoration:underline;' + attrs.style; break; [代码] 适配渲染需要 在渲染过程中，需要对节点下含有图片、视频、链接等不能由 [代码]rich-text[代码]直接显示的节点继续迭代，否则直接使用 [代码]rich-text[代码] 组件显示；因此需要在解析过程中进行标记，遇到 [代码]img[代码]、[代码]video[代码]、[代码]a[代码] 等标签时，对其所有上级节点设置一个 [代码]continue[代码] 属性用于区分[代码]case 'a': attrs.style = 'color:#366092;display:inline;word-break:break-all;overflow:auto;' + attrs.style; element.continue = true; //冒泡：对上级节点设置continue属性 this._bubbling(); break; [代码] 处理style标签 解析方式 方案一 正则匹配[代码]var classes = style.match(/[^\{\}]+?\{([^\{\}]*?({[\s\S]*?})*)*?\}/g); [代码] 缺陷： 当 [代码]style[代码] 字符串较长时，可能出现栈溢出的问题 对于一些复杂的情况，可能出现匹配失败的问题 方案二 状态机的方式，类似于 [代码]html[代码] 字符串的处理方式，对于 [代码]css[代码] 的规则进行了调整和适配，也是目前采取的方案 匹配方式 方案一 将 [代码]style[代码] 标签解析为一个形如 [代码]{key:content}[代码] 的结构体，对于每个标签，通过访问结构体的相应属性即可知晓是否匹配成功[代码]if (this._style[name]) attrs.style += (';' + this._style[name]); if (this._style['.' + attrs.class]) attrs.style += (';' + this._style['.' + attrs.class]); if (this._style['#' + attrs.id]) attrs.style += (';' + this._style['#' + attrs.id]); [代码] 优点：匹配效率高，适合前端对于时间和空间的要求 缺点：对于多层选择器等复杂情况无法处理 因此在前端组件包中采取的是这种方式进行匹配 方案二 将 [代码]style[代码] 标签解析为一个数组，每个元素是形如 [代码]{key,list,content,index}[代码] 的结构体，主要用于多层选择器的匹配，内置了一个数组 [代码]list[代码] 存储各个层级的选择器，[代码]index[代码] 用于记录当前的层数，匹配成功时，[代码]index++[代码]，匹配成功的标签出栈时，[代码]index--[代码]；通过这样的方式可以匹配多层选择器等更加复杂的情况，但匹配过程比起方案一要复杂的多。 [图片] 遇到的问题 [代码]rich-text[代码] 组件整体的显示问题 在显示过程中，需要把 [代码]rich-text[代码] 作为整体的一部分，在一些情况下会出现问题，例如： [代码]Hello <rich-text nodes="<div style='display:inline-block'>World!</div>"/> [代码] 在这种情况下，虽然对 [代码]rich-text[代码] 中的顶层 [代码]div[代码] 设置了 [代码]display:inline-block[代码]，但没有对 [代码]rich-text[代码] 本身进行设置的情况下，无法实现行内元素的效果，类似的还有 [代码]float[代码]、[代码]width[代码](设置为百分比时)等情况 解决方案 方案一 用一个 [代码]view[代码] 包裹在 [代码]rich-text[代码] 外面，替代最外层的标签[代码]<view style="{{item.attrs.style}}"> <rich-text nodes="{{item.children}}" /> </view> [代码] 缺陷：当该标签为 [代码]table[代码]、[代码]ol[代码] 等功能性标签时，会导致错误 方案二 对 [代码]rich-text[代码] 组件使用最外层标签的样式[代码]<rich-text nodes="{{item}}" style="{{item.attrs.style}}" /> [代码] 缺陷：当该标签的 [代码]style[代码] 中含有 [代码]margin[代码]、[代码]padding[代码] 等内容时会被缩进两次 方案三 通过 [代码]wxs[代码] 脚本将顶层标签的 [代码]display[代码]、[代码]float[代码]、[代码]width[代码] 等样式提取出来放在 [代码]rich-text[代码] 组件的 [代码]style[代码] 中，最终解决了这个问题[代码]var res = ""; var reg = getRegExp("float\s*:\s*[^;]*", "i"); if (reg.test(style)) res += reg.exec(style)[0]; reg = getRegExp("display\s*:\s*([^;]*)", "i"); if (reg.test(style)) { var info = reg.exec(style); res += (';' + info[0]); display = info[1]; } else res += (';display:' + display); reg = getRegExp("[^;\s]*width\s*:\s*[^;]*", "ig"); var width = reg.exec(style); while (width) { res += (';' + width[0]); width = reg.exec(style); } return res; [代码] 图片显示的问题 在 [代码]html[代码] 中，若 [代码]img[代码] 标签没有设置宽高，则会按照原大小显示；设置了宽或高，则按比例进行缩放；同时设置了宽高，则按设置的宽高进行显示；在小程序中，若通过 [代码]image[代码] 组件模拟，需要通过 [代码]bindload[代码] 来获取图片宽高，再进行 [代码]setData[代码]，当图片数量较大时，会大大降低性能；另外，许多图片的宽度会超出屏幕宽度，需要加以限制 解决方案 用 [代码]rich-text[代码] 中的 [代码]img[代码] 替代 [代码]image[代码] 组件，实现更加贴近 [代码]html[代码] 的方式 ；对 [代码]img[代码] 组件设置默认的效果 [代码]max-width:100%;[代码] 视频显示的问题 当一个页面出现过多的视频时，同时进行加载可能导致页面卡死 解决方案 在解析过程中进行计数，若视频数量超过3个，则用一个 [代码]wxss[代码] 绘制的图片替代 [代码]video[代码] 组件，当受到点击时，再切换到 [代码]video[代码] 组件并设置 [代码]autoplay[代码] 以模拟正常效果，实现了一个类似懒加载的功能 [代码]<!--视频--> <view wx:if="{{item.attrs.id>'media3'&&!controls[item.attrs.id].play}}" class="video" data-id="{{item.attrs.id}}" bindtap="_loadVideo"> <view class="triangle_border_right"></view> </view> <video wx:else src='{{controls[item.attrs.id]?item.attrs.source[controls[item.attrs.id].index]:item.attrs.src}}' id="{{item.attrs.id}}" autoplay="{{item.attrs.autoplay||controls[item.attrs.id].play}}" /> [代码] 文本复制的问题 小程序中只有 [代码]text[代码] 组件可以通过设置 [代码]selectable[代码] 属性来实现长按复制，在富文本组件中实现这一功能就存在困难 解决方案 在顶层标签上加上 [代码]user-select:text;-webkit-user-select[代码] [图片] 实现更加丰富的功能 在此基础上，还可以实现更多有用的功能 自动设置页面标题 在浏览器中，会将 [代码]title[代码] 标签中的内容设置到页面标题上，在小程序中也同样可以实现这样的功能[代码]if (res.title) { wx.setNavigationBarTitle({ title: res.title }) } [代码] 多资源加载 由于平台差异，一些媒体文件在不同平台可能兼容性有差异，在浏览器中，可以通过 [代码]source[代码] 标签设置多个源，当一个源加载失败时，用下一个源进行加载和播放，在本插件中同样可以实现这样的功能[代码]errorEvent(e) { //尝试加载其他源 if (!this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > 1) { this.data.controls[e.currentTarget.dataset.id] = { play: false, index: 1 } } else if (this.data.controls[e.currentTarget.dataset.id] && e.currentTarget.dataset.source.length > (this.data.controls[e.currentTarget.dataset.id].index + 1)) { this.data.controls[e.currentTarget.dataset.id].index++; } this.setData({ controls: this.data.controls }) this.triggerEvent('error', { target: e.currentTarget, message: e.detail.errMsg }, { bubbles: true, composed: true }); }, [代码] 添加加载提示 可以在组件的插槽中放入加载提示信息或动画，在加载完成后会将 [代码]slot[代码] 的内容渐隐，将富文本内容渐显，提高用户体验，避免在加载过程中一片空白。 最终效果 经过一个多月的改进，目前实现了这个功能丰富，无层数限制，渲染效果好，轻量化（30.0KB），效率高，前后端通用的富文本插件，体验小程序的用户数已经突破1k啦，欢迎使用和体验 [图片] github 地址 npm 地址 总结 以上就是我在开发这样一个富文本插件的过程大致介绍，希望对大家有所帮助；本人在校学生，水平所限，不足之处欢迎提意见啦！ [图片]

消息通知有两种： 一、A的动作后，发消息给A自己，这种容易解决，不多说明； 二、A动作后，发消息给B（比如管理员、店家、楼主），如何保证B收到消息？这种是本方案要解决的问题。 一张图片一眼告诉你什么是订阅消息，产品经理的设计UI居然让人一眼就知道订阅消息是什么玩意。 [图片] 用户 B （管理员、商家、组长、楼主）在知道订阅数不足后，打开小程序来续订阅数，否则没法收到订阅消息。 [图片] 补充一： 关于勾选按钮，请注意话述是：“总是保持以上选择，不再询问”，而不是：“总是同意接收订阅消息”，不要幻想就成了永久性订阅消息； 相当于你打电话订外卖，对店家说“老样子”，店家只会马上送一次外卖，而不是会以后每天自动给你送外卖了。 勾选和不勾选的区别是什么呢？ 区别仅仅是：不勾选时，必须点击订阅10次，弹窗10次；勾选后，仍然必须点击订阅10次，但是不弹窗。无论如何“订阅”这个点击n次的动作少不了。 补充二： 一旦勾选后，就不可逆了，没有任何办法恢复或取消勾选了，除非你小程序MP后台换一次消息模板号(删除模板，重新添加一次)。 补充三： 关于如何保存订阅数。 保存在数据库中，笔者用的是云开发，数据库表user结构如下： { _id:'openid1', nickName:'老张', msg:{ "tempId1":5, "tempId2":7, } } 补充四： 关于如何获取订阅数。两种方式： 一、wx.requestSubscribeMessage的回调success里获取； 二、消息推送机制获取；https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html

这篇文章主要是记录下本人在第一次接触第三方开发的时候的一些流程，从给授权方进行授权开始，到授权方授权完成后，给授权方提供相对的服务以及开发的流程，暂时以小程序的开发为主，后续会继续完善公众号/服务号的开发流程，刚刚接触开发若有不对的，和遗失的可以私信和留言哈，欢迎各位大佬们提供建议，新手编写的，轻喷，哈哈哈哈。 [图片]