@kway/mp v0.0.1
@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.00Array 对象扩展属性
数组分组
方法
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'}
]
}
*/3 years ago