微信小程序开发一入门开发标记语言基础组件

参考资料：https://mp.weixin.qq.com/debug/wxadoc/dev/component/icon.html

小程序继承了html的一部分，

目前遇到的不可用的html标签有<h>标签<a>标签的href属性不可用，之后会总结下

所以定义了一套自己的标签以下是在html标签上进行延伸

学习之前如果你会angular，标签语言学习起来比较容易，如果不会，建议先学下数据绑定，小程序前端代码才用了数据绑定的思想，具体不在这里多做介绍。

一、视图容器（有部分还没理解，后续补充）

二、基础标签：

icon:在wxml上写<icon/>标签，在js里定义icon标签样式

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

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


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

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

text标签：就是html里的text标签差不多，<text>textContent<text/>，但是这里的text有两个属性string，boolean

 <view class="btn-area">
  <view class="body-view">
    <text>{{text}}</text>
    <button bindtap="add">add line</button>
    <button bindtap="remove">remove line</button>
  </view>
</view>

const app = getApp()
var initData = 'this is first line\nthis is second line'
var extraLine = [];

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ],
    text: initData
  },
  add: function (e) {
    extraLine.push('other line')
    this.setData({
      text: initData + '\n' + extraLine.join('\n')
    })
  },
  remove: function (e) {
    if (extraLine.length > 0) {
      extraLine.pop()
      this.setData({
        text: initData + '\n' + extraLine.join('\n')
      })
    }
  }
})

rich-text标签：

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>

Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
2. tip: rich-text 组件内屏蔽所有节点的事件。
3. tip: attrs 属性不支持 id ，支持 class 。
4. tip: name 属性大小写不敏感。
5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6. tip: img 标签仅支持网络图片。

progress标签：进度条