【小程序】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 文件


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


相关文章
|
2月前
|
小程序 前端开发
生活商城app微信小程序模板源码
生活商城app微信小程序模板源码
42 6
|
2月前
|
小程序 前端开发
汽车报价资讯app小程序模板源码
汽车报价资讯app小程序模板源码
26 4
|
2月前
|
小程序
企业人才招聘小程序模板源码
企业人才招聘小程序模板源码
91 3
|
2月前
|
小程序
知识社区在线提问小程序模板源码
知识社区在线提问小程序模板源码
32 3
|
2月前
|
小程序 前端开发
仿哔哩哔哩视频app小程序模板源码
仿哔哩哔哩视频app小程序模板源码
121 5
仿哔哩哔哩视频app小程序模板源码
|
2月前
|
小程序
通用的职位招聘小程序ui模板
通用的职位招聘小程序ui模板
30 5
通用的职位招聘小程序ui模板
|
2月前
|
小程序
同城拼车社交微信小程序模板源码
同城拼车社交微信小程序模板源码
52 6
|
2月前
|
小程序 前端开发
微信综合购物商城小程序ui模板源码
微信电商小程序前端页面,综合购物商城ui界面模板。主要功能包含:电商主页、商品分类、购物车、购物车结算、我的个人中心管理、礼券、签到、新人专享、专栏、商品详情页、我的订单、我的余额、我的积分、我的收藏、我的地址、我的礼券等。这是一款非常齐全的电商小程序前端模板。
62 4
|
2月前
|
小程序 前端开发
网络祭祀人物微信小程序模板源码
网络祭祀人物微信小程序模板源码
30 5
|
2月前
|
小程序
新闻电影资讯类小程序模板源码
新闻电影资讯类小程序模板源码
77 5