微信小程序-一段文字中的不同样式

项目中有这样一个需求：就是考试题目（单纯的一串文字）的结尾，要跟随一个带边框的题目类型，如图

这个标题，正常来讲，直接用<text>组件显示即可。但需求一变之后，就要跟随在文字末尾，而且样式还不一样。

这个时候就想到html中，可以用<span>来显示你想展示不同样式的部分

但是在小程序中，<text>组件里只能是text，不能有其他，用的<span>也是无效

于是，我把之前用<text>显示标题的组件，替换成了<view>

效果图：

微信小程序用js的数组保存颜色值是

1、首先架构一下网页的样式，既然是举例，那么就简单写入四个span用来做我们的文字存放，和之后的对比。

2、我们首先用最初的css方式来给这些文字添加样式。直接用color这个属性就可以控制文字的颜色。就可以看到生效之后的效果。

3、但是如果有很多不同的，颜色组成还可以这么写嘛，答案肯定是不行的。那么我们就用js来控制首先写一个script标签，里面定义一个数组colors，存放值也就是文字，而下标就可用来表示颜色。

4、然后我们用一个循环来将，下标和分别存放到span标签中去。然后就会将三个不同的span写入页面

微信小程序有一个标签<text>

它相当于平常开发中用到的<span>标签，是一个行内元素

不过在小程序中<text>标签不能换行写

这样写‘哈哈哈’上下会有一个间距空白，输出的结果不在同一行。

这样两个行内元素才能在同一行。

---