使用Taro开发微信小程序 总结

1.不能用id、标签、属性等选择器，可以使用伪类、伪元素

2.覆盖taro样式: 要在引入taro样式之前

// app.scss
// 全局覆盖taro样式
$btn-color-brand: #ff42a1;
@import '~taro-ui/dist/style/index.scss';
......
.at-button--primary {
  background: $btn-color-brand;
  border-color: $btn-color-brand;
}

之后使用按钮时它的背景颜色都会为自定义的颜色

3.导航

首先页面路径需要在app.tsx上定义

1. 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。路径后不能带参数。

Taro.switchTab({
  url: '/index'
})

2. 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

Taro.navigateTo({
  url: 'test?id=1',
})

3. 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

Taro.redirectTo({
  url: 'test?id=1'
})

前三种比较常用

4. 关闭所有页面，打开到应用内的某个页面

Taro.reLaunch({
  url: 'test?id=1'
})

5. 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

Taro.navigateBack({
  delta: 2 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
})

4.动态设置当前页面的标题

Taro.setNavigationBarTitle({
  title: '当前页面'
})