zoukankan      html  css  js  c++  java
  • WXML与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中的属性是大小写敏感的,也就是说 class 和 Class 在WXML中是不同的属性。

    2.变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量。

    3.WXML标签要闭合。

    1.数据绑定

    1)简单的例子

    <!--wxml-->
    <view> {{message}} </view>
    
    // page.js
    Page({
      data: {
        message: 'Hello MINA!'
      }
    })
    

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

    2)属性值也可以动态的去改变,但属性值必须被包裹在双引号中

    <text data-test="{{test}}"> hello world</text>
    

    3)没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中

    <!--
    {
      var2: undefined,
      var3: null,
      var4: "var4"
    }
    -->
    
    
    <view>{{var1}}</view>
    <view>{{var2}}</view>
    <view>{{var3}}</view>
    <view>{{var4}}</view>
    
    
    <!--
    输出:
    null
    var4
    -->
    

    2.逻辑语法

    {{变量名}}通过数据绑定可以实现动态渲染,也可以进行简单的逻辑运算。

    1)三元运算

    <text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>
    

    2)算术运算

    <view> {{a + b}} + {{c}} + d </view>
    

    3)字符串拼接

    <view>{{"hello " + name}}</view>
    

    4){{}}中还课直接放置数字、字符串或者是数组

    <text>{{[1,2,3]}}</text>
    <text>{{"hello world"}}</text>
    

    输出:

    1,2,3

    hello world

    3.列表渲染

    渲染出来多列数据

    4.条件渲染

    满足一定条件时渲染

    5.模板

    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

  • 相关阅读:
    Minimum Depth of Binary Tree leetcode java
    Maximum Depth of Binary Tree leetcode java
    Symmetric Tree leetcode java
    Same Tree leetcode java
    Binary Tree Postorder Traversal leetcode java
    Binary Tree Preorder Traversal leetcode java
    Binary Tree Inorder Traversal leetcode java
    Combinations leetcode java
    一键清除Centos iptables 防火墙所有规则
    阿里云centos7.7x64安装open,并配置ip转发和nat伪装
  • 原文地址:https://www.cnblogs.com/Sonya/p/12832717.html
Copyright © 2011-2022 走看看