Taro/微信小程序笔记

Taro/微信小程序学习笔记持续更新中

一：快捷命令

1，快捷创建页面——Taro create --name 页面名称
2，运行到h5页面预览———Taro build --type h5 --watch
3，本地代码已提交，后又修改了一些文件，想回到提交时的代码——git checkout .

二：注意事项

1，导航使用navigateTo的时候，只支持五层。
2，导入 Taro-ui 用cnpm，不然容易报错。
3，图片命名数字会显示不出来。
4，if else 写法需要注意，可以先定义一个组件为null,根据if else 设置该属性值，最后返回该组件
5，原生小程序开发中，在使用scroll-view的时候有些坑，比如下拉加载，在不必要的情况下，不要下拉加载，你会发现滑动页面的时候一触碰到顶部，就会刷新，刷新就会闪到顶部，很烦恼，官方文档写的距顶部的距离，设置完也没有效果。
6，原生小程序开发中，组件中是不可以在全局样式使用id去设置样式，无效。

三：知识点

1，文字最多几行，超过隐藏显示...，应用普通的样式会由于Taro编译而过滤掉。
解决方法：使用行内样式：

<Text className="item_title" style={{
                            display: '-webkit-box',
                            overflow: 'hidden',
                            '-webkit-line-clamp': 2,
                            '-webkit-box-orient': 'vertical',
                        }}>{item.title}</Text>

2，取消ScrollView的滚动条

// 上面的模拟器有效，但ios会失效，再添加下面代码对IOS有效
::-webkit-scrollbar {
      width: 0;
      height: 0;
      color: transparent;
 }
::-webkit-scrollbar {
      display: none;
}

3，阴影效果

box-shadow: 0px 0px 50px 10px #DDDDDD;

语法：box-shadow: h-shadow v-shadow blur spread color inset;
前四个按照位置来决定值各自代表的含义。后两个就可以直接写，因为太过明显，浏览器可以识别。
h-shadow：必需。水平阴影的位置。允许负值。
v-shadow：必需。垂直阴影的位置。允许负值。
blur：可选。模糊距离。
spread：可选。阴影的尺寸。
color：可选。阴影的颜色。
inset：可选。将外部阴影 (outset) 改为内部阴影。默认的是外部阴影。所以如果是outset那么就可以直接省略。如果是内阴影再写上inset.
4，动态显示头部标题

config = {
    navigationBarTitleText: "视频详情"
  };

更换为

componentWillMount() {
    const { name } = this.$router.params;
    Taro.setNavigationBarTitle({
      title: name
    });
  }

最后编辑于：2023.07.03 09:41:40