微信小程序分享9：text文本，progress进度条

1，text

不知不觉已经第9课了！

还是新建一个quick start项目，将index.wxml修改为：

text这个组件是唯一的可以长按选中的文本，除此之外，别无用处。

index.js:

每单击一次添加按钮，就向extraLine数组中推送(push)一条新元素，并使用join方法将这些元素拼接成字符串并以\n间隔。

如果存在某一类元素，就加个间隔符并循环拼接这个元素，在编程中这个场景非常见，先循环拼接再移除最后的间隔符是一种实现技巧，而这种先推入一个数组，再使用数组的join方法拼接元素也是一种技巧，并且显得更加优雅！几乎如今所有流行的高级语言都实现了集合的join方法，该技巧基本在所有语言中通吃。

\n代表换行。而\'代表'，因为'是保留字符，用在字符串必须转义。text的内容支持转义符，但不支持html标签。

运行：

练习：给按钮添加不同的类型，并添加一个warn为type的button，并清空所有新增的文本行。

2，progress进度条

在index.wxml中添加：

进度条组件progress有五个属性：

• percent是百分红，指示完成度
• show-info是否显示右侧的百分数字，有无值不重要，show-info="true"是同等效果
• stroke-width代表线条的宽度
• color，颜色
• active，为true，表示有出场动画，但如果你动态设定一个值，它还是从头开始动画，是相当的傻

index.js新增：

运行一下，单击按钮，可以看到动画会从头开始。

练习：那么如果我不想从头开始，想从当前位置开始，在目前情况下怎么实现？

可以借鉴Flash动画设计中的延时动画设计的方法，给动画一个目标值，然后在时间的循环中向目标值递进，这样的处理方法，还可以衍生出很多动画效果。

在onLoad中，使用全局js函数setInterval创建一个时间步进函数，每隔20毫秒执行一次，每执行一次，通过setData方法将percent1加1。文档中说，setInterval的第二个参数是毫秒，但人的眼睛其实对20毫秒是没感觉的，最小极限是200毫秒。但如果你把20改成200，显然动画看起来非常的艮。

所有好的动画，都是一点一点修改出来的。没有谁可以随随便便就做出爆品。所有程序员的经验，也都是一行一行敲出来的，没有实践就没有提高。