微信小程序 视图层(wxml,wxss)

丰富的组件:https://developers.weixin.qq.com/miniprogram/dev/component/

全局样式:app.wxss

页面+页面样式:page.wxml +page.wxss

视图层将逻辑层的数据反映成视图,同时将视图层的事件发送给逻辑层。

  框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。

  什么是组件:(所有组件与属性都是小写,以连字符-连接)

  • 组件是视图层的基本组成单元。
  • 组件自带一些功能与微信风格的样式。
  • 一个组件通常包括开始标签结束标签属性用来修饰这个组件,内容在两个标签之内。

  属性类型:Boolean、Number、String、Array、Object、EventHandler

  共同属性类型:id、class、style、hidden、data-*、bind* / catch*

  组件分类:视图容器、基础内容、表单组件、导航、媒体组件、地图、画布等。

    视图容器:

      view:视图容器

      scroll-view:可滚动视图容器

      swiper:滑块视图容器

    基础内容:

      icon: 图标

      text:文字

      progress:进度条

    表单组件:

      button:按钮

      form:表单

      input:输入框

      checkbox:多项选择器

      radio:单项选择器

      picker:列表选择器

      picker-view:内嵌列表选择器

      slider:滚动选择器

      switch:开关选择器

      label:标签

    导航:

      navigator:应用链接

    媒体组件:

      audio:音频

      image:图片

      video:视频

    地图:

      map:地图

    画布:

      canvas:画布

原文地址:https://www.cnblogs.com/zhangyajun/p/9180669.html

时间: 2024-09-29 19:43:27

微信小程序 视图层(wxml,wxss)的相关文章

微信小程序:其中wxml和wxss的样式说明

微信小程序:其中wxml和wxss的样式说明 一.简介 对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式. 二.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 关于这八大类的属性和具体用法可参考以下参考文献链接: http://www.w3cschool.cn/w

微信小程序入门五: wxml文件引用、模版、生命周期

实例内容 wxml文件引用(include.import) 模版 小程序生命周期 实例一: include方式引用header.wxml文件 文件引用对于代码的重用非常重要,例如在web开发中我们可以将公用的header部分和footer等部分进行提取,然后在需要的地方进行引用. 微信小程序里面,是包含引用功能的--include.import.这两个引用文件的标签,使用基本差不多,这里先说一下include. 微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到

微信小程序 text属性设置 WXSS样式

>微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ font-family:"宋体";   /*设置字体为宋体*/ ----------------------

10.小程序视图层数据绑定

数据绑定 WXML 中的动态数据均来自对应 Page 的 data. 只要把data中的数据改变,视图层就会自动改变,无需使用DOM操作. 简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来 使用方法: {{ 内容 }} 在组件中使用!不论是在组件包含在内,还是在组件属性内的,都是需要使用双花括号! 示例: index.wxml: index.js: 运行: 在控制台可以查看到wxml的id,是data的数据 原文地址:https://www.cnblogs.com/kai-z

微信小程序-视图视图引用

引用 WXML 提供两种文件引用方式import和include. import import可以在该文件中使用目标文件定义的template,如: 在 item.wxml 中定义了一个叫item的template: <!-- item.wxml --> <template name="item"> <text>{{text}}</text> </template> 在 index.wxml 中引用了 item.wxml,就可

微信小程序-视图

数据绑定 <!--wxml--> <view> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } }) 列表渲染 <!--wxml--> <view wx:for="{{array}}"> {{item}} </view> // page.js Page({ data: { array: [1, 2, 3, 4, 5] }

微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微

微信小程序(有始有终,全部代码)开发---跑步App+音乐播放器

我的微信开发者工具 开篇语 好不容易,终于把所有的基础课程全部看完了!昨天,我很高兴地开始了看别人做的项目进行深度的学习.其实也说不上是项目吧,更多的像是一种给新手看的示例代码.然后我在这些代码上面进行我自己的改进.最后也就有了接下来我会给大家带来的这篇文章中的项目.这个项目是完整的,它包括了一个原本的示例代码中带着的莫名其妙的动画组件(可能是为了更多额展示微信小程序的控件体系)以及跑步的组件,还有我后来自己加上去的一个音乐播放组件.总共也就有了三个的功能:动画效果展示:跑步的定时以及定位功能:

通过微信小程序看前端

前言 2016年9月22日凌晨,微信官方通过“微信公开课”公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真正收到内测邀请的公众号据说只有200个. 虽然内测名额十分稀少,但依赖中国广大开发者的破解和分享精神,在网络上很快出现了开发工具的破解版本和API文档.然而可能是微信的妥协或者早已预料,9月24日微信官方发布了不需要破解就可以使用的微信小程序开发者工具和文档,对于费劲心思破解完的开发者来说应该瞬间整个人都不好了. 以下