（学习笔记）微信小程序 -- WXML模板、WXSS样式、JS逻辑交互

WXML是小程序框架下的标签语言，类似于网页开发中HTML

WXML 和 HTML 的区别

1）使用的标签名不同

2）属性节点不同

3) 提供了类似于Vue中的模板语法

数据绑定、列表渲染、条件渲染

但个人认为前两项没多大区别，换个皮而已。

WXSS是小程序下的样式语言，用来描述WXML的组件样式，类似于网页开发中的CSS。

WXSS 和 CSS的区别 :

1）新增了rpx尺寸单位

CSS中像素单位需要手动换算，但是WXSS在底层支持新的尺寸单位，可以自动换算

2）提供了全局的样式和局部样式

根目录的 app.wxss 能作用所有小程序页面

各个页面文件夹的 .wxss 样式仅对当前页面生效

3）WXSS仅支持部分CSS选择器

小程序中的 .js 文件是用来处理用户操作

小程序中JS文件分为三类

app.js --> 整个小程序项目的入口文件，通过调用APP()函数来启动整个小程序

页面的.js文件 --> 页面的入口文件，通过调用page（）函数来创建页面并运行

普通的 .js 文件 --> 普通的功能模块文件，用来封装公共的函数或属性供页面使用

在utils文件的utils.js文件中就封装了formatTime函数供所有页面来使用，如果某个页面需要使用该函数，通过导入utils就可以使用formatTime函数。

（学习笔记）微信小程序 -- WXML模板、WXSS样式、JS逻辑交互相关推荐

微信小程序wxml和wxss样式
对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
wxml修改样式_微信小程序wxml和wxss样式
对于css不熟悉的Android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
微信小程序 - WXML 模板语法 - 条件渲染
1.wx:if (1)在微信小程序中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块: <view wx:if="{{conditio ...
微信小程序开发(五) - 全局(app.js)逻辑 - js 文件
微信小程序中使用的逻辑文件 ,本质上还是.js 文件,脚本中的很多东西进行了二次封装,本质上可以在外部调试中,查看逻辑层(App Service) 小程序开发框架的逻辑层由 JavaScript 编 ...
微信小程序---WXML 模板语法(附带笔记文档)
目录学习文档 WXML模板语法-数据绑定数据绑定基本原则在data中定义页面数据 Mustache语法的格式动态绑定属性三元运算算数运算 WXML模板语法-事件绑定什么是事件小程序中常 ...
微信小程序----------WXML模板文件一
一.页面根元素page 每一个页面都具备一个根元素:<page></page>. 页面根元素可以在控制台的WXML选项卡中看到. 允许在wxss文件中对page根元素进行样式设 ...
微信小程序—WXML模板语法
1.数据绑定的基本原则在页面对应的.js 文件中,把数据定义到data对象中即可: Page({data: {//字符串类型的数据info: 'init data' ,//数组类型的数据 msgL ...
【微信小程序】关于wxss样式的便捷设置
我们在使用别人的小程序时总会看到一些自己十分心仪的小程序样式,可到自己模仿实践的时候会发现也非易事,所以下面提供了一种快捷的方法. 第一步,打开设计软件Pixso Pixso,一款用于设计各类页面的网 ...
图文并茂的学习笔记--微信小程序自定义tabbar
我发现自带的那个tabbar不可以修改样式,没得搞啊,这不行,要改首先,我们看文档,地址在下面 https://developers.weixin.qq.com/miniprogram/dev/fr ...

（学习笔记）微信小程序 -- WXML模板、WXSS样式、JS逻辑交互

（学习笔记）微信小程序 -- WXML模板、WXSS样式、JS逻辑交互相关推荐

最新文章

热门文章