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

2,914 阅读2分钟

✅持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第3天,点击查看活动详情

✅个人主页:hacker707的掘金博客

🎉欢迎关注👀点赞👍收藏⭐留言📝

🔥系列专栏:微信小程序

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

新建小程序页面

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

在这里插入图片描述

修改项目首页

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

在这里插入图片描述

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

在这里插入图片描述

==页面的.js文件==

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

在这里插入图片描述

==普通的.js文件==

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

在这里插入图片描述

结束语

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

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

🔥系列专栏:微信小程序

hacker707 (900 × 383, 毫米) (600 × 400, 毫米) (300 × 400, 毫米) (400 × 400, 毫米) (500 × 400, 毫米) (900 × 400, 毫米) (900 × 500, 毫米) (900 × 400, 毫米) (4).gif