作者：jrainlau 原文：在小程序中实现 Mixins 方案 Fundebug经授权转载，版权归原作者所有。 在原生开发小程序的过程中，发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制，所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂，靠复制粘贴来维护代码显然不科学，于是便寻思着如何在小程序里面实现 Mixins。 什么是 Mixins Mixins 直译过来是“混入”的意思，顾名思义就是把可复用的代码混入当前的代码里面。熟悉 VueJS 的同学应该清楚，它提供了更强大了代码复用能力，解耦了重复的模块，让系统维护更加方便优雅。 先看看在 VueJS 中是怎么使用 Mixins 的。 [代码]// define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component() // => "hello from mixin!" [代码] 在上述的代码中，首先定义了一个名为 [代码]myMixin[代码] 的对象，里面定义了一些生命周期函数和方法。接着在一个新建的组件里面直接通过 [代码]mixins: [myMixin][代码] 的方式注入，此时新建的组件便获得了来自 [代码]myMixin[代码] 的方法了。 明白了什么是 Mixins 以后，便可开始着手在小程序里面实现了。 Mixins 的机制 Mixins 也有一些小小的细节需要注意的，就是关于生命周期事件的执行顺序。在上一节的例子中，我们在 [代码]myMixin[代码] 里定义了一个 [代码]created()[代码] 方法，这是 VueJS 里面的一个生命周期事件。如果我们在新建组件 [代码]Component[代码] 里面也定义一个 [代码]created()[代码] 方法，那么执行结果会是如何呢？ [代码]var Component = Vue.extend({ mixins: [myMixin], created: function () { console.log('hello from Component!') } }) var component = new Component() // => // Hello from mixin! // Hello from Component! [代码] 可以看运行结果是先输出了来自 Mixin 的 log，再输出来自组件的 log。 除了生命周期函数以外，再看看对象属性的混入结果： [代码]// define a mixin object const myMixin = { data () { return { mixinData: 'data from mixin' } } } // define a component that uses this mixin var Component = Vue.extend({ mixins: [myMixin], data () { return { componentData: 'data from component' } }, mounted () { console.log(this.$data) } }) var component = new Component() [代码] [图片] 在 VueJS 中，会把来自 Mixins 和组件的对象属性当中的内容（如 [代码]data[代码], [代码]methods[代码]等）混合，以确保两边的数据都同时存在。 经过上述的验证，我们可以得到 VueJS 中关于 Mixins 运行机制的结论： 生命周期属性，会优先执行来自 Mixins 当中的，后执行来自组件当中的。 对象类型属性，来自 Mixins 和来自组件中的会共存。 但是在小程序中，这套机制会和 VueJS 的有一点区别。在小程序中，自定义的方法是直接定义在 Page 的属性当中的，既不属于生命周期类型属性，也不属于对象类型属性。为了不引入奇怪的问题，我们为小程序的 Mixins 运行机制多加一条： 小程序中的自定义方法，优先级为 Page > Mixins，即 Page 中的自定义方法会覆盖 Mixins 当中的。 代码实现 在小程序中，每个页面都由 [代码]Page(options)[代码] 函数定义，而 Mixins 则作用于这个函数当中的 [代码]options[代码] 对象。因此我们实现 Mixins 的思路就有了——劫持并改写 [代码]Page[代码] 函数，最后再重新把它释放出来。 新建一个 [代码]mixins.js[代码] 文件： [代码]// 保存原生的 Page 函数 const originPage = Page Page = (options) => { const mixins = options.mixins // mixins 必须为数组 if (Array.isArray(mixins)) { delete options.mixins // mixins 注入并执行相应逻辑 options = merge(mixins, options) } // 释放原生 Page 函数 originPage(options) } [代码] 原理很简单，关键的地方在于 [代码]merge()[代码] 函数。[代码]merge[代码] 函数即为小程序 Mixins 运行机制的具体实现，完全按照上一节总结的三条结论来进行。 [代码]// 定义小程序内置的属性/方法 const originProperties = ['data', 'properties', 'options'] const originMethods = ['onLoad', 'onReady', 'onShow', 'onHide', 'onUnload', 'onPullDownRefresh', 'onReachBottom', 'onShareAppMessage', 'onPageScroll', 'onTabItemTap'] function merge (mixins, options) { mixins.forEach((mixin) => { if (Object.prototype.toString.call(mixin) !== '[object Object]') { throw new Error('mixin 类型必须为对象！') } // 遍历 mixin 里面的所有属性 for (let [key, value] of Object.entries(mixin)) { if (originProperties.includes(key)) { // 内置对象属性混入 options[key] = { ...value, ...options[key] } } else if (originMethods.includes(key)) { // 内置方法属性混入，优先执行混入的部分 const originFunc = options[key] options[key] = function (...args) { value.call(this, ...args) return originFunc && originFunc.call(this, ...args) } } else { // 自定义方法混入 options = { ...mixin, ...options } } } }) return options } [代码] Mixins 使用 在小程序的 [代码]app.js[代码] 里引入 [代码]mixins.js[代码] [代码]require('./mixins.js') [代码] 撰写一个 [代码]myMixin.js[代码] [代码]module.exports = { data: { someData: 'myMixin' }, onShow () { console.log('Log from mixin!') } } [代码] 在 [代码]page/index/index.js[代码] 中使用 [代码]Page({ mixins: [require('../../myMixin.js')] }) [代码] [图片] 大功告成！此时小程序已经具备 Mixins 的能力，对于代码解耦与复用来说将会更加方便。

方式一：官方组件->official-account 方式二：官方组件->webview打开公众号文章引导用户关注 方式三：官方组件->button open-type='contact' 打开客服窗口给用户推送关注公众号引导 方式四、小程序内嵌公众号名称或者图片 方式一：官方组件->official-account https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html 前提：当用户扫小程序码打开小程序时，开发者可在小程序内配置公众号关注组件，方便用户快捷关注公众号，可嵌套在原生组件内。 Tips 使用组件前，需前往小程序后台，在“设置”->“关注公众号”中设置要展示的公众号。注：设置的公众号需与小程序主体一致。在一个小程序的生命周期内，只有从以下场景进入小程序，才具有展示引导关注公众号组件的能力:当小程序从扫小程序码场景（场景值1047，场景值1124）打开时当小程序从聊天顶部场景（场景值1089）中的「最近使用」内打开时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态当从其他小程序返回小程序（场景值1038）时，若小程序之前未被销毁，则该组件保持上一次打开小程序时的状态为便于开发者调试，基础库 2.7.3 版本起开发版小程序增加以下场景展示公众号组件：开发版小程序从扫二维码（场景值 1011）打开 — 体验版小程序打开组件限定最小宽度为300px，高度为定值84px。每个页面只能配置一个该组件。 方式二：官方组件->webview打开公众号文章引导用户关注 小程序中使用webview组件打开一篇要关注公众号的文章，引导用户点击公众号名称关注； 需设置：在公众号中关联小程序，否则不能打开公众号文章 [图片] 方式三：官方组件->button open-type='contact' 打开客服窗口给用户推送关注公众号引导 [图片] 技能get: 1.如果获取公众号历史连接：PC微信客户端获取 [图片] 2.快捷获取公众号二维码：https://open.weixin.qq.com/qr/code?username=dyh_mirsh 方式四、小程序内嵌公众号名称或者图片 图片：引导用户保存图片在微信扫一扫识别 名字：提供复制能力，引导用户复制到搜索框搜索； [图片]

概述 本文主要教大家在线考试小程序里面插入图片 准备资料 试题编号 图片，并且图片按照试题编号命名 由于图片是依赖于试题信息的，所以在做这个工作之前，请先导入试题信息 [图片] 图片按照试题编号命名如下所示 [图片] 备注： 如果存在多张图片，请在试题编号后面添加01、02，比如试题编号为20200611202006110005，那么 第一张图片为2020061120200611000501 第二张图片为2020061120200611000502 图片扩展名保持不变 步骤 第一步：打开云开发控制台 第二步：切换到存储面板，将按照试题编号命名的图片上传上来，截图一所示 第三步：切换到数据库面板 第四步：找到集合question 第五步：找到对应的试题 第六步：在该试题信息里面添加以下三个信息，截图三所示 1、mediatype，具体值为02 2、medianame，具体值为图片 3、imgs，将图片FileID复制到数组的第一项里面 其中imgs是数组类型，也就是要选择array，截图二所示 截图如下 截图一 [图片] 截图二 [图片] 截图三 [图片] 备注 其他疑问可以在评论区留言