@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 = `[email protected]>>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'}
      ]
  }
*/