wechat nav,formids and js help
npm install vktool npm install vktool --production
// app.js
import {vk,regeneratorRuntime,PubSub} from 'vktool'
App({
...vk,
PubSub:PubSub,
regeneratorRuntime:regeneratorRuntime,
onLaunch: function () {
this.config({
request:{
responseKey:'Response', //Response 则使用网络请求状态判断，其它值则使用res.StatusKey 进行判断
responseCode:200, //正常返回结果 StatusKey的值 == StatusCode 视为正常结果
responseKeyData:'content', //错误信息的key
responseKeyMsg:'msg', //错误信息的key
}
})
},
onHide(){
this.cache_clear()
}
})
``
#### 第二步 在页面中调用
``
// pages/order/list.js
const app= getApp()
const {regeneratorRuntime} = app
Page({
onLoad: async function() {
console.log(getApp());
app.cache('cache.over','默认是永久缓存');
app.cache('cache.timeout.5min',{tip:'第三参数是过期时间，单位秒，5分钟就传300'},300);
let data= await app.cache('cache.over');
console.log('data',data);
app.requst({
url:'https://www.test.com/?s=App.Reserve.SellerInfo',
data:{
seller_id:1,
seller_openid:'o9pcQ0cbjRKnRWczcOJaaSRGP1lE',
manager_id:500
}
})
}
})
``
$3
在单个 Page 中引入使用，如 /pages/order/list.js中
``
// pages/order/list.js
import {vk,regeneratorRuntime,PubSub} from 'vktool'
Page({
onLoad: async function() {
console.log(vk);
vk.cache('cache.over','默认是永久缓存');
vk.cache('cache.timeout.5min',{tip:'第三参数是过期时间，单位秒，5分钟就传300'},300);
let data= await vk.cache('cache.over');
console.log('data',data);
vk.requst({
url:'https://www.test.com/?s=App.Reserve.SellerInfo',
data:{
seller_id:1,
seller_openid:'o9pcQ0cbjRKnRWczcOJaaSRGP1lE',
manager_id:500
}
})
}
})
``
接口功能
以下函数根据引用方式，可以通过 getApp() 或 vk 进行调用
> ### date_format(ns,format='YYYY年MM月DD日')
> 将时间戳（整型10位）格式化为format中定义的格式
format 指令：
YYYY年 MM月 DD日 HH时 II分 SS秒 WEEK周几 DAY(今天/明天/日期)
示例
app.date_format(1539588251,'MM-DD HH:II') //10-15 15:24
app.date_format(1539588251,'周WEEK MM-DD HH:II') //周一 10-15 15:24
app.date_format(1539588251,'\DAY||MM-DD\ HH:II') //今天 15:24
app.date_format(1542266651,'\DAY||MM-DD\ HH:II') //11-15 15:24
\DAY||MM-DD\ 会计算是不是今天或明天，如果不是，则使用MM-DD
> ### strtotime
> 将 日期时间串 转化为时间戳（整型10位）
app.strtotime('2018-11-15 15:24:11') //1542266651
app.strtotime('2018/11/15 15:24:11') //1542266651
> ### time
> 获取当前时间戳
app.time() //1542266651
> ### toast(msg,icon='none')
> app.toast('提示信息') //wx.showToast 的封装
> ### cache(key,value,timeout=-1)
> 带有过期时间的异步存储，需要使用await then 方式；timeout单位是秒， 默认-1为永久存储
保存信息：
cache('键值','数据',600)//保存10分钟，10分钟后失效
cache('键值','数据').then(res=>{})
await cache('键值','数据')
读取信息：
1. 使用then
``
app.cache('键值').then(data=>{
console.log(data) //数据
}).catch(res=>{
//没有找到'键值'对应的数据或数据已失效
})
``
2. 使用await
``
try{
let d=await app.cache('键值');
console.log(data) //数据
}catch(e){}
``
> ### cache_clear
> 请将此函数放在 app.js onHide 中，自动清理过期缓存，防止垃圾缓存造成系统负担
> ### val(e)
> 获取 input/textarea 值，e必须是bind事件传入的event
> ### attr(e,key="")
> 获取 dom 上自定义的data-key="value" 的值，e必须是bind事件传入的event，key 就是 data-key 后面的key，key为空时，返回所有自定义的 data 的键值对数据；
> ### http_build_query(param,url='')
将 param 键值对拼接成 url 参数，如 key1=val1&key2=val2
如果传递了 url，则会拼接 url?key1=val1&key2=val2,
如果 url中已经有 ? 则自动变为 url&key1=val1&key2=val2
> ### promise(wxapi,param={})
微信 api 简单 promise 化，可以使用 then 或 await 进行处理,param 微信api所要传递的参数
如：网络请求
app.promise('wx.request',{
url:'https://www.test.com/api',
data:{p:1}
}).then(res=>{
console.log(res)
});
如：获得系统信息
let sys= await app.promise('getSystemInfo');
console.log(sys)
> ### requst(param,fouce=false)
网络请求的封装，实现了
自动缓存，缓存未失效时，直接使用缓存数据；
loading 效果，可以通过 config 自定义
全局错误处理，需要通过 config 配置
网络请求
``
app.requst({
url:'https://www.test.com/?s=App.Reserve.SellerInfo',
data:{
seller_id:1,
seller_openid:'o9pcQ0cbjRKnRWczcOJaaSRGP1lE',
manager_id:500
}
//支持 wx.requst 所有参数，以下为扩展参数
loading:true, //显示loading效果，默认不显示
cachetime:600, //缓存十分钟，默认不缓存，-1为永久缓存
}).then(res=>{
console.log(res);
})
``
> ### config(conf={})
> 配置组件，处理数据更加灵活,conf 默认参数如下
``
{
request:{
method:'POST',
dataType:'json',
header:{
'content-type': 'application/x-www-form-urlencoded',
},
hasHeaderFormids:false, //header 请求头是否携带formids,可以直接指定值作为key
hasBodyFormids:false, //请求 body 是否携带formids，可以直接指定值作为key；优先 hasHeaderFormids
responseKey:'Response', //Response 则使用网络请求状态判断，其它值则使用res.responseKey 进行判断
responseCode:200, //正常返回结果 responseKey的值 == responseCode 视为正常结果
responseKeyData:'data', //错误信息的key
responseKeyMsg:'msg', //错误信息的key
responseCodeError:400, //一般性错误 toast 提示信息，如字段必填等
responseCodeCrash:500, //严重错误，如登录超时
infoFun:(res)=>{
this.toast(res[this._config.request.responseKeyMsg])
},
errorFun:(res)=>{
this.toast(res[this._config.request.responseKeyMsg])
},
loading:(flag=true)=>{
if(flag){
wx.showLoading({
title: 'loading',
mask:true
})
}else{
wx.hideLoading()
}
}
}
}
``
> 需要自定义的重写掉就行，其它字段会使用默认值，如：
``
this.config({
request:{
responseKey:'Response',
responseCode:200,
responseKeyData:'content', //错误信息的key
responseKeyMsg:'msg', //错误信息的key
}
})
``
> ### 网络请求 增强版
直接使用 app.requst 要写一个标准的 url，多个页面调用一个接口无法复用请求，
接口很多时不方便管理，接口变更更是麻烦的修改；
所以这个增强版是在 app.requst 基础上做个一次封装，可以对接口进行配置及统一管理
需要按以下流程实现：
#### 1）根目录创建 request 目录，创建2个文件
``
1. /request/uri.js
/////////////////////////////
// 封装 uri
/////////////////////////////
export default {
//__开始为私有属性，不会暴露给getApp
'__HOST':'http://api.qingyunke.com/',
//示例，JS接口名，和服务端接口名称保持一致
'ApiOneTwo':{
method:'GET', //支持 wx.requst 的所有参数，在这里都可以重新制定，否则使用app.config()配置的参数；
alias:'api.php', //真实接口地址,外面的key和接口名不一致时可以增加这个；或者服务端改了接口名称，只需要在这里写一个alias即可
loading:true, //loading效果 ，默认不带loading; 为 true 时带loading
cachetime:5, //缓存 0无,-1永久,单位秒，一天86400秒; 默认 0 不缓存
host:'' //默认空,使用HOST，可填写为其它host
},
//全部使用默认参数
'AppReserveSmsBuy':null,
}
2. /request/index.js
/////////////////////////////
// 封装 uri 与 request
/////////////////////////////
import uri from './uri'
import {request} from 'vktool'
export default request(uri)
``
#### 2）入口 app.js 引入 本地 request 包
``
// app.js
import {vk,regeneratorRuntime,PubSub} from 'vktool'
import request from 'request/index'
App({
...vk,
...request,
PubSub:PubSub,
regeneratorRuntime:regeneratorRuntime,
onLaunch: function () {
this.config({
request:{
responseKey:'Response', //Response 则使用网络请求状态判断，其它值则使用res.StatusKey 进行判断
responseCode:200, //正常返回结果 StatusKey的值 == StatusCode 视为正常结果
responseKeyData:'content', //错误信息的key
responseKeyMsg:'msg', //错误信息的key
}
})
},
onHide(){
this.cache_clear()
}
})
``
#### 3）在页面中使用
``
// uri 中定义的接口全部暴露给了app;
// 可以通过 console.log(app) 看到所有接口
// uri 接口的key中 (./) 都被替换为空了
app.ApiOneTwo({key:'free',
appid:0,
msg:this.data.form.keyword
}).then(res=>{
this.setData({
msg:res.content.replace(/\{br\}/g,"\n"),
isCache:res.isCache==true
})
});
``
> ### wx.cloud.callFunction
> 要实现云函数缓存，必须是使用上面的 网络请求 增强版
在 /request/uri.js 文件中增加云函数的配置
1. alias:'wx.cloud.callFunction' 必须
2. apiName 云函数名称 必须
``
export default {
//__开始为私有属性，不会暴露给getApp
'__HOST':'http://api.qingyunke.com/',
//示例，JS接口名，和服务端接口名称保持一致
'ApiOneTwo':{
method:'GET', //支持 wx.requst 的所有参数，在这里都可以重新制定，否则使用app.config()配置的参数；
alias:'api.php', //真实接口地址,外面的key和接口名不一致时可以增加这个；或者服务端改了接口名称，只需要在这里写一个alias即可
loading:true, //loading效果 ，默认不带loading; 为 true 时带loading
cachetime:5, //缓存 0无,-1永久,单位秒，一天86400秒; 默认 0 不缓存
host:'' //默认空,使用HOST，可填写为其它host
},
//全部使用默认参数
'AppReserveSmsBuy':null,
//云函数
'AppCloudAdd':{
alias:'wx.cloud.callFunction', //必须
apiName:'add', //必须
loading:true, //loading效果 ，
cachetime:5, //缓存 0无
},
}
``
>### request 请求，强制请求 及 删除缓存
只有在 uri 的接口定义了cachetime，才需要考虑缓存问题；
1.有时我们需要“强制请求”以获得最新数据；如特定页面需要最新数据
``
//接口中第二参数为 true 时，强制使用网络请求最新数据
app.AppCloudAdd({x:1,y:2},true).then();
``
2.有时我们需要“删除缓存”，下次请求会获取新的数据；如：修改某些数据后可以“删除缓存”
``
//接口中第二参数为 clear或clean 时，会清理掉此接口缓存；
//注意第一参数必须一样才能清除
app.AppCloudAdd({x:1,y:2},'clear');
``
组件库
在 Page json中引入组件,用那个就引用那个
``
"usingComponents": {
"line": "/miniprogram_npm/vktool/line",
"nav": "/miniprogram_npm/vktool/nav",
"formids": "/miniprogram_npm/vktool/formids"
}
``
> ### line
> 分割线
``
分割线
``
!链接
> ### nav
``
//app.json 请将 navigationStyle 改为 custom
"window": {
"navigationStyle": "custom"
}
``
然后在页面上添加
``
bindhome="goHome"
backgroundColor="#ff0"
color="#f00">VKTOOL NAV
``
!链接
> ### formids
> 为了收集 formid，此组件在点击时会保存 formid 到本地缓存，key为formids
``
绑定事件方式跳到 view 页面
navigate view 页面
redirect view 页面
```