文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-06 10:09

关注

✅作者简介:大家好我是hacker707,大家可以叫我hacker,新星计划第三季python赛道Top1🏆
📃个人主页:hacker707的csdn博客
🔥系列专栏:微信小程序
💬个人格言:但行好事,莫问前程

在这里插入图片描述

认识小程序页面

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

在这里插入图片描述

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

在这里插入图片描述

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(Weixin Style Sheets)是一套样式语言,用于描述WXML的组件样式,类似于网页开发中的CSS。

WXSS和CSS的区别

新增了rpx尺寸单位

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

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

项目根目录中的app.wxss作用于所有小程序页面
局部页面的.wxss仅作用于当前页面

WXSS仅支持部分CSS选择器

.class和#id
element
并集选择器、后代选择器
::after和::before等伪类选择器

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

小程序中.js的分类

app.js

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

在这里插入图片描述

页面的.js文件

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

在这里插入图片描述

普通的.js文件

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

在这里插入图片描述

以上就是微信小程序之认识小程序页面
持续更新微信小程序教程,欢迎大家订阅系列专栏🔥微信小程序
你们的支持就是hacker创作的动力💖💖💖

在这里插入图片描述

来源地址:https://blog.csdn.net/xqe777/article/details/126978080

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯