@tool-developer/wx-app
在微信原生方法上进行扩展
用法
安装
npm install --save @tool-developer/wx-app
or
yarn add @tool-developer/wx-app
引入
app.js
import wxapp from '@tool-developer/wx-app'
//
const options = wxapp.extend(wxapp,{
App:wxapp,// 方便子页面直接通过app.App获取扩展方法
})
//
App(options);
pages/main.js
const app = getApp();
const page = app.extend(app.App,{
// ...
});
//
Page(page);
扩展说明
通过拷贝方式进行扩展，扩展后的属性和方法，可以直接通过this访问。
version
扩展库版本
events
自定义事件，配合bindEvent使用
首先，通过bindEvent在*.wxml文件中具体的事件关联，通过data-event,data-id,id进行事件区分。 main.wxml
<view bindtap="bindEvent" data-eventid="click">点击<view>
然后，在*.js中通过events关联真是的事件处理。 main.js
{
events:{
'tap #click':'toClick'
},
toClick(e){
// 真是点击事件处理
}
}
data
微信数据扩展
i18n
多国语提示文字扩展，内部通过i18nHandle转换处理
i18n:{
'authorize.title':'授权提示',
'authorize.content':'{authorize.appName}需要您授权{authorize.scopeName}，点击确定前去设置',
'authorize.loading':'正在授权...',
'authorize.cancel':'取消授权',
'authorize.success':'已授权'
}
TabBarList
当钱tabBar list配置pagePath数组，
this.go处理流程中会自动识别跳转path是否在该配置中，采取不一致的处理。
wxapp.TabBarList = [
'pages/index/index',
'pages/mine/index'
];
PageNamePathKV
页面名字路径映射，方便直接通过name对应路径。
wxapp.PageNamePathKV = {
'webview':'pages/webview/index'
}
配置之后，可以直接通过name调用。
this.go('webview')
页面跳转
qs(path,query,encode)
qs(query,encode)
路径path,参数query处理，小程序query要求是字符串，而非对象
pageTo(url,type,cb)
针对'navigateTo', 'switchTab', 'redirectTo', 'reLaunch'方法，提供一致的处理。
除了pageTo方法，switchTab提供同名switchTo，reLaunch提供同名reLaunchTo方法。
| type | 说明 |
|---|---|
| navigate | 对应navigateTo |
| switch | 对应switchTab |
| redirect | 对应redirectTo |
| reLaunch | 对应reLaunch |
go(page,query,type,cb)
页面跳转流程处理
内部处理了path跳转的方式(type+tabBar list)
内部还处理了query参数传递过程中的编码，以及路径转换
内部还支持webview跳转处理，直接传递http打头的path，会进入webview，默认webview路径是:pages/webview/index，如果有调整，可在PageNamePathKV中配置。
具体可参考TabBarList和PageNamePathKV。
back(delta)
返回，调用wx.navigateBack。
多语言处理
i18nHandle(str,data)
支持动态数据替换处理，动态字段通过{}进行包裹。
i18n:{
'authorize.title':'授权提示',
'authorize.content':'{authorize.appName}需要您授权{authorize.scopeName}，点击确定前去设置',
}
i18nHandle('authorize.content',{
appName,
scopeName
})
数据处理相关
dataset(key,e)
通过dataset方便获取绑定的data-*数据。
// tap event
// e
//
const name = this.dataset('name',e);
$set(data,callback)
延时setData方法，内部默认有延时100，可以通过SET_DATA_FREQUENCY修改。
app.js/main.js
{
SET_DATA_FREQUENCY:200
}
事件相关
bindEvent
默认将bindEvent绑定到*.xwml文件中的对象标签上，通过标签的data-eventid,data-id,id，以及事件type进行区分。
内部会进行真实事件调用处理，具体见events。
bindEvents
内部还提供了一个bindEvents，如果配置有该方法，所有的事件调用，都会先调用该方法。
bindTelEvent
拨打电话处理，电话号码通过data-tel传入，不传入号码，或者通过data-not-allowed可控制是否允许拨打电话。
如果有配置，不允许拨打电话时，会调用bindTelNotAllow方法。
如果有配置，允许拨打电话，会调用bindTelEventCallback方法(拨打之前调用，不是拨打成功之后回调)。
微信设置相关
getWxSetting(callback)
内部调用wx.getSetting方法，通过callback(null,setting)返回
this.getWxSetting((err,setting)=>{
//
})
authorize(options, callback)
微信setting授权调用处理,参考wx.authorize
内部首先会调用是否授权处理，然后发起授权流程
this.authorize({
scope,
scopeName,
appName
})
scope参考scope列表
可以使用其中的描述，作为scopeName，appName为当前应用名。
getWxUserInfoAuthorize(callback)
用户是否授权登录
this.getWxUserInfoAuthorize((err,isAuth)=>{
// true,已授权
})
提示相关
hideLoading()
隐藏loading提示
showLoading(options,mask)
显示loading提示
showToast(options, icon, duration)
toast提示处理
可以通过i18n处理error提示图标
i18n:{
'toast.icon.error':'./assets/images/error.png'
}
this.showToast('提示内容')
this.showToast('提示内容','success')
this.showToast({
title:"提示内容"
})
this.showToast({
title:"提示内容",
icon:"success"
})
this.showToast({
title:"提示内容",
image:"./assets/images/success.png"
})
hideToast()
showModal(options, title)
modal弹框提示，内部做了约束处理，一次只能出现一个modal弹框。
this.showModal({
content,
title,
complete,
fail
})
使用参考：wx.showModal
其他扩展
getWxCurrentOptions()
获取当前页面options
getWxCurrentPage()
获取当前页面路由地址
scrollToEl(el,duration)
滚动到元素位置