目录

  • 前言
  • 一、在app.json中添加页面
  • 二、功能基本介绍
    • 2.1 .js(脚本逻辑文件)
    • 2.2 .json(全局配置文件)
    • 2.3 .wxml(微信小程序结构文件)
    • 2.4 .wxss(组件显示文件)
  • 总结

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

此篇文章我们主要讲一下如何在微信小程序中新建页面，作为我们的编辑页面

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、在app.json中添加页面

  • 打开微信小程序开发工具

  • 在 app.json 中的 pages模块中输入如下图所示内容

    也就是输入了最后一行 "pages/xdl/xdl" ，前面我们说过pages里面放入我们小程序的所有的页面的地址，那么我们在pages中写入一个新页面，那么开发工具会自动生成页面

  • 上述代码输入后，打开pages文件，会看见刚才新建的页面

二、功能基本介绍

我们刚新建的页面文件中由四部分组成：

  • .js
  • .json
  • .wxml
  • .wxss

他们分别起到不同的作用，接下来我们逐一解释

2.1 .js(脚本逻辑文件)

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

2.2 .json(全局配置文件)

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

2.3 .wxml(微信小程序结构文件)

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

2.4 .wxss(组件显示文件)

  1. WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
  2. WXSS 用来决定 WXML 的组件应该怎么显示。
  3. 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
  4. 与 CSS 相比，WXSS 扩展的特性有：
    • 尺寸单位
    • 样式导入
    • 尺寸单位

总结

这一篇文章主要为了后面的学习做基础！大家一定要动手操作呀！

✨原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下

【微信小程序入门到精通】— 项目准备相关推荐

  1. 【微信小程序入门到精通】— 配置合法域名、进行网络数据请求（GET、POST）

    目录 前言 一.网络数据请求的限制要求 1.1 配置合法域名 1.2 在微信小程序开发者工具里面查询是否成功 二.网络数据请求 2.1 GET 2.2 POST 三.网络数据请求实操 3.1 发起 G ...

  2. 【微信小程序入门到精通】— 事件绑定的详细解读

    目录 前言 一.事件绑定导论 二.常用事件 三.事件对象属性列表 3.1 target 和 currentTarget 的区别 3.2 bindtap 的用法 总结 前言 对于目前形式,微信小程序是一 ...

  3. 【微信小程序入门到精通】—小程序实战构建售货平台首页

    目录 前言 一.步骤阐述 二.新建项目并梳理结构 三.配置导航栏 四.tabBar 实现 五.轮播图实现 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...

  4. 【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）

    目录 前言 一.tabBar 介绍 二.实操(创建 tabBar ) 2.1 基本配置 2.2 详细配置 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...

  5. 【微信小程序入门到精通】— 条件渲染实现方式

    目录 前言 一.wx:if 渲染方式 1.1 wx:if 介绍 1.2 wx:if 实例介绍 二.结合 block 的整体条件渲染 2.1 block 组件 2.1 block + wx:if 结合实 ...

  6. 微信小程序入门到精通

    常见问题 1.rpx:小程序的尺寸单位,规定屏幕为750rpx,可适配不同分辨率的屏幕 2.本地资源无法通过wxss获取 RE:background-image:可以使用网络图片,或者base64,或 ...

  7. 【微信小程序入门到精通】— window 导航栏配置

    目录 前言 一.全局配置的常用配置项 二 .window 导航栏 2.1 navigationBarTitleText 配置项 2.2 下拉刷新的配置 总结 前言 对于目前形式,微信小程序是一个热门, ...

  8. 【微信小程序入门到精通】— 小程序的 API 到底是个啥

    目录 前言 一.API 导论 二.事件监听 API 三.同步 API 四.异步 API 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设 ...

  9. 【微信小程序入门到精通】— 微信小程序开发工具的安装

    目录 前言 一.注册小程序账号 二.安装开发环境 2.1 微信小程序开发工具介绍 2.1 安装微信开发者工具 总结 前言 微信小程序在我们日常使用中已经占据很大一部分了,此专栏是专门为了微信小程序学习 ...

最新文章

  1. Base64的解码和编码
  2. 09机器学习实战之多元线性回归
  3. SLAM学习--2D激光SLAM--入门学习
  4. mac用vscode打开html,Mac 命令行打开VsCode
  5. NET问答: 如何实现读写 file 的时候不用锁模式 ？
  6. 在SharePoint 2010中创建网站的权限级别
  7. assoc_Ruby assoc（）函数
  8. Redis的相关命令
  9. 【报告分享】2020物业行业专题报告-德勤.pdf（附下载链接）
  10. 华为广域网帧中继（背靠背）配置
  11. 微软ASP.NET AJAX框架剖析(1)
  12. 大麦无线虚拟服务器,解答大麦盒子无线设置的问题
  13. python算法书籍-推荐 10 本程序员必读的算法书
  14. mysql的数据库实例名是啥_数据库名、数据库实例名与数据库域名
  15. 工作说明书SOW(Statement Of Work)
  16. 思科ccnp网络工程师必看SDh工作原理
  17. 034-OpenCV HSV颜色识别图片
  18. 数据分析工程师_第02讲Pandas教程(上篇)
  19. Blend for Visual Studio 让XAML也可以像WinForm一样可视化设计，Blend 与Studio的区别
  20. Enable VT-x in your BIOS 怎么解决

热门文章

  1. 西北民族大学计算机科学与技术排名,2019西北民族大学专业排名
  2. 恭喜获赠CybreBunny（赛博兔）的足球巨星：C罗、梅西、内马尔、姆巴佩为
  3. 供水管网监测系统，供水管网压力监测系统
  4. 【分支语句与循环语句】
  5. linux定时关机命令_Windows系统中的几种快捷关机方式，欢迎大家补充
  6. 2021年起重机械指挥考试资料及起重机械指挥模拟考试题
  7. 因为1克能量，我发现了蚂蚁森林背后的灰色产业
  8. 形成了底蕴深厚的徽州地域文化的显著持征
  9. DTU灵活配置监控点位，自动生成json数据，Modbus协议 MQTT协议 （郑州新正圆)
  10. Progressive Web App