npm package: @sureking/mp
Description: 微信小程序开发框架。实现单文件开发模式，支持ES7以上语法和集成GraphQL工具包
Latest version: 1.0.11

# @sureking/mp 使用说明
## 介绍

微信小程序开发框架。实现单文件开发模式，支持ES7以上语法和集成GraphQL工具包

（目前属于实验阶段，仅支持pug模版引擎、javascript和sass/scss样式语言）

## 安装

npm i @sureking/mp --save-dev

## 使用

项目入口文件引入@sureking/mp进行小程序项目构建
```
require('@sureking/mp')({
  src: 'src', // 小程序源代码目录，默认 src
  dist: 'weapp', // 小程序编译后输出目录，默认 weapp
  appid: 'appid', // 小程序appid -必填
  projectName: 'mp' // 小程序项目名称 -必填
  devDefine: { // 定义开发模式下的编译变量
    BASE_URL: 'http://localhost:1025' // 使用内置网络工具（上传工具、微信接口工具、Graphql工具）和当前为serve模式时必填
  },
  prodDefine: { // 定义生产模式下的编译变量
    BASE_URL: 'https://api.sureking.cn' // 使用内置网络工具（上传工具、微信接口工具、Graphql 工具）和当前为 build 模式时必填
  }
})
```

使用编译变量

```
define.BASE_URL //根据模式自动使用devDefine或prodDefine中定义的变量值
```

## 模版文件开发指南

> 模版文件采用mp后缀,其他后缀均不能被模版解析器识别，如: home.mp

> mp文件是小程序开发时的最重要文件，分别定义视图、配置、脚本、样式

- 视图定义, 编译后输出为wxml文件
```
<template lang="pug">
  .container 这是一个测试页面
</template>
```
- 配置定义，编译后输出为json文件
```
<config>
{
  usingComponents: {
    navigation: '../components/navigation'
  }
}
</config>
```
- 脚本定义, 编译后输出为js文件，基于小程序原生api实现，支持es7以上语法
```
<script>
import api from './api'
Page({
  data:{
    text: ''
  },
  onLoad(){
    this.setData({
      text: 'foo'
    })
  }
})
</script>
```
- 样式定义，编译后输出为wxss文件，仅支持sass/scss
```
<style lang="sass">
@import './color'
page
	font-size: 16px
.container
	height: 100%
	display: flex
	flex-direction: column
	align-items: center
	justify-content: space-between
	box-sizing: border-box
</style>
```
## 基础对象扩展 API

### Date 对象扩展属性

#### 日期格式化

方法

Format(fmt:String):String

参数

- **fmt** 格式化模版 y-年 M-月 d-日 h-小时 m-分 s-秒 S-毫秒 q-季度

返回值：格式化后的 String

```
new Date().Format('yyyy-MM-dd hh:mm:ss.SSS q')
```

---

#### 日期计算器

方法

Calc(year:Number,month:Number,day:Number):Date

参数

- **year** 计算距离年数，增加为正数，减少为负数，不计算时取值 0
- **month** 计算距离月数，增加为正数，减少为负数，不计算时取值 0
- **day** 计算距离天数，增加为正数，减少为负数，不计算时取值 0

返回值：Date 计算后的日期

```
new Date().Calc(1,2,3) // 计算未来1年零2个月3天
new Date().Calc(0,0,-3) // 计算过去3天

```

---

#### Date 转 String，格式为 yyyy-MM-dd

方法

Date(year?:Number,month?:Number,day?:Number):String

参数

- **year** 计算距离年数，增加为正数，减少为负数，不计算时取值 0
- **month** 计算距离月数，增加为正数，减少为负数，不计算时取值 0
- **day** 计算距离天数，增加为正数，减少为负数，不计算时取值 0

返回值：String 计算后经格式化的日期

```
new Date().Date(1,0,0) // 返回一年后的今天，按yyyy-MM-dd格式输出
```

---

#### Date 转 String，格式为 yyyy-MM-dd hh:mm:ss

方法

DateTime(year?:Number,month?:Number,day?:Number):String

参数

- **year** 计算距离年数，增加为正数，减少为负数，不计算时取值 0
- **month** 计算距离月数，增加为正数，减少为负数，不计算时取值 0
- **day** 计算距离天数，增加为正数，减少为负数，不计算时取值 0

返回值：String 计算后经格式化的日期时间

```
new Date().DateTime(1,0,0) // 返回一年后的今天，按yyyy-MM-dd hh:mm:ss格式输出
```

---

#### Date 转 String，格式为 hh:mm:ss

方法

Time():String

参数：无

返回值：String 经格式化的时间

```
new Date().Time() // 返回当前时间，按hh:mm:ss格式输出
```

---

#### 月数计算器

方法

MonthDiff(reference:String):Number

参数

- **reference** 对比日期时间，支持 yyyy-MM-dd hh:mm:ss 格式或 yyyy-MM-dd 格式，参数为空时与当前日期时间比较

返回值: Number 相隔月数

```
// 计算2020年1月10日距离今天有多少月
new Date('2020-01-10').MonthDiff()

// 计算2020年1月10日距离2020年5月30日有多少月
new Date('2020-01-10').MonthDiff('2020-05-30')
```

---

### String 对象扩展属性

#### 等位前补零

方法

prefix(digit:Number):String

参数

- **digit** 数位

返回值：String 补零后的字符串

```
'1'.prefix(5) // 返回00001
```

---

#### 发起 Graphql 请求

方法

graphql(args:Object):Promise\<Any\>

参数

- **args** 发送 graphql 请求参数

返回值：Promise\<Any\> graphql 服务器响应的对象

```
const query = `query@users.list>>UserInput->data{page size length data{name age mobile gender area}}`
query.graphql({page:1,size:10}).then(user=>{
  // user
})
```

- graphql 查询采用 gqlx 语法，语法结构：
- [query/mutation]@[服务端解决器名称].[服务端执行方法名称]>>[输入类型]->[返回格式]

---

#### 发起微信api请求

方法

wechat(data:Object, method:String):Promise\<Any\>

参数

- **data** 发送请求对象
- **method** 发送方法，默认为：'GET'

返回值：Promise\<Any\> 服务器响应的对象
```
'orders.pay'.wechat({
  order_no: 'xxxxxxxx',
  openid: 'xxxxxxxxxxxxxx',
  total_fee: 3000
},'POST').then(res=>{
  ....
})
```
---

#### 获取服务器文件

方法

file():String

参数：无

返回值：String，服务器文件地址

```
'xxxxxxxxxx'.file()
```

---

#### 富文本转义，使富文本在小程序可以正常显示

方法

rich():String

参数：无

返回值：String，转义后的富文本，可在rich-text组件显示

```
'xxxxxxxxxx'.rich()
```
---

#### 全局变量操作

方法

global(object:Any):void

global():Any

参数

- **object** 待设置到全局的值，设置全局变量操作时需要

返回值：void | Any, 设置全局变量操作时没有返回值，获取全局变量操作时返回该变量的值

```
'userInfo'.global({name:'张三'})

console.info('userInfo'.global()) // 输出： {name:'张三'}

```
---

### Number 对象扩展属性

#### 千位分隔格式化，并保留两位小数

方法

thou():String

参数：无

返回值：String，格式化后的字符串

```
console.info(1000.thou()) // 输出：1,000.00
```
---

### Array 对象扩展属性

#### 数组分组

方法

GroupBy(c:Function):Object

参数

- **c** 分组方法，方法返回值为 String，作为分组依据

返回值：Object 分组对象

```
const goods = [
  {category:'A',name:'商品 1'},
  {category:'A',name:'商品 2'},
  {category:'A',name:'商品 3'},
  {category:'B',name:'商品 4'},
  {category:'B',name:'商品 5'},
  {category:'B',name:'商品 6'}
]
const group = goods.GroupBy(item=>item.category)

/**
  group的值为
  {
    A: [
        {category:'A',name:'商品 1'},
        {category:'A',name:'商品 2'},
        {category:'A',name:'商品 3'}
      ]
    B: [
        {category:'B',name:'商品 4'},
        {category:'B',name:'商品 5'},
        {category:'B',name:'商品 6'}
      ]
  }
*/

```