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

参考资料：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标签：进度条

阅读全文

0 0

• 微信小程序开发一入门开发标记语言基础组件
• 微信小程序开发入门基础
• 微信小程序开发-入门基础
• 微信小程序开发-开发入门（一）
• 微信小程序地图开发入门(一)
• oracle程序开发基础一
• DirectShow组件开发入门级一
• 通过标记处理程序实现标记开发
• 微信小程序开发入门
• 微信小程序开发入门
• 微信小程序开发--入门
• 微信小程序入门开发
• 微信小程序开发入门
• 微信小程序开发入门
• 微信小程序-开发入门
• 微信小程序入门开发
• 微信小程序倒计时组件开发
• mybatis之入门到开发(一)之基础原理概念+入门小程序
• maven方式下载源码
• 爬楼梯
• MyEclipse部署项目出错：Deployment is out of date due to changes in the
• Android 监听NavigationBar
• UML类图学习
• 微信小程序开发一入门开发标记语言基础组件
• C++编程习惯
• 【Android training】保存数据
• 阻塞非阻塞与同步异步的区别
• switch语句实现成绩转换
• AGC 014
• 链表（一）
• 数据结构与算法分析——第三章 表、栈和队列1
• 【iOS 开发】Status Bar 状态栏设置汇总

宁化老鼠干 知乎

原创粉丝点击

热门IT博客

路由器mac地址过滤

淘宝南极人男人保暖裤

手机接收wifi端口

非农大数据官网

fast迅捷网络

淘宝情趣用品店铺简介

logo自制软件

牛牛财务机器人源码

cf手游免刷枪软件下载

光明大陆pc和mac区别

企业名录搜索软件泄露

tensorflow 算法

广角变焦镜头淘宝

input name 数组

威尔逊主义 知乎

手机版电音制作软件

怎么建立数据透视表

日本女生保养知乎

安卓6.0mac地址修改器

mac 视频软件 知乎

热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 活死飞怎么刹车 死飞和活飞有什么区别 活死飞是什么 活飞怎么刹车 死飞改装 死飞活飞区别 活飞多少钱 单车活飞多少钱 活飞价钱 活飞哪个牌子好 夜光活飞 活飞羊角 活飞零件 活飞真空胎 飞的 死飞怎么变成活飞 死飞活飞的区别 活飞死飞两用 活飞刹车 二手活飞 死飞活飞是什么 死飞如何改活飞 活飞轮子 死飞和活飞哪个安全 死飞可以改活飞吗 活飞自行车配色 活飞轮胎 活飞后刹 活飞装刹车 活飞变速自行车 活飞和死飞区别 死飞和活飞的区别 什么地飞 活飞和死飞的区别 活飞自行车好骑吗 爆炒活鸡 活鸡包装盒 活鸡批发 大妈带活鸡进地铁 乌鸡图片活鸡图 今日活鸡价格