云函数类插件通用教程：使用2.9+欢迎使用滚动君

√

√

云函数插件通用教程

使用云函数插件的前提是：使用2.9+

欢迎来到滚滚君

这个项目是2020年疫情期间在家闲着玩了两天。 那时我只做了半年的前端工作。 这段时间做了一些项目，也积累了一些经验。 所以我写了一个项目的简单总结。 转眼间，又半年过去了。 除了业务更加熟练之外，我在使用uni开发小程序方面也多了一点经验。 而且我还在微信公众平台后台看到，这个小程序一直被人们使用。 想到自己已经忽视这个项目大半年了，我感到羞愧。 隧道改造，带着半年的想法。

添加了自定义组件的全局注入

在全局方法（见下文）中，在 API 中。 我们可以简单地传递 this.$()。 来达到效果。 但事实上，有时候这种效果并不是我们想要的。 例如，UI设计是Gif动画。 该产品期望在开始和结束时有淡入和淡出效果。 并且整个应用程序是统一的。 当然，有时候，连吐司、模型等交互效果都是一样的。 我们通常的做法是在文件夹中定义一个组件，比如这里调用：-，并在其中定义_$方法。

导入后，将组件写入：

使用时：

this.$refs['custom-interactive']._$loading();

这种做法本身并没有什么问题，只是太麻烦了。 您不仅需要在每个页面的模板中声明该组件，还需要使用：

this.$refs['custom-interactive']...

这里是一个不引入组件的情况下调用组件内部方法的例子，仅供参考。

原理是通过在vue..js中配置vue-来重写vue--方法。 手动之前插入 - 组件。

如下：

module.exports = {
    // ...
    chainWebpack: config => {
        config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
            const compile = options.compiler.compile
            options.compiler.compile = (template, info) => {
                if (info.resourcePath.match(/^pages/)) {
                    template = template.trim()
                    template = template.replace(/^<[\d\D]+?>/g, _ => `${_}
                        
                    `)
                }
                return compile(template, info)
            }
            return options
        })
    }
}

此时你只需要换行：

this._$loading() // 代替 this.$refs['custom-interactive']._$loading() 即可

新方法

之前开发uni-app项目时，我习惯把一些工具和方法挂载到全局变量uni上。 但随着项目的深入，这些方法会越来越多。 这时，老问题又出现了：命名冲突。 uni作为全局变量，是官方维护的。 如果命名问题处理不好，很容易覆盖一些官方的API。 这得不偿失。

所以我在vue..js中定义了一个全局变量G对象。 将所有的工具和方法放在G对象中。 G对象的源代码位于G文件夹中。 同时，为了更方便使用，我点了Vue的原型。 对象到G对象。 这样就可以通过this来调用G中的方法了。 G对象有以下方法：

$(标题='正在加载',掩码=true)

描述：展示

this.$loading()
G.$loading()

$()

描述：隐藏

this.$loaded()
G.$loaded()

$toast(标题, 图标 = '无', = 1500, 掩码 = false)

描述：显示toast

this.$toast('toast文字')
this.$toast('toast文字', 'success')
G.$toast('toast文字', '../../toast.png', 2333)

$()

描述：隐藏吐司

this.$toasted()
G.$toasted()

$模型（标题，，{...}）

描述：展示模型

this.$model('只有内容')
this.$model('自定义标题', '带标题的内容')
this.$model('自定义标题', '带标题带自定义的内容', {
    cancelText: '自定义文字',
    confirmText: '自定义文字',
    confirmColor: '#00FF00',
    ...
}).then(() => console.log('点击确定'))
  .catch(() => console.log('点击取消'))

$copy(, 吐司, )

说明：复制到剪贴板

this.$copy('18888888888')
this.$copy('18888888888', '复制成功')
this.$copy('18888888888', '复制成功', '../../toast.png')

$调用()

描述：拨打电话

this.$call('18888888888')

$(/[])

描述：预览图

this.$preview('http://....png')
this.$preview('../../test.png')
this.$preview(['http://....png', '../../test.png'])

$()

描述：获取元素位置大小（之后执行且G.$调用无效）

this.$offset('.content').then(res => { // mounted 之后执行且 G.$offset 调用无效
    console.log(res) // { top: .., left: .., width: .., height: ..... }
})

$克隆(json/)

说明：快速克隆方法（使用JSON方法实现）

console.log(this.$clone({ a: 1 }))

$(api,,conf)

说明：快速网络请求方法（具体实现及功能见源码）

除了以上方法外。 对于项目中主要用到的三个uni工具库：

,,

已升级至最新版本。 这些工具都是我亲自维护的，并且已经在多个线上项目中稳定运行，相对安全可靠。 结合这些工具库，几乎可以实现中大型Web项目中需要的所有功能，而且更加简洁方便。

最后，谢谢。 感激的。 感谢插件市场上所有给我提出宝贵意见的朋友。 当然，最后，如果您觉得这个项目对您有帮助，还请star支持。

TAG标签：小程序插件