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

简介: 只需要在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创作的动力💖💖💖


相关文章
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
53 1
|
2月前
|
小程序 前端开发 开发者
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
61 1
|
3月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
2月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
699 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 前端开发 数据可视化
微信商城小程序WeiMall
微信商城小程序WeiMall
36 0
|
3月前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
270 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
52 0
微信小程序更新提醒uniapp