自定义头部来着

@jd_69e8df35d0944 提个 issue吧

使用Taro框架编译成小程序发现多行省略不生效。。。

多行文本省略：

.textHide {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;    
  text-overflow: ellipsis;
  overflow: hidden;
}

经过Taro编辑后小程序端少了 -webkit-box-orient: vertical;这条样式属性

应该是样式css被编译后某些样式会被过滤掉

解决方法

方法1：

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

方法2：

/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

方法3：

<View 
    style={{
        display: '-webkit-box',
        '-webkit-box-orient': 'vertical',
        '-webkit-line-clamp': 2,
        'text-overflow': 'ellipsis',
        overflow: 'hidden',
        'line-height': 2
    }}
>

    这是要省略的内容这是要省略的内容这是要省略的内容
</View>

方法1和方法2是加入css注释强制声明忽略下一行，防止被编辑过滤

方法3是直接写成行内样式

转载自：_Jester 的《Taro多行文本省略不生效》 https://blog.csdn.net/qq_41049816/article/details/107021134

@liujp5 原来你用了taro-ui 那你只能在你需要的地方写line-height了

前言

9 月 19 日凌晨，Vue3 在经过多个开发版本的迭代后，终于迎来了它的正式版本，"One Piece" 的代号也昭示了其开拓伟大航路的野心。

Vue3 的新特性主要有 Composition API、Teleport、Fragments 和 <script setup /> & <style vars /> 等。我们是否也可以在小程序开发中使用这些特性呢？在 Taro 的文档里我们找到了关于 Vue3 的章节，事不宜迟，让我们开始尝试吧。

Vue3 部分新特性

还没了解过 Vue3 的同学也别急，先了解下 Vue3 的新特性吧：

1.Composition API

Vue2.X 基于 Option API（选项 API）构建组件，一般来说组件拥有 data、methods、computed 等选项。这是一种属性相互隔离的模式，好处是各属性内容分离开，对于新手来说比较友好；但对于大型项目来说，为了修改某个功能，可能需要在一个文件中来回翻页。Vue3 增加了 Composition API 方式（组合 API ），基于 reactivity（响应式）的思想进行组件构建，将逻辑封装到函数中，可以实现类似 ReactHooks 的逻辑组合和重用。对于大型项目，代码按照具体功能划分，而不是分散在不同的生命周期中，逻辑更加一目了然。

2.Teleport（传入）

Teleport 功能，使得我们可以将全屏的组件（例如 Toast）移到 Vue APP 节点外，而不需要在 UI 界面上修改其他组件样式，方便实现全屏蒙层、浮层弹窗等效果。

3.Fragments（碎片）

Vue2.x 版本中，<template /> 标签下不支持放置多个组件，这个限制在 Vue3 中不再存在。这点比较好理解，下述组件设计在 Vue3 中是没有问题的：

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

4.实验性质的语法糖 <script setup>、<style vars>

a.<script setup>:用于在 SFC 中使用 Composition API 的语法糖，改善在单个文件组件中使用 Composition API 时的体验。

b.<style vars>: SFC 中状态驱动的 CSS 变量，它提供了直接的 CSS 配置和封装，支持将组件状态驱动的 CSS 变量注入到“单个文件组件”样式中。

除了以上 4 点之外，Vue3 还提供了自定义渲染，详细可以参考文末的推荐阅读文章。

如何在 Taro 里使用 Vue3

Vue3 带来的新特性可以让我们更加优雅和高效地进行开发，现在，来开启我们在 Taro 里使用 Vue3 的体验之旅吧。

Taro 已经默认安装 Taro3 ，所以正常安装即可：

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

安装完成之后，使用taro --version查看一下是否安装成功，如果输出版本号说明安装成功。
安装成功后，初始化一个项目

$ taro init

将出现如下图的一些选型

如上图：

1. 请输入项目名称？输入项目名称vuedemo
2. 请输入项目介绍？输入项目介绍a demo project
3. 请选择框架？当然是Vue3啦
4. 余下选项，如上面 3 个选项，根据自己的需要选择就好，不会有什么问题

一般情况下，依照提示选型好以后， Taro 会自动安装依赖。如果由于网络问题导致安装不成功，就需要手动在项目路径下进行安装。

# 使用 yarn 安装依赖
$ yarn
# OR 使用 cnpm 安装依赖
$ cnpm install
# OR 使用 npm 安装依赖
$ npm install

安装后目录结构：

app默认代码如下，我们注意到，Taro3 在新建 Vue3 项目时已经修改了入口组件写法。

import { createApp } from 'vue'
import './app.scss'
const App = createApp({
  onShow (options) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})
export default App

page/index目录下index文件示例如下：

<template>
  <view class="index">
    <text>{{ msg }}</text>
  </view>
</template>
<script>
import { ref } from 'vue'
import './index.scss'
export default {
  setup () {
    const msg = ref('Hello world')
    return {
      msg
    }
  }
}
</script>

编译运行微信小程序

npm run dev:weapp

编译后，打开微信开发者工具导入编译后的dist目录，首页内容和编译成 H5 的表现都如下图：

验证 Taro3 对 Vue3 的支持度

Composition API

写个比较简单的 todolist 计数组件，假设目前已有 4 项代办事项，点击后将新增一项。这里会使用到 Composition API 思路，以及 computed 计算属性。

在用户点击时，第二行“当前操作新增”会根据点击次数递增，总计条数会在 4 的基础上累加。

<template>
  <button @tap="increment">
    增加 1
  </button>
  <view>当前todolist事项已有：{{ existCount }}条；</view>
  <view>当前操作已新增：{{ count }} ，共有{{ total }}条。</view>
</template>
<script>
import { ref, computed, onMounted, toRefs, watch } from 'vue'
export default {
  name: 'case1',
  setup(props) {
    // ref响应式变量
    const count = ref(0)
    const existCount = ref(4)
    // computed方法，在count的value发生改变时，会触发计算total
    const total = computed(() => count.value + existCount.value )
    function increment() {
      count.value++
    }

    onMounted(() => console.log('component mounted!'))

    return {
      // 返回increment方法，existCount、count、total属性，供模板中调用
      increment,
      existCount,
      count,
      total,
    }
  }
}
</script>

页面表现如下所示，可见对于 Composition API 的支持的还是不错的。

Teleport

写个初次登录用户的欢迎弹窗。用户名从index.vue传入。首页代码如下：

<template>
  <view class="index">
    <Toast :user = username />
    <view id="teleportToast"></view>
  </view>
</template>

在 Toast.vue 中，我们会写个属性 to 为 teleportToast 的 Teleport 组件，代码如下：

<template>
  <button @tap="showToast" class="btn">打开弹窗</button>
  <!-- to和index.html中的view id一致 -->
  <teleport to="#teleportToast">
    <view v-if="toastFlag" class="toast__wrap"  @tap="hideToast">
      <view class="h2">弹窗标题：</view>
      <view class="toast__wrap--msg">欢迎{{ user }}，点击关闭</view>
    </view>
  </teleport>
</template>
<script>
import { ref,toRefs } from 'vue';
export default {
  props:{
    user: {type: String}
  },
  setup(props) {
    // 获取用户名
    const { user } = toRefs(props)
    // Toast：显示flag
    const toastFlag = ref(false)
    let timer
    const showToast = ()=>{
      toastFlag.value = true
    }
    const hideToast = ()=>{
      toastFlag.value = false
    }
    return {
      user,
      toastFlag,
      showToast,
      hideToast,
    }
  }
}
</script>
<style lang="scss">
.toast__wrap{
  position: fixed;
  width:100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  top: 0;
  left: 0;
  z-index: 101;
  color: #fff;
  .h2{
    margin: 20px;
  }
  &--msg{
    text-align: center;
  }
}
</style>

在 H5 下是正常显示的，弹窗展示以及关闭功能效果如下；在小程序上却报错了，Taro 团队还需要加把劲：

Fragments

Fragments 特性已经在上面的例子中得到验证，使用没有问题。

script setup 语法糖

我们尝试一下<script setup>，组件里的代码如下：

<template>
  <view>
    <view>count:{{ count }},msg:{{ info }}</view>
    <button @tap="incAndChangeInfo">
      增加 1修改msg
    </button>
  </view>
</template>
<script setup=" props ">
  import { ref, toRefs } from 'vue'
  export default{
    props: {
      msg: String,
    },
  }
  export const count = ref(0)
  export const info = ref(props.msg)
  export const incAndChangeInfo = () => {
    count.value++
    info.value = "change hello" + count.value
  }
</script>

上述script标签里的代码效果等同于下面：

<script>
import { ref, toRefs } from 'vue'
export default {
  props: {
    msg: String,
    },
  setup(props) {
  const count = ref(0)
  const info = ref(props.msg)
  const incAndChangeInfo = () => {
    count.value++
    info.value = "change hello" + count.value
    }
  return {
    count,
    info,
    incAndChangeInfo,
    }
  }
}
</script>

调用它的代码传入 mgs 如下：

<Setup msg="hello"/>

运行后，小程序和 H5 都是支持的，页面整体表现如下：

可以看到，运用新特性进行开发，代码书写更加便捷，逻辑更清晰。

style vars 语法糖

<style vars>，组件里的代码如下：

<template>
  <view class="text">文字颜色为{{ color }},点击后变为红色</view>
</template>
<script>
import { ref,toRefs } from 'vue'
export default {
  props:{
    color: {type: String}
  },
   data(props) {
    return {
      color: ref(props) //'red'
    }
  },
  setup(props){
    const { color } = toRefs(props)
    return {
      color,
    }
  }
}
</script>
<style vars="{ color }">
.text {
  color: var(--color);
}
</style>

调用它的页面里的代码如下：

<template>
  <view class="index">
    <Styledemo :color = color @tap="changeColor"/>
  </view>
</template>
<script>
import { ref, computed, onMounted, toRefs, watch } from 'vue'
import Styledemo from "@/floors/styledemo"
export default {
  components:{
    Styledemo
  },
  setup () {
    const color = ref('blue')
    const changeColor = ()=>{
      color.value = 'red'
    }
    return {
      changeColor,
      color
    }
  }
}
</script>

小程序和 H5 都没有问题，功能效果如下：

结语

我们将上述几个 Demo 整合在一个项目中，放在Github上，有兴趣的同学可以看看。在线预览地址在这里。

经过验证，Taro3 支持使用最新的 Vue3 开发多端应用，相比之下 H5 的支持度更好一些。

值得一提的是，Taro 团队在技术上一直保持进取，在 Taro2.0 版本支持了 ReactHooks；根据Taro RFCS，早在2020-06-03也已经打算支持 Vue3 了。截至目前，Taro 对 Vue3 的支持在小程序端的稍有补足，希望 Taro 团队可以早日补足这个短板。

推荐文章：

• Vue3 和 React Hooks 对比
• SWR
• 自定义渲染器的应用

参考文章：

• [1]compsition api
• [2]teleport
• [3]taro3安装及使用

@hljugyb 好奇你的场景。其实页面show的时候多半是别人切换页面的时候，这个时候只需要更新一下数据，然后组件就更新了吧。

@liujp5 1、对的，目的是为了rem，可以根据自己灵活设置咯。2.样式你可以直接覆盖的个，H5 重置还是比较容易的；3. 对的，同 2 ，你可以重置的。H5还是比较灵活的。

作者：凹凸曼-冥冥

小程序的简化版 css-modules，比标准 css-modules 代码量更少的优化方案

介绍

css-modules 是一种 css 模块化方案，它在构建过程中生成一个原类名与新类名的 map，根据 map 引用样式，通过设定 hash 规则，实现了对 CSS 类名作用域的限定，它通常用来解决页面类名冲突的问题。由于微信小程序内组件样式默认隔离，为什么要使用 css-modules 呢？

有以下 2 个原因：

• hash 化后可以实现更短的命名，减少代码包体积
• 跨端项目需要兼顾非小程序环境，避免样式冲突

weapp-css-modules 做了哪些事？

• 新类名单字母编排，减少代码量
• 移除类名映射 map，替换 js 和 wxml 中变量为编译后类名

标准 css-modules 方案：

import style from './index.wxss'
<view class="{{style.banner}}"></view>
.index_banner_xkpkl { xx }
module.exports ={'banner' : 'index_banner_xkpkl'} // 额外生成的 map 文件

weapp-css-modules 编译后效果：

let style = {}
<view class="a"></view>
.a { xx }

安装

目前只开发了适用于使用 gulp 编译小程序的 gulp 插件，后续计划开发 webpack 可用的插件实现相同功能

npm i gulp-weapp-css-modules gulp-sort

// gulpfile.js
const { weappCssModule, wcmSortFn } = require('gulp-weapp-css-modules')
const sort = require('gulp-sort');

gulp.task('css-module', () => {
    return gulp.src('./src/**/*')
        .pipe(sort(wcmSortFn))      // 由于处理文件有顺序依赖，需要先对文件排序
        .pipe(weappCssModule())
        .pipe(gulp.dest('./dist'))
})

使用

小程序页面不具备隔离功能，因此只有具备样式隔离的 Component 可以改造使用 weapp-css-modules

1、css 文件改名字: weapp-css-modules 通过 css 文件是否带 module 来识别需要替换的内容

index.wxss -> index.module.wxss

// 或者使用 scss/其他

index.scss -> index.module.scss

2、js 内新增样式文件的引入，目的是建立 css-modules 的样式与 js 关系

import styles from './index.module.wxss

data:{
   ...,
   styles:styles
}

3、修改 js 内类名的地方替换为 styles 的间接引入

query.select('.banner')
.boundingClientRect()
.exec(function (res) {...})

// 改为
query.select('.' + styles['banner'])
.boundingClientRect()
.exec(function (res) {...})

4、修改 wxml 内类名的使用

4.1. 普通类名

<view class="banner"></view>
// 改为
<view class="{{styles.banner}}"></view>
// 或者
<view class="{{styles['banner']}}"></view>

4.2. 三目运算符

<view class="banner__dot {{ 'banner__dot--' + (index == swiperCurrent ? 'cur' : '')}"></view>

// 改为
<view class="{{styles['banner__dot'] + ' ' + (index == swiperCurrent ? styles['banner__dot--cur'] : '')}}"></view>
// 或者
<view class="{{`${style['banner__dot']} ${index == swiperCurrent ? style['banner__dot--cur'] : ''}`}}"></view>

这里需要注意几种有问题的写法：

4.2.1. 类名间未加空格

<view class="{{styles['banner__dot'] + (index == swiperCurrent ? styles['banner__dot--cur'] : '')}}"></view>

4.2.2. 三目表达式未加括号，运算优先级不明

<view class="{{styles['banner__dot'] + ' ' + index == swiperCurrent ? styles['banner__dot--cur'] : ''}}"></view>

4.2.3. styles 的属性需要是具体的字符串，不能使用变量表达式(这是 weapp-css-modules 需要单独关注的地方，因为编译阶段会对 styles.xx 进行求值，所以不能把表达式写在属性位置)

<view class="{{styles['banner__dot'] + ' ' + styles[index == swiperCurrent ? 'banner__dot--cur': '']}}"></view>

5、构建过程中关注脚本的红色提示，类似于这种：

这是由于在 js/wxml 内使用了一个banner__swiper_2,而 css 内并没有定义banner__swiper_2，css-module 编译的 map 文件是根据 css 内的样式定义来生成 key 名的，因此styles['banner__swiper_2']是undefined, 针对这种情况有两种处理方式：

5.1. 如果 js 内需要通过这个类名选择到某个元素，但是 css 内不需要编写样式，那么可以将它视为不需要编译的类名，即：

query.selector('.banner__swiper_2') // 不改成 styles.xx 的写法
<view class="banner__swiper_2"></view> // 相应的元素也不索引到 styles
// 这样实现了一个组件内不会被编译的样式

5.2. 如果 js 内无引用，那么删掉 wxml 内该类名的定义吧～

6、构建完进行检查，关注样式和交互是否正常

参考示例

• gulp 项目：路径 /demo/gulp-project-demo

联系反馈

• 欢迎通过邮箱来跟我联系: smile123ing@163.com
• 欢迎通过 GitHub issue 提交 BUG、以及其他问题
• 欢迎给该项目点个赞 ️ star on GitHub ! 点击文末「阅读原文」直达，送出 Star

看看这个可以帮到你的不？ https://reactjs.org/warnings/invalid-hook-call-warning.html

@jd_7fdd878ac0972 来个demo看看的咯