@shanjuhudong/mp NPM

webpack构建闪聚小程序公用基础包

简介

闪聚小程序基础库, 支持多平台小程序

使用方法请参照小程序脚手架

主功能说明

生命周期修改: App和Page的生命周期支持异步函数进行异步串行，方便做登录拦截等异步操作

// 例：
// app.js
App({
    // async/wait写法
    async onLaunch(){
        await new Promise(resolve => {
            setTimeout(resolve, 1000)
        })
    },
    // 返回Promise写法
    onLaunch(){
        return new Promise(resolve => {
            setTimeout(resolve, 1000)
        })
    }
})
// page.js
Page({
    onLoad(){
        //这里将会等到app.js的onLaunch异步结束后，才执行
        console.log('page loaded')
    }
})

组件自定义事件增强: 子组件通过this.emit触发父组件事件, 父组件绑定事件无需在标签上绑定, 直接在Page参数中用on拼接事件名做为事件函数名即可. (原生事件不变)

//例：
// my-component.js
Component({
    lifetimes: {
        created(){
            //增强事件触发方法，注意：事件名建议用大陀峰命名法
            this.emit('Created')
        }
    }
})
// parent.js 直接在父级页面定义函数名on拼接事件名(created)即可，即onCreated
Page({
    //增强版事件函数
    onCreated(){
        console.log('plus event handler')
    }
})

// 增加版事件支持异步串行
// my-component.js
Component({
    lifetimes: {
        async created(){
            let result = await this.emit('Created')
            // 往下逻辑依赖于上面的结果
            console.log(result) //这里将在1秒后打印: 1000ms
        }
    }
})
// page.js
Page({
    //增强版事件函数
    onCreated(){
        console.log('plus event handler')
        return new Promise(resolve => {
            setTimeout(() => {
                resolve('1000ms')
            }, 1000)
        })
    }
})

多平台兼容: 平台API对象可通过App.$gl()获取, 当然, 原生API对象同样可用, 只不过如果想写多个小程序平台共用的代码, 建议使用兼容对象.
```
const _g = App.$gl()
_g.showToast({
    title: 'hellow world'
})
```

公用对象(SJ): 创建了公用对象, 它包含一些常用的常量和方法, 也会包含一些全局数据, 完全可代替globalData对象使用.(具体参照下方文档)

const _g = App.$gl()
const SJ = _g.SJ
//打印SJ看看, 有好东西
console.log(SJ)
App({
    async onLaunch(options){
        await SJ.$login(options)
        await SJ.$launchInit()
    }
})

数据管理对象(State): 请记住这个对象, 因为到处都有它. 通过SJ.$createState()创建它, 它身上有$get和$set方法, 与lodash的get和set相似, 但有区别.

const _g = App.$gl()
const SJ = _g.SJ
const state = SJ.$createState()
state.$set('a.b.c', 1) // 此时, state 变为 {a: {b: {c: 1}}}
state.$get('a') // 输出 {b: {c: 1}}
state.$get('a.b') // 输出 {c: 1}
state.$get('a.b.c') // 输出 1
state.$get('a.a.a.a.a') // 输出 undefined, 不会报错
//结论: 访问对象较深的值时, 安全写法 state.a && state.a.a && state.a.a.a && state.a.a.a.a, 而直接用state.$get('a.a.a.a.a')即可同样安全.

文档

1. 公用函数

2. 常量

BASE_WIDTH: 视觉稿宽度，值750
BRAND: 设备品牌
IS_ANDROID: 是否安卓系统
IS_IOS: 是否IOS系统
MODEL: 设备型号。新机型刚推出一段时间会显示unknown
OS: 操作系统及版本
SDK_VERSION: 客户端基础库版本
VERSION: 版本号
VIDEO_H: 播放页视频原高度
VIDEO_S: 播放页视频高宽比（VIDEO_H / VIDEO_W）
VIDEO_W: 播放页视频原宽度
WIDTH_CALC_CUT: 最终裁切宽度，基于UI宽750
WIDTH_CUT_LIMIT: 裁切的上限
WIN_H: 屏幕显示区域高
WIN_S: 屏幕显示区域高宽比(WIN_H/WIN_S)
WIN_W: 屏幕显示区域宽
W_RATE: 屏幕显示区域宽与视觉稿宽比例 (WIN_S/BASE_WIDTH)

3. 其他变量

config: 一些全局的基础配置项，如：异步请求的base_url，header以及版本号等，可以通过$merge(SJ.config, {})插入更多配置项
voice: 音效控制对象
- voice.add(arr: String[], baseUrl: String='https://img.shanju.fun/voice'): 添加音效初始化，可以一次添加多个相同base地址的音效，例如，
  - 添加默认地址的音效：add(['a.mp3', 'b.mp3']), 音效在腾讯云上传
  - 添加其他地址的音效：add(['c.mp3'], 'https://***')
- voice.play(name: String, loop: Boolean): 播放，必须先add之后再play，否则无效，播放参数name只需要写音效的名字即可，如：
  - play('a')，则播放https://img.shanju.fun/voice/a.mp3
  - play('c')，则播放https://***/c.mp3
  - 循环播放：play('a', true)，一般用于播放背景音乐之类的
- voice.pause(name): 暂停指定name的音频
- voice.stop(name): 停止指定name的音频
- voice.destroy(name): 销毁指定name的音频
- voice.clear(): 销毁所有音频，世界安静了