【微信小程序】认识小程序页面

简介: 只需要在app.json->pages中新增页面的存放路径,小程序开发工具即可自己创建对应的页面文件。

75860e007264416dbfd5fc8c6f545ed3.gif


新建小程序页面



只需要在app.json->pages中新增页面的存放路径,小程序开发工具即可自己创建对应的页面文件。如下图所示


c60de34fd1694466bedf6137668d6d44.gif


修改项目首页



只需要调整app.json->pages数组中页面路径的前后顺序,即可修改项目的首页。小程序会把排在第一位的页面,当做项目首页渲染,如图所示


461bf7ebb0154242947eb39178a5106e.gif


WXML



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


WXML和HTML的区别


标签名称不同


HTML(divspan,img,a)

WXML(view,text,image,nevigator)


属性节点不同


HTML

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

WXML


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


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


数据绑定

列表渲染

条件渲染


WXSS



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


WXSS和CSS的区别


新增了rpx尺寸单位


CSS需要手动进行像素单位换算

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


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


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

局部页面的.wxss仅作用于当前页面


WXSS仅支持部分CSS选择器


.class和#id

element

并集选择器、后代选择器

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


小程序中的.js文件



我们通过.js文件来处理用户的操作。例如:响应用户的点击、获取用户的位置等等。


小程序中.js的分类


app.js


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


b3639da6dd5b4b1b9783b97af8abe2ca.png


页面的.js文件


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


39776d1020464f37ac4d594bab177d86.png


普通的.js文件


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


48f79bfbe7f843579bd7ceb649fa5270.png


结束语


以上就是微信小程序之认识小程序页面

持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序

你们的支持就是hacker创作的动力💖💖💖


相关文章
|
6天前
|
缓存 小程序 前端开发
商城/点餐/家政类小程序源码合集_微信抖音小程序源码开发从入门到精通实战
本文系统讲解如何利用现有源码快速开发商城、点餐、家政类微信/抖音小程序,涵盖环境搭建、核心功能实现、多平台部署与优化,提供完整技术方案。实战导向,助力开发者高效入门与落地。
|
8天前
|
存储 小程序 Java
热门小程序源码合集:微信抖音小程序源码支持PHP/Java/uni-app完整项目实践指南
小程序已成为企业获客与开发者创业的重要载体。本文详解PHP、Java、uni-app三大技术栈在电商、工具、服务类小程序中的源码应用,提供从开发到部署的全流程指南,并分享选型避坑与商业化落地策略,助力开发者高效构建稳定可扩展项目。
|
4月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1028 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
4月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
282 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
6月前
|
存储 移动开发 小程序
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
基于开源技术栈构建的校园圈子系统小程序,整合社交与生活服务功能,涵盖兴趣圈子、私信聊天、资料共享、二手交易、兼职跑腿等六大核心模块。通过多端账号同步(微信公众号/小程序/H5),实现数据实时交互,满足学生群体的多元化需求。项目精准锚定校园市场,以“社交+服务”双轮驱动,提供一站式解决方案,支持快速部署与多校区运营,同时具备广告、佣金、会员等多元变现能力,是打造校园生态的理想工具。
573 2
校园圈子系统小程序(圈子论坛、私信聊天、资料共享、二手交易、兼职,跑腿)开源码开发/微信公众号、小程序、H5多端账号同步/搭建多城市的综合社交生活平台
|
11月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
174 1
|
7月前
|
小程序 数据安全/隐私保护 开发者
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
【02】微信支付商户申请下户到配置完整流程-微信开放平台申请APP应用-微信商户支付绑定appid-公众号和小程序分别申请appid-申请+配置完整流程-优雅草卓伊凡
388 3
|
7月前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
570 8
|
7月前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
2377 12
|
7月前
|
缓存 小程序 API
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。

热门文章

最新文章