Not Providing Milkshakes

    @tool-developer/wx-app

    0.0.6-canary.6 • Public • Published

    @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中配置。

    具体可参考TabBarListPageNamePathKV

    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)

    滚动到元素位置

    Install

    npm i @tool-developer/wx-app

    DownloadsWeekly Downloads

    10

    Version

    0.0.6-canary.6

    License

    MIT

    Unpacked Size

    47.8 kB

    Total Files

    21

    Last publish

    Collaborators

    • tooldeveloper