微信小程序 组件怎么实现获取当前url并根据url使用不同的组件样式

微信小程序中，为了根据URL动态改变组件的样式，通常不会直接通过JavaScript获取当前URL然后修改组件样式，因为小程序本身的路由机制并不是基于URL，而是依赖于`navigator` API。不过，你可以采用一些间接的方式来实现类似的功能：

1. **路径匹配**：利用微信小程序的条件渲染特性，可以设置页面的默认样式，并在对应的页面路径下覆盖这些样式。例如，创建一个全局变量来存储默认样式，当用户进入特定路径时，更新这个变量以应用特定的样式。

Page({
  data: {
    currentPath: '', // 初始为空，后续通过路径判断赋值
    defaultStyles: {} // 默认样式对象
  },
  
  onLoad: function() {
    this.setData({
      currentPath: getCurrentPath(), // 获取当前页面路径
    });
  },
  
  onReachAppHome: function() {
    // 设置首页的样式
    this.setData({
      defaultStyles: homeStyles,
    });
  },
  
  onReachOtherPage: function(path) {
    // 根据路径更新defaultStyles
    if (path === '/someSpecificPath') {
      this.setData({
        defaultStyles: specificStyles,
      });
    }
  },
  
  // 根据currentPath计算节点样式
  computeStyles(node) {
    return Object.assign({}, this.data.defaultStyles, node.pathSpecificStyles);
  },
})

其中，`getCurrentPath()`函数应该返回当前页面的路径名。每个组件可以通过`pathSpecificStyles`属性提供自己的专用样式。

2. **事件触发**：如果需要更动态的响应，可以利用`wx.navigateTo`、`wx.redirectTo`等API跳转时传递额外的信息，然后在目标页面接收并应用到组件上。

// 跳转前
PageA.prototype.onShareAppMessage = function() {
  return {
    path: '/pageB?customStyle=bold',
  };
};

// 页面B的onLoad
ComponentB.prototype.onLoad = function(options) {
  let styles = this.data.defaultStyles;
  if (options.customStyle) {
    styles.special = options.customStyle; // 添加自定义样式
  }
};

在这个例子中，`pageB`会根据`customStyle`查询字符串加载不同的样式。

记住，虽然可以这样做，但尽量保持代码结构清晰，过度的动态样式可能会导致维护困难。