当前位置:首页 > 技术 > 正文内容

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

Lotus2022-10-06 19:05技术

????系列专栏:微信小程序

????欢迎关注????点赞????收藏⭐留言????

✅个人主页:​​hacker_demo的51CTO博客​

????个人格言:不断的翻越一座又一座的高山,那样的人生才是我想要的。这一马平川,一眼见底的活,我不想要,我的人生,我自己书写,余生很长,请多关照,我的人生,敬请期待????????????

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

新建小程序页面

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

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

修改项目首页

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

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

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()函数启动整个小程序

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

页面的.js文件

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

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

普通的.js文件

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

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

结束语????

以上就是微信小程序之认识小程序页面,创作不易多多支持????????????

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

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

扫描二维码推送至手机访问。

版权声明:本文来源于网络,仅供学习,如侵权请联系站长删除。

本文链接:https://news.layui.org.cn/post/142.html

分享给朋友:

“【微信小程序】认识小程序页面” 的相关文章

第三章 知己知彼

知彼知己,百战不殆;不知彼而知己,一胜一负;不知彼,不知己,每战必殆。《谋攻篇》 前面两章其实重点是在掰扯数智化,IT研发本身的数字化其实除了DevOps这一种手段之外还有很多,比如Low Code、RPA等等,AI都可以自动写代码了,还有啥是不可能的呢!不过本人能力有限,这点斤两也就敢玩玩DevOps,其他的碰都就不敢碰,接下来聚焦到DevOps的一些见解上。 3.1 剑锋所指      ...

多功能手持VH501TC采集仪如何设置振弦传感器的激励方法和激励电压

河北稳控科技多功能手持VH501TC采集仪如何设置振弦传感器的激励方法和激励电压 VH501TC 提供多种振弦传感器激励方法,以最大限度兼容所有厂家和型号的振弦传感器。 振弦传感器激励方法参数位于实时数据窗口右侧,共有 5 种方法可选,分别用 MODTH0~MODTH4 表示。各方法说明如下: 激励电压数据在屏幕上显示为 xxx/xxx 的形式,其中前面的数字表示实际的激励电压,后面的数字...

Python基础(十) | Numpy详细教程

第十一章 Numpy库 ⭐本专栏旨在对Python的基础语法进行详解,精炼地总结语法中的重点,详解难点,面向零基础及入门的学习者,通过专栏的学习可以熟练掌握python编程,同时为后续的数据分析,机器学习及深度学习的代码能力打下坚实的基础。 ????本文已收录于Python基础系列专栏: Python基础系列教程 欢迎订阅,持续更新。 10.1 为什么要用Numpy 10.1.1  ...

深入浅出DevOps:初识Pipline流水线任务

???? 作者: 俗世游子【谢先生】。 8年开发3年架构。专注于Java、云原生、大数据等领域技术。 ???? 成就: 从CRUD入行,负责过亿级流量架构的设计和落地,解决了千万级数据治理问题。 ???? 同名社区:​​51CTO​​​、 ​​github​​​、掘金​、​​gitee​​​。 ???? 清单: ​​​goku-framework​​​、​​【更新中】享阅读II​​ De...

分布式存储系统之Ceph集群存储池操作

  前文我们了解了ceph的存储池、PG、CRUSH、客户端IO的简要工作过程、Ceph客户端计算PG_ID的步骤的相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16733806.html;今天我们来聊一聊在ceph上操作存储池相关命令的用法和说明;   在ceph上操作存储池不外乎就是查看列出、创建、重命名和删除等操作,常用相关的工具都是“cep...

CPS攻击案例(一)——基于脉冲宽度调制PWM的无人机攻击

​  本文系原创,转载请说明出处 Please Subscribe Wechat Official Account:信安科研人,获取更多的原创安全资讯 原论文链接:sec22-dayanikli.pdf (usenix.org) 目录 摘要 一 知识背景 1.1 CPS 1.2 脉冲宽度调制PWM 二 攻击方案研究思路 2.1 研究背景 2.2 灵感与动机 2.3 PWM控制执行器的机理 2.3....

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。