ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

WXML与WXSS

2020-05-05 21:02:02  阅读:801  来源: 互联网

标签:WXML 渲染 样式 JS 组件 WXSS


WXML模板

充当类似html的角色

和html区别:

1.微信小程序将常用组件封装,提高了开发效率。

小程序常用组件:view,button,text和地图,视频,音频等组件能力。

2.小程序框架使用MVVM开发思路。控制能力用wx:开头的属性来表达。

在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应HTML的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS会记录一些状态到JS变量里边,同时通过DOM API 操控DOM的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让JS直接操控DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。

WXML 是这么写 :

<text>{{msg}}</text>

JS 只需要管理状态即可:

this.setData({ msg: "Hello World" })

通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。

WXML简介

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件(视图容器,表单组件,导航,媒体组件,地图,画布等)、事件系统,可以构建出页面的结构。

能力:

1.数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

page.js中的message值改变之后wxml中message值也会改变

2.列表渲染:渲染出来多列数据

3.条件渲染:满足一定条件时渲染

4.模板

WXSS样式

WXSS具有css大部分的特性,小程序在WXSS上也做了一些补充和修改。

1.新增尺寸单位。WXSS底层支持新的尺寸单位rpx。

rpx:可以根据屏幕宽度进行自适应。

换算???

2.样式导入

@import导入外联样式,后跟外联样式表的相对路径,';'表示语句结束。

如:@import"a.wxss";

3.内联样式

style接收动态的样式。静态样式写入style中会影响渲染速度。

class接收静态的样式,用于指定样式规则。 值之间用空格隔开。

4.提供全局样式和局部样式

5.WXSS仅支持部分css选择器

.class

'#' id

elment

elment,elment

::after

::before

标签:WXML,渲染,样式,JS,组件,WXSS
来源: https://www.cnblogs.com/Sonya/p/12832717.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有