微信小程序第二周基础内容

2020-03-17 本文已影响0人帅气的削皮刀

一、基础内容

本部分内容为自习内容，包含icon(图标)、progress（进度条）、rich-text(富文本)、text（文本）四个部分

1.icon图标

1.1解释：比如最常见的，在我们使用微信支付时，支付成功就会跳转这样的页面，上面的那个就是我们今天要说的图标，在我们小程序里使用像这样的图标，是不需要再去另外找这样图标的，官方的文档上就已经帮我们定义好了这些图标，我们就直接引用就ok了

微信截图_20200317120609.png

1.2 实验：我们在js文件里可以直接在数据部分添加这样的字段

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ]
  }
})

注释：（1）iconSize是设置这图标的大小；
（2）iconType是设置图标的样式，包括了success（成功）、success_no_circle（成功无圆形边框）、info(提示)、warm（警告）、waiting（等待）、cancel（取消）、download（下载）search（搜索）、clear（清除）；
（3）iconColor是设置图标的颜色，支持颜色的名称以及rgb

图标
注释：wxml界面文件 这里的wx:key作用是来指定列表中项目的唯一的标识符。

<view class="group">
  <block wx:for="{{iconSize}}" wx:key="*this">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}" wx:key="*this">
    <icon type="{{item}}" size="40"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconColor}}" wx:key="*this">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

2. progress进度条

2.1 解释：进度条，一般加载程序的时候都会看到这个，那么包含哪些字段才可以完成这个进度条呢。我们下面具体来看一下，

<progress percent="80" active show-info stroke-width="14" />

直接添加在wxml文件里面

在界面文件中，我们直接用这个progress 然后在里面设置它的属性即可，常用的属性介绍：

percent 用来显示进度条到设定的数就会停止加载，（0-100之间）
show-info 用来显示是否显示进度条的百分比
active 进度条的动画显示，演示正常的加载过程，show-info会配合一起变化
stroke-width 进度条的宽度，像王者荣耀训练营模式加载的时候，那样的进度条，加宽而且带有百分比af
activeColor 设置进度条的颜色，在特定的画面背景中配合主题搭配的颜色。

其它的属性，可以参考官方文档上的，这几个属性相对靠前一些

3. rich-text与text 富文本与文本

3.1 解释：经常用到的是text(文本)，这个就是用来填放文本的，就是放字在里面，它的一个属性selectable（默认false）用来设置是否可选，比如百度文档里面设置权限，不允许大片段的复制，但是我觉得截图然后提取文字也可以达到相同的效果吧

3.2 关于空格，如果不设置，再多的空格也只算作2个空格，但是可以设置

ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根据字体设置的空格大小

在用的时候要添加‘&’符号配合用，即&nbsp

喜欢就点个赞呗！

版权任意

微信小程序第二周基础内容

一、基础内容

猜你喜欢

热点阅读