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

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


目录
相关文章
|
3天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的优购电商小程序的详细设计和实现
23 0
|
3天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信课堂助手小程序的详细设计和实现
26 3
|
3天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读网站小程序的详细设计和实现
24 2
|
3天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的健身管理系统及会员微信小程序的详细设计和实现
22 0
|
3天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的微信阅读小程序的详细设计和实现
25 0
|
3天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的旅游出行必备商城小程序的详细设计和实现
26 0
|
11天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
11天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
11天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
11天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。

热门文章

最新文章