米夕共享库

框架

框架仅适用于米夕平台，其多租户模式，以及接口都是按米夕平台设计，涉及到用户登录及验证均由米夕平台接口提供。

MyApp

提供小程序配置环境初始化，扩展原生 App 对象，添加一些自定义属性和方法。使用：

const Mx = require("mixi-wxcore");
Mx.setContext(wx);
Mx.App(App, {});

其中，配置参数有：

• env
  • 环境变量，可选：prod, test, dev。
• homepage
  • 默认为/pages/index/index。

自定义方法，如：

• isDev(): boolean
  • 是否是开发环境
• isTest(): boolean
  • 是否是测试环境（一般用于体验版）
• isProduction(): boolean
  • 是否是线上环境
• $get(api, params, callback): Promise|null
  • 发起一个GET异步请求
• $post(api, params, callback): Promise|null
  • 发起一个POST异步请求
• $upload(api, params, callback): Promise|null
  • 发起一个上传异步请求
• $showMessage(message, title, callback): void
  • 消息弹框提示
• $confirm(message, title): Promise
  • 一个确认对话框
• $tooltip(message, callback): void
  • 一个简单的提示信息
• $loading(message): ({remove()})
  • 显示加载视图
• trigger(name, data): void
  • 自定义全局事件派发
• on(name, handler): void
  • 自定义全局事件绑定
• off(name, handler): void
  • 自定义全局事件解绑
• getWxOpenId(): Promise
  • 试图获取用户wxOpenId
• checkLogin(): Promise
  • 验证用户是否登录（或过期）
• tryLogin(): Promise
  • 尝试自动登录

MyComponent

自定义组件基类，主要是方便获取租户的主色themeColor。使用：

const Mx = require("mixi-wxcore");
Mx.Component(Component, {});

加入了组件自定义属性：

• myComponentId [自动生成]
  • 自定义组件的唯一编号，每个组件一个编号，通过this.data.myComponentId获取。
• themeColor [自动生成]
  • 当前租户的主题色，通过this.data.themeColor获取。

自定义方法，如：

• toPage(page, data, callback): void
  • 调用当前页面（MyPage）的toPage()方法
• goBack(data): void
  • 调用当前页面（MyPage）的goBack()方法
• tryRedirect(params, defaultUrl): void
  • 调用当前页面（MyPage）的tryRedirect()方法
• emit(event, params): boolean
  • 自定义事件派发，监听方法可以使用bindHandler(e){e.detail.preventDefault()}方式阻止事件默认行为。使用上述方式emit()将返回true代表阻止事件默认行为（具体阻止行为需要在业务代码里实现，如：if (!this.emit(.., ..)) {...}）。

MyPage

自定义页面基类，使用：

const Mx = require("mixi-wxcore");
Mx.Page(Page, {});

加入了页面自定义属性，如：

• myPageId [自动生成]
  • 自定义页面的唯一编号，每个页面一个编号，通过this.data.pageId获取
• themeColor [自动生成]
  • 当前租户的主题色，通过this.data.themeColor获取
• pageTitle
  • 页面标题，默认取app.cfgs.appTitle
• background
  • 页面背景色，如：#f00，为theme时自动取app.cfgs.themeColor值
• pageLoaded [自动生成]
  • 当页面生命周期onLoad()完成之后该值设为true
• needLogin
  • 该页面是否需要登录查看，如果未登录则自动跳转到登录页面，默认为true
• needUser
  • 该页面是否需要用户信息，会试图自动登录获取用户信息，默认为true

实现了用户登录判断逻辑，如果未登录将自动跳转到登录页面。设置needUser为false时不检查用户信息,也就是不会试图自动登录，needLogin为false时不会跳转到登录页面。

扩展的方法有：

• toPage(page, data, callback): void
  • 使用wx.switchTab()或wx.navigateTo()进行页面跳转。允许传递数据，在目标页面（也必须是一个自定义页面）通过this.data..或者getPageData()获取。在目标页面执行goBack()或doPageCallback()时callback()回调方法会被执行，可以获取目标页面传回的数据。
• goBack(data): void
  • 使用wx.navigateBack()返回到上一级页面。允许返回一个数据，在上一级页面发起跳转时的toPage()方法的callback回调方法中可以获得该数据，如：this.toPage(path, params, data => { /* do something */ });
• tryRedirect(params, defaultUrl)
  • 使用wx.redirectTo()试图重定向到目标页面。优先重定向到this.options.redirect指定的页面，如果未指定则使用参数defaultUrl对应的页面。参数params是重定向时传递的参数，原理和用法通toPage()方法中的data参数。另外，this.options.redirect参数指定的方式如：wx.navigateTo('/pages/login/index?redirect=...')或this.toPage('/pages/login/index', {redirect: '...'})等。
• getPageData()
  • 当页面通过toPage()方法跳转而来时，该方法能获取到toPage()方法传入的data数据。
• doPageCallback(data)
  • 当页面通过toPage()方法跳转而来时，该方法可以不返回页面的情况下执行toPage()对应的callback回调方法，并传回数据。
• emit(event, data)
  • 自定义事件派发，监听方法可以使用bindHandler(e){e.detail.preventDefault()}方式阻止事件默认行为。使用上述方式emit()将返回true代表阻止事件默认行为（具体阻止行为需要在业务代码里实现，如：if (!this.emit(.., ..)) {...}）。
• updateModels(datas, keyField, format)
  • 约定，如果是列表型的页面，在页面的data属性中添加models属性，作为页面列表项模型，通过该方法可以方便简化模型的更新。
• setModelSelected(index, beSelected, keyField)
  • 约定，针对可选择的列表型页面，配合页面的data属性中的selectedModels和isMultiSelected属性，该方法方便了列表项的选择与不选择操作。

MyListPage

自定义列表页面基类，在 MyPage 的基础上增加列表相关的属性和方法，使用：

const Mx = require("mixi-wxcore");
Mx.ListPage(Page, {});

其中属性有：

• mode
  • 列表模式，暂时只支持select选项，如果mode为select则页面开启选择模式，相当于一个选择列表。
• selectMode
  • 内部属性，可以在页面data中指定，如果未指定将通过参数mode生成。
• multiple
  • 页面开启选择模式时，是否支持多选。
• required
  • 页面开启选择模式时，是否必选，仅多选时有效。
• requiredMessage
  • 必须提示信息
• isEmpty
  • 内部属性，用于标记列表数据是否为空。

扩展的方法有：

• getListView(): [Node]
  • 返回自定义列表组件，默认调用MyListPage.getListView()实现。
• getDataAt(index): any
  • 返回列表中索引为index对应的数据，默认调用MyListPage.getDataAt()实现。
• onLoadResultHandler(event): void
  • 用于绑定自定义列表组件加载完成事件，同步并格式化页面与组件的数据。默认调用MyListPage.loadResultHandler()实现。
• onItemTapHandler(event): void
  • 用于绑定列表项点击事件，默认调用MyListPage.itemTapHandler()实现。
• onSubmitBtnHandler(event): void
  • 用于绑定提交按钮点击事件，默认调用MyListPage.submitBtnHandler实现。
• formatData(data): any
  • 数据格式化
• submitAdapter(data): any
  • 选项提交前，数据格式化方法

静态方法：

• MyListPage.getListView(): [Node]
  • 返回自定义列表组件，默认是组件id='listView'对应的组件。参见组件mx-list。
• MyListPage.getDataAt(index): any
  • 返回列表中索引为index对应的数据。
• MyListPage.reachBottomHandler(): void
  • 页面滚动到底部时默认执行的方法，将通过MyListPage.doMore()加载更多数据。
• MyListPage.loadResultHandler(e): void
  • 列表数据加载完成时，可以使用该方法初始化数据集。
• MyListPage.itemTapHandler(e): void
  • 该方法处理列表项的点击事件，设置列表项选中或未选中状态。
• MyListPage.submitBtnHandler(e): void
  • 获取当前列表选中项并提交，查看MyListPage.doSubmit()方法。
• MyListPage.doSelectResult(result): void
  • 当自定义列表组件mx-list选项变更时，同步页面选择状态。
• MyListPage.doSubmit(data): void
  • 选择模式下，用于提交当前选择项数据集。试图通过页面的tryRedirect()或goBack()返回数据。
• MyListPage.doRefresh(callback): void
  • 刷新列表
• MyListPage.doMore(callback): void
  • 加载更多数据（翻页）

MyFrame

用户信息、状态等信息类。一般在 app.js onLaunch() 方法中创建并初始化。

组件

Border

<mx-border top ></mx-border>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | left | 是否显示左边框 | boolean | false | | right | 是否显示右边框 | boolean | false | | top | 是否显示上边框 | boolean | false | | bottom | 是否显示下边框 | boolean | false | | radius | 边框圆角 | number | 0 |

Button

<mx-button>按钮</mx-button>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | label | 文本信息 | string | | type | 按钮类型，可选：primary / danger / default | string | default | | icon | 图标，结合mx-icon组件使用 | string | | iconUrl | 图标，使用本地或网络图标 | string | | iconOpacity | 图标透明度 | number | 1 | | size | 大小，可选：tiny / small / normal / big / bigger / large / larger | string | normal | | radius | 圆角 | number | 20 | | disabled | 是否禁用 | boolean | false |

Card

<mx-card title="标题">
  <view>内容</view>
<mx-card>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | title | 标题 | string | | more | 是否显示更多按钮 | boolean | | moreText | 更多按钮文本 | string | 更多 |

Cell

<mx-cells>
  <mx-cell label="标签">内容</mx-cell>
<mx-cells>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | label | 标签文本 | string | | value | 内容 | string | | arrow | 是否显示前头符号 | boolean | false | | first | 是否是第一个Cell，配合做样式优化 | boolean | false |

Cells

<mx-cells>
  <mx-cell>...</mx-cell>
  <mx-cell>...</mx-cell>
</mx-cells>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | theme | 主题（暂无效） | string | | border | 是否显示上下边框 | boolean | false |

CountButton

<mx-count-button value="1"></mx-count-button>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | value | 计数值 | number | 0 | | min | 最小值 | number | 0 | | max | 最大值 | number | 100 | | step | 步长 | number | 1 | | showZero | 是否显示0值 | boolean | false |

Empty

<mx-empty></mx-empty>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | message | 文本信息 | string |

End

<mx-end></mx-end>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | text | 文本信息 | string |

Icon

<mx-icon name="add"></mx-icon>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | name | 图标名称，可选：add / arrow / back / bell / check / check2 / close / close2 / decrease / empty / increase / play / plus / search / select / settings / stop / user/ video / voice | string | | suffix | 名称后缀（暂无效） | string | | url | 使用本地或网络图标 | string | | opacity | 透明度 | number | 1 | | size | 大小，可选：tiny / small / normal / big / bigger / large / larger | string | normal |

MediaBox

<mx-media-box datas="{{ medias }}"></mx-media-box>

Page({
  data: {
    medias: [
      { url: ".../aa.jpg" },
      { url: ".../bb.mp3" },
      { url: ".../cc.mp4" },
      { url: ".../dd", type: "image" }
    ]
  }
})

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | datas | 数据集 | array | | maxSize | 最多显示媒体个数 | number | 4 | | fix | 是否固定高度，将根据外部容器高度自适应 | boolean | false | | gap | Box网格间距 | number | 0 | | imageMode | 图片显示模式，同原生image组件的mode属性 | string | aspectFill |

其中datas格式：

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | url | 媒体网络地址 | string | | thumbnail | 媒体缩略图 | string | | type | 媒体类型，可选：image / video / voice，默认还会根据url后缀判断 | string | image |

MediaSwiper

<mx-media-swiper datas="{{ medias }}"></mx-media-swiper>

Page({
  data: {
    medias: [
      { url: ".../aa.jpg" },
      { url: ".../bb.mp3" },
      { url: ".../cc.mp4" },
      { url: ".../dd", type: "image" }
    ]
  }
})

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | datas | 数据集 | array | | current | 当前（默认）显示媒体的索引 | number | 0 | | imageMode | 图片显示模式，同原生image组件的mode属性 | string | aspectFit | | autoplay | 是否自动滑动 | boolea | false | | interval | 自动滑动时，滑动的时间间隔（毫秒） | number | 5000 |

其中datas格式：

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | url | 媒体网络地址 | string | | type | 媒体类型，可选：image / video / voice，默认还会根据url后缀判断 | string | image |

MediaViewer

<mx-media-viewer url="..."></mx-media-viewer>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | url | 媒体网络地址 | string | | attachId | 米夕平台的附件编号 | number | | type | 媒体类型，可选：image / video / voice，默认还会根据url后缀判断 | string | image | | fix | 是否固定高度，将根据外部容器高度自适应 | boolean | false | | imageMode | 图片显示模式，同原生image组件的mode属性 | string | widthFix | | videoPlayBtn | 是否显示视频播放按钮 | boolean | true | | videoFullScreen | 是否默认全屏播放 | boolean | false |

Modal

<mx-modal>
  <view>...</view>
</mx-modal>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | show | 显示或隐藏 | boolean | false |

PageNavigation

<mx-page-navigation title="..." scrollTop="..."></mx-page-navigation>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | title | 标题内容 | string | | backgroundColor | 背景色，如：#f00 | string | | theme | 主题，可选：black / white | string | black | | showBack | 是否显示回退按钮 | boolean | true | | showTitle | 是否总是显示标题 | boolean | false | | opacity | 用于设置导航栏的透明度 | number | 0 | | pageScrollTop | 页面的滚动条高度，用于设置导航栏透明度 | number | 0 |

Props

<mx-props datas="{{ properties }}"></mx-props>

Page({
  data: {
    properties: [
      { label: "", value: "" },
      { label: "", value: "" },
      { label: "", value: "" },
      { label: "", value: "" }
    ]
  }
})

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | datas | 数据集，格式：[{label, value}] | object | | showCount | 默认显示个数，其他隐藏，点击查看，为0时不启用 | number | 0 |

Space

<mx-space></mx-space>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | theme | 主题，可选：black / white / default | string | default | | size | 大小，是10的倍数 | number | 1 |

VideoPlayer

<mx-video-player></mx-video-player>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | src | 视频的网络地址 | string | | showPlayBtn | 是否显示播放按钮 | boolean | true | | fullScreen | 是否默认全屏播放 | boolean | false |

VoicePlayer

<mx-voice-player></mx-voice-player>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | src | 音频的网络地址 | string |

WxMobile

<mx-wxmobile
  bindok=""
  bindcancel=""
  binddeny=""
></mx-wxmobile>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- |

WxUser

<mx-wxuser
  show
  bindok=""
  bindcancel=""
  binddeny=""
></mx-wxuser>

| Prop | Description | type | Default Value | | ---- | ---- | --- | ---- | | show | 显示或隐藏 | boolean | false |

页面

短信登录

/pages/auth/login/bymobile

• 参数
  • useWxAuth：是否通过微信获取手机号码

密码登录

/pages/auth/login/bypwd

• 参数
  • showDevTips：是否显示开发提示文案

修改密码

/pages/auth/repwd/index

短信重置密码

/pages/auth/repwd/sms

• 参数

  • mobile：需要重置账号的手机号码，可选，不传时将自行输入
  • force：仅用于注册时，建议重置密码，可被跳过操作
  • temp：用于短信接口的用户临时编号
  • token: 用于短信接口的验证码

• 说明
  temp 和 token 用于优化操作，从注册页面进入该页面时，其实注册页面已经获取过短信验证码，直接传入该页面，即无需用户再次获取验证码。

输入框页面

/pages/form/input

• 参数
  • title：页面标题
  • value：当前内容
  • placeholder：输入提示信息，默认为“请输入”
  • type：输入类型，即输入框类型，默认为“text”
  • multi：是否多行输入
  • emptymsg|empty：内容为空时的提示信息

列表型选择页面

/pages/select/list

• 参数：
  • api：列表接口名称
  • params：接口默认参数
  • datas：静态列表数据集，不使用api加载的情况
  • keyField：编号对应的字段名称，默认取值顺序为id -> code -> value
  • labelField：默认列表的显示字段，默认取值顺序为label -> title -> name
  • searchField：搜索字段名称，搜索时api的参数名称，默认无
  • selectedKeys：默认选中的列表项
  • multi：是否多选，默认为false
  • adapter：数据转换器（数据集格式化）
  • arrow：默认列表，显示项前头图标
  • selectOnlyOne：当只有1条数据的时候是否默认选择（不需要再点击了）
  • submitAdapter：选中提交时的数据格式转换方法

工具类

Chart

• line(context, canvasId, datas, options): void;
  • 画线性图表

Payment

• payOrderByAccount(orderId, type, params, callback): void;

  • 通过账户支付订单

• payOrderByStoreCard(orderId, type, params, callback): void;

  • 通过储值卡支付订单

• payOrderByWx(orderId, type, params, callback): void;

  • 通过微信支付订单

Utils

• barcode(context, canvasId, code, width, height): void;

  • 渲染条形码

• base64ToStr(value): string;

  • Base64转字符串，一般用于微信加密的接口

• compareVersion(v1, v2): number;

  • 比较版本号，v1==v2是返回0，v1<v2时返回-1，v1>v2时返回1

• countdown(count, callback): void;

  • 倒计时

• debounce(name, handler, delay): void;

  • 防重复延迟执行

• debounceInstance(): debounceFun;

  • 创建一个防重复延迟执行方法，同debounce但不会全局冲突

• formatMobile(mobile): string;

  • 格式化手机号码为123 0000 0000

• formatNumber(value, decimal, trim): string;

  • 数字格式化为字符串

• getDataKey(data, keyField): any;

  • 获取对象的编号值，keyField为空时默认取对象的id -> code -> value属性

• getDataLabel(data, labelField): string;

  • 获取对象的文本信息，labelField为空时默认取对象的label -> title -> name属性

• getHideMobile(mobile): string;

  • 格式化手机号码为123 **** 0000，隐藏中间4位

• getRect(context, selector, callback): void;

  • 获取页面上元素的宽、高、上、下、左、右信息，返回：{width, height, left, right, top, bottom}

• getUrlParams(url): object;

  • 获取url中的参数（?search=后面部门内容）

• isArray(value): boolean;

  • 判断是否是数组对象

• isFunction(value): boolean;

  • 判断是否是方法

• isMobile(mobile): boolean;

  • 判断是否是手机号码

• isSameDay(dt1, dt2): boolean;

  • 判断dt1和dt2是否是同一天

• makePhoneCall(mobile, errmsg): void;

  • 拨打电话

• qrcode(context, canvasId, code, size): void;

  • 渲染二维码

• queryString(params, encode): string;

  • 将对象装换为url查询字符串，如：a=1&b=2&c=3

• stepToNum(start, end, duration, frequency, callback): void;

  • 按一定频率将数据递增到某个值

• toArray(value): Array;

  • 将对象转换为数组，确保返回的是一个数组

• toDate(value): Date;

  • 转化为日期对象，value可以是日期字符串或者时间戳

• toDateString(dt, pattern): string;

  • 日期格式化，默认pattern为yyyy-MM-dd

• trimNum(value, decimal): string;

  • 去除数字后面多余的0

• trimStr(value): string;

  • 去除字符串2端的空白字符

• uuid(): number;

  • 获取全局唯一编号