- WXML
weixin markup language,小程序架构设计出来的一套标记语言,可以构建出页面的结构。
标签名必须闭合
属性大小写敏感
数据绑定:
通过{{}}来绑定视图层和逻辑层的数据
(1)绑定文本内容时:使用{{value}}
(2)绑定属性值时:src = “{{value}}” //要加双引号
这两种变量不会被同步到wxml:没有被定义、undefined
**逻辑语法:**可以在花括号里面进行js运算,比如三目运算、字符串拼接、数值相加减等等
条件逻辑:
wx:if属性来判断是否要渲染当前标签的内容。
可以使用wx:if、wx:elif、wx:else来添加else块。
当要控制多个view标签的是否显示时,可以使用<block wx:if="{{false}}">
通用的使用方法:<view wx:if="{{true}}">
列表渲染:
属性wx:for、wx:for-index、wx:for-item,(index和item是默认值)
通用的使用方法:<view wx:for="{{array}}" wx:for-index=“idx” wx:for-item=“person”>
可以使用<block>标签
若项目中的内容要保持原有状态:
(1)(input、switch等),可以使用wx:key=“unique”,unique是js的data的渲染数据的每一项的属性值,注意要设置成独一无二的。(联想到了react diff算法的key值)
(2)wx:key="*this": 若item本身是一个唯一的字符串或者数字
模板template:
模板是一个代码片段,写在wxml中,当需要的时候用以渲染
通用方法:
//定义模板,并不渲染
<template name="myName">
<view>姓名:{{name}}</view>
<view>年纪:{{age}}</view>
</template>
//使用模板并且渲染, ”...“可以保证对象内部的基础类型值的深拷贝
<template is="myName" data="{{...person}}"></template>
/*
js里面的data:
data:{
person:{name: "李亚男", age: 25}
}
*/
引用:
(1)<import src=“item.wxml”>,使用该语句,可以在当前页面下使用item.wxml内部的模板template,但是不可以使用item.wxml内部import的文件的模板
(2)< include src=“item.wxml”/>可以将引入文件的除了template和wxs等代码复制到引入语句的位置,比如引入header或者footer等。
共有属性:
所有wxml标签都支持的属性class、id、style、bind*/catch*、hidden、data-*
- JSON
- JS
js组成:
web浏览器:ECMAScript+Dom+Bom
NodeJS: ECMAScript+NPM+Native
小程序:ECMAScript+小程序框架+小程序API
执行环境:
Andriod、IOS、开发者工具
模块化:
web中,作用域只有一个,不同的js文件可以共享变量,比如在首页的html中引入的第三方库文件,赋值给window变量后,就可以在子js文件中访问这个变量。小程序一个js文件就是一个作用域,可以使用moudle.exports = {}来向外暴露接口,通过require("./common.js")来引入。
脚本的执行顺序:
web浏览器:从上到下来执行
小程序: 先执行app.js,之后按照app.json里面的页面注册顺序来执行相应的js文件
作用域:
由于小程序一个js文件就是一个作用域:
(1)若是想和web一样使用全局变量的话:可以使用app.js里面的globalValue来访问,getApp()是app.js的一个实例。(我感觉这里好像是案例模式呢?)
(2)在不同的pages里面的js文件,可以定义一样的名字的变量,因为作用域不同,所以不会互相影响。
- WXSS
weixin style sheets小程序上的样式语言
文件组成:
页面样式:在pages里面定义的wxss文件
公共项目样式:app.wxss
其他样式文件:统一的文件夹里面写的wxss样式文件,可以上述两种样式文件引入
无需优化样式文件的请求数量,因为有编译优化
尺寸单位rpx:
responsive pixel
屏幕实际的物理像素表示为w
1rpx/375 = 1px/w
1rpx = 375/w(px)
开发时,无论是什么机型,都可以把屏幕的宽度理解为375px,设定宽度时,将其单位换为rpx
当需要根据屏幕不同的尺寸来调整才需要使用rpx
wxss引用:
@import ‘./style.wxss’;会被打包进项目中,不会引起多余的wxss网络请求
内联样式动态更新:
<view style=“color:{{color}}; fontsize:{{size}}”></view>
内联样式的属性值可以是js的data里面自定义的,所以可以动态更改
选择器
.class
#id
element
::after
::before
特指度遵循ICE,!important(无穷大)>style=""(1000)
官方样式库:
e:/study-work/小程序/weui-wxss-master/dist里面是微信团队给出来的官方样式库