小程序跳转和获取事件参数的“简便方法”

橘子在冬季
943 阅读3分钟

十分感谢您能看到这篇文章。我是一名北漂的东北码农，一直从事于小程序和vue的开发，但至今还是一个"前端小彩笔"。一直想写些东西分享一下自己开发中的骚操作和踩过的坑，但是碍于自己的写作水平和技术水平有限，不太敢献丑。哈哈哈，终于再喝了几瓶老雪之后鼓足了勇气来开写，希望能帮助到您，同时有写的不对的地方，也希望您能指正，感谢感谢。

那言归正传，今天想和大家分享的是关于小程序跳转和获取事件参数的"简便方法"！！！

小程序跳转

小程序的跳转方式有这么几种：

wx.switchTab  跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch   关闭所有页面，打开到应用内的某个页面
wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateBack 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
wx.navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo可以说是开发中最常用的API了，我们今天就说一说关于它的"简便方法"。 首先看一下它的基本使用

const url = '/pages/detail/index'
wx.navigateTo({
  url
})

给路由上加参数

const url = '/pages/detail/index?id=111&from=xxx'
wx.navigateTo({
  url
})

这个时候问题就来了: 如果路由上的参数有很多的话，那么拼接url就会很麻烦，如果业务复杂的话，那么项目中需要用到的地方就会很多。所以怎么能将它简化呢，这个时候有没有想到vue路由跳转的方式？

this.$router.push('/pages/detail/index', {
    id: 111,
    from: xxx
})

这样以对象的形式传参更加简单，而且其他同事看你代码时更加清晰明了。那么我们自己来实现一个小程序版的vue路由的push方法。

先说一下实现思路： 1.push方法会接受两个参数：url路径、参数对象 2.将参数对象拼接到url上路径上。

const utils = {
    push(path, params) {
        let paramStr = "";
        // 判断是否传递了参数对象
        if (params) {
          // param方法 处理参数对象拼接成字符串
          paramStr = param(params);
        }
    
        // 这里分两种情况
        // 路径上带有参数'/pages/detail/index?id=111'直接将处理好的参数拼接到路径上
        // 路径上没有参数'/pages/detail/index'在路径后先加'?'后再拼接参数
        path = path.includes("?") ? path + "&" + paramStr : path + "?" + paramStr;
    
        wx.navigateTo({
          url: path
        });
    }
}
export default utils

接下来看一下处理参数对象的param方法

const param = params => {
  let str = "";
  for (let k in params) {
    str += `&${k}=${params[k]}`;
  }
  return str ? str.substring(1) : str;
};

这样你小程序版的push方法就实现了，让我们用一下它吧。

// wxml文件
<button catch:tap="onClick">跳转</button>

// js文件
import utils from 'xxxx/utils.js'
Page({
    onClick() {
        const path = '/pages/detail/index'
        utils.push(path, {
            id: 111,
            from: 'xxx'
        })
    }
})

到这push方法就实现好了，是不是这样封装一下比原生的方式更好用呢。

获取事件对象中的参数

想一想开发是不是这种场景很常见：有一个商品列表，点击其中的某一项就会跳到该商品的详情页中，代码实现起来也很简单获取到点击项的id就好了。

在小程序中点击想要获取某一项的id需要在view上面加data-id的属性：

然后触发点击事件获取的事件对象是这样：

那么你想要获取id这个属性值就需要这样操作来获取，这样操作明显就很麻烦，再说这么长的单词你记得也费劲，就算记住来那敲的时候也可能敲错了。

const id = e.currentTarget.dataset.id

所以咱们直接写个工具方法来简化每次获取参数的重复且复杂且容易出错的方式

const utils = {
    getE(e) {
        return e.currentTarget.dataset;
    }
}

export default utils;

使用的时候就可以这样

const id = utils.getE(e).id

当你需要获取多个参数的时候还可以结构返回的对象，这样是不是非常简便

const { id, from } = utils.getE(e)

到此文章就结束了，希望我写的东西能帮助到您，能提升您的开发效率。

avatar
文章
阅读
粉丝