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(): 销毁所有音频，世界安静了