【小程序】WXML 模板

简介: 【小程序】WXML 模板

WXML 模板

1. 什么是 WXML


WXML(WeiXin Markup Language)是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的 HTML。

标签名称不同


HTML (div, span, img, a)


WXML(view, text, image, navigator)


属性节点不同


<a href="#">超链接</a>


<navigator url="/pages/home/home"></navigator>


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


数据绑定


列表渲染


条件渲染


WXSS 样式

1. 什么是 WXSS


WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的 CSS。


2. WXSS 和 CSS 的区别


新增了 rpx 尺寸单位


CSS 中需要手动进行像素单位换算,例如 rem


WXSS 在底层支持新的尺寸单位 rpx,在不同大小的屏幕上小程序会自动进行换算


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


项目根目录中的 app.wxss 会作用于所有小程序页面


局部页面的 .wxss 样式仅对当前页面生效


WXSS 仅支持部分 CSS 选择器


.class 和 #id


element


并集选择器、后代选择器


::after 和 ::before 等伪类选择器


JS 逻辑交互

1. 小程序中的 .js 文件


一个项目仅仅提供界面展示是不够的,在小程序中,我们通过 .js 文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。


2. 小程序中 .js 文件的分类


小程序中的 JS 文件分为三大类,分别是:


app.js


是整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序


页面的 .js 文件


是页面的入口文件,通过调用 Page() 函数来创建并运行页面


普通的 .js 文件


是普通的功能模块文件,用来封装公共的函数或属性供页面使用


相关文章
|
4月前
|
小程序 前端开发
生活商城app微信小程序模板源码
生活商城app微信小程序模板源码
60 6
|
4月前
|
小程序 前端开发
汽车报价资讯app小程序模板源码
汽车报价资讯app小程序模板源码
36 4
|
4月前
|
小程序
企业人才招聘小程序模板源码
企业人才招聘小程序模板源码
98 3
|
4月前
|
小程序
知识社区在线提问小程序模板源码
知识社区在线提问小程序模板源码
49 3
|
2月前
|
JSON 小程序 前端开发
towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本
本文介绍了在微信小程序中使用`towxml`库将Markdown格式文本渲染为WXML的方法。文章提供了`towxml`的概述、安装步骤、以及如何在小程序中配置和使用`towxml`进行Markdown解析的详细说明和代码示例。
|
1月前
|
小程序
java--微信小程序发送模板消息
java--微信小程序发送模板消息
92 0
|
4月前
|
小程序 前端开发
仿哔哩哔哩视频app小程序模板源码
仿哔哩哔哩视频app小程序模板源码
206 5
仿哔哩哔哩视频app小程序模板源码
|
4月前
|
小程序
同城拼车社交微信小程序模板源码
同城拼车社交微信小程序模板源码
76 6
|
4月前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
95 4
|
4月前
|
小程序 前端开发
网络祭祀人物微信小程序模板源码
网络祭祀人物微信小程序模板源码
42 5

热门文章

最新文章