位置: IT常识 - 正文

【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互(微信小程序从零)

编辑：rootadmin

【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互

推荐整理分享【小程序从0到1】宿主环境｜WXML｜WXSS｜JS逻辑交互(微信小程序从零)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:小程序107,小程序107,小程序107,小程序107,从零开始小程序,小程序从0到1 pdf,微信小程序从零开始,微信小程序从0到1,内容如对您有帮助，希望把文章链接给更多的朋友！

欢迎来到我的博客 📔博主是一名大学在读本科生，主要学习方向是前端。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏 🛠目前正在学习的是🔥React/小程序React/小程序React/小程序🔥，中间穿插了一些基础知识的回顾 🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇新建小程序页面修改项目首页什么是WXML？什么是WXSS？小程序中的.js文件宿主环境小程序组件

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

新建小程序页面

只需要在 app.json ⇒ pages中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件。

在pages数组中新增一个list项，保存后，开发者工具即可帮我们自动创建一个list文件夹，里面包含了四个文件：list.js / list.json / list.wxml / list.wxss。

修改项目首页

只需要调整 app.json ⇒ pages 数组中页面路径的前后顺序，即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染。

什么是WXML？

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

WXML和HTML的区别

标签名称不同

HTML：（div、span、img、a……） WXML：（view、text、image、navigator……）说白了，WXML在HTML的基础上做了一些改进，同时又借鉴了一些别的框架（比如React里的navigate）

属性节点不同

HTML：<a href="#">超链接</a> WXML：<navigator url="/pages/home/home"></navigator>

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

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

什么是WXSS？

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

WXSS和CSS的区别

新增了 rpx 尺寸单位在CSS中需要手动进行像素单位换算，例如 rem；WXSS在底层支持新的尺寸单位 rpx ，在不同大小的屏幕上小程序会自动进行换算提供了全局的样式和局部样式项目根目录中的app.wxss会作用于所有小程序页面局部页面中的.wxss 只会对当前局部页面生效WXSS仅支持部分CSS选择器.class 和 #idelement并集选择器、后代选择器::after 和 ::before等伪类选择器只要不是特别冷门的选择器，WXSS都是能够给予支持的小程序中的.js文件

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

.js文件的分类

app.js