微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)

最新推荐文章于 2024-05-15 04:32:54 发布
最新推荐文章于 2024-05-15 04:32:54 发布
阅读量1.3w 收藏 7
点赞数 8
分类专栏： 微信开发 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38463737/article/details/119384538
版权

微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)

【1】首先在pages文件夹下创建一个页面文件夹，比如我打算创建个人中心,我创建一个home文件夹如下

在这里插入图片描述

【2】 右键home文件夹，选择新建Page

在这里插入图片描述

【3】之后输入home，回车之后就建立页面的四个文件了。（可以不和文件夹同名，但一般推荐同名）

四个文件分别是：home.js，home.json，home.wxml， home.wxss

在这里插入图片描述

集电极
关注
  • 8
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
微信小程序设计之页面文件pages
珞瑜的博客
10-29 1151
小程序一般会在根目录下创建一个pages文件夹用于保存所有页面文件，每个页面有自己独立的二级目录，如下图所示。由上图可见，该项目当前由index和 logs两个页面组成。wxml文件:用于构建当前页面的结构，包括组件、事件等内容用户最终看到的页面效果就是由该文件显示出来的。可选页面，用于设置当前页面的样式效果，该文件规定的样式会覆盖app.wxss全局样式表中产生冲突的规定,但不会影响其他页面。js文件:可选页面，用于设置当前页面的逻辑代码。json文件。
微信小程序开发实例：猜成语游戏(源代码).zip
06-18
- **pages** 文件夹：包含小程序的各个页面，每个页面有自己的独立的 js、json、wxml 和 wxss 文件，分别对应页面逻辑、页面配置、页面结构和页面样式。 - **utils** 文件夹：存放工具类函数，可以复用的通用逻辑...
微信小程序——创建组件及引用
柠檬酸
09-26 2107
一、先新建组件文件夹，如果有多个组件，创建一个组件目录component，我这里就一个组件,就不单独放一个目录了 在pages下右键创建nav组件目录，在nav目录右键新建组件 ，组件文件navigation 二、配置组件 首先是navigation.json文件 component：true { "component": true, "usingCompone......
微信小程序开发系列（四）·小程序配置文件详细介绍·pages配置以及window配置_小程序开发 pages
最新发布
2401_84008985的博客
05-15 612
JSON是一种轻量级的数据格式，常用于前后端数据的交互，但是在小程序中， JSON扮演的配置项的角色，用于配置项目或者页面属性和行为，每个页面或组件也都有一个对应的 json 文件。小程序中常见的配置文件有以下几种:① app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由。② 页面.json：小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等。
微信小程序怎么新建pages页面新建目录#右键
weixin_61442329的博客
07-05 116
我翻找最新的教学视频发现也有人有，但是用的是macos就让我以为给不同系统也不一样。写这篇的时候注意了一下，上面写的云开发
微信开发者工具的使用和各个文件的作用
sinat_58088248的博客
02-22 3369
一.首先点击微信开发者工具 二.创建项目文件，如果有APPID或者需要发布的话就使用自己注册的 appid。一般情况下开发或者训练的话用测试号就行了 ，开发模式选择小程序，选择不使用云服务点击确定即可 三.介绍以下各个文件的作用 1.基本的项目目录 2.app.json文件介绍 2.1pages字段 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 2.2window字段 定义小程序所有页面的顶部背景颜色，文字颜色定义等。 2..
微信小程序开发工具中如何创建与pages目录同级的目录
英勇的博客
04-17 3761
踩坑 我原本是想创建一个images目录，让它与pages目录同级，如下图： 但是结果出乎我的意料，我创建的目录跑到pages目录里面了，如下图： 解决办法 其实很简单，就是在创建目录之前，不要让pages目录处于选中的状态，不然你创建的目录就会跑到pages目录下面。那么如何不让pages目录处于选中状态呢？其实只需要点击一下空白的地方就可以了，如下图所示： ...
微信小程序开发快速上手【小程序JS开发快速入门详解】
一键难忘的博客
02-10 2180
一，前言 为了最近的作业忙了许久，今天终于把最近的大作业都搞定了，抽空来学习一下，微信小程序的开发。 从今天开始，记录一下，微信小程序从0到1的开发过程。 二，准备 目标是微信小程序，我们先来到官网，点击下图，查看微信小程序的开发文档。 点击工具—》下载—》下载稳定版本即可，注意下载对应系统的即可。 安装完成，登录账号，如下图： 三，目录介绍 基本目录如下： pages：页面，用来存放页面的。 下有二级目录—index首页文件夹，存放首页样式。 logs存放日志文件夹。 utils：工具，自定义的工
微信小程序 - 新建页面以及 .js .json .wxml .wxss 的作用
卡尔特斯
10-20 3759
在小程序中，一个完整的页面是由 .js .json .wxml .wxss 四个文件组成： .js 里面编写一些生命周期钩子，事件处理，全局数据… .json 里面编写一些页面配置，页面的 .json 配置会覆盖 app.json 的配置… .wxml 里面编写一些页面内容，UI标签，数据绑定… .wxss 里面编写一些 .wxml 里面的 css 样式，它跟普通 css 文件又有点区别，.wxml 文件可以导入其他的 .wxml 文件进来使用… 新建页面方式一（相当于自动做了一遍方式二里面的所有操作
使用微信开发者工具新建一个小程序及文件解析及简单微信小程序的页面
共勉
02-25 3170
在我们下载微信开发者工具后，打开工具，第一次需要扫码登录，登录后，如下图，选择新建一个小程序 我的这个是新建了一个的了，点击加号新建，然后填入信息，项目名称，项目存储的地址，以及注册小程序时的APPID，再选择不使用云服务，语言选择默认的JavaScript 看一下创建好了的小程序的所有文件夹下面的文件是什么。如下图： 文件都看过了，接下来就是文件下面的内容了，首先是app.json 全局入...
微信聊天微信小程序源码.zip
07-13
- pages：小程序的页面目录，每个页面由.wxml、.wxss、.js和.json四个文件组成，分别对应视图层、样式、逻辑和配置。 - app.js：全局配置文件，定义小程序启动时的初始化逻辑和生命周期事件。 - app.wxss：全局...
微信小程序学习(4)-系统配置app.json详解
10-20
在微信小程序开发中，`app.json` 文件起着至关重要的作用，它负责全局配置小程序的各种属性，从而影响到小程序的整体表现和用户体验。本篇将详细解析 `app.json` 的各个配置项及其用法。 首先，`app.json` 文件主要...
微信小程序学习demo：基础接口演示demo.zip
01-25
- `pages`目录：包含各个页面的文件夹，每个页面有对应的`wxml`、`wxss`、`js`和`json`文件。 - `project.config.json`：项目配置文件，用于设置小程序的一些属性和构建选项。 通过这个基础接口演示demo，你可以...
微信小程序学习demo：从服务器获取数据，并且数据绑定组件.zip
01-25
此外，`weixin-master`可能是一个包含完整微信小程序项目源码的文件夹，里面通常会有`app.js`（应用主脚本）、`app.json`（应用配置文件）、`pages`目录（存放页面相关的文件）等结构。开发者可以查看并学习这个示例...
简单讲解并梳理微信小程序默认几个文件和文件夹结构及其作用
weixin_45966674的博客
02-24 603
utils 这个目录是用来放各种工具的 例如 我们自己写的 一些 js文件 比如格式化时间的逻辑方法 正则验证的文件等等。app.json 这个是我们整个小程序中全局配置文件 通过它可以对全局的页面 以及窗口 设备这些进行配置。app.js 这是整个项目的 入口文件 它的作用有点像vue项目的main 可以加载很多公共内容。app.wxss 这是一个全局的样式文件 这里写的样式代码 会对全局的页面生效。它的作用在于存储整个项目所有的 page页面文件。它各个文件 和 整体结构。
从零开始编写一个微信小程序（微信开发者工具+JS+WuxUI组件库+云开发）万字整理，建议收藏！
孤影风晨的博客
08-16 2660
笔者利用假期时间，三周入门了前端和小程序，然后又花了很长时间和伙伴一起写程序，参加微信小程序大赛，虽然比赛结果不尽如人意，但是过程中学会了很多东西；了解了ES6、同步异步操作、组件、云开发等等技术，此文内为我开发魔镜小程序的代码和笔记，上传CSDN方便日回顾......
微信小程序开发之编译自动生成新文件的解决办法
weixin_64158899的博客
04-25 2456
文章目录 前言微信小程序开发中一自动编译就自动生成一些wxss,wxml，文件的解决办法一、 问题详情二、为什么会出现这个情况三、解决办法1.找到app.json文件夹下的具体页面详情2.删除自己不想要的具体的pages文件夹总结 前言 微信小程序开发中一自动编译就自动生成一些wxss,wxml，文件的解决办法 提示：以下是本篇文章正文内容，下面案例可供参考 一、 问题详情 示例：! 例如，图中的a.js文件，a.wxml文件的自动生成 二、为什么会出现这个情况 这个版本的微信开发者工具的一个默认的一个
微信小程序学习二--小程序创建流程
糖果云专栏
01-10 322
  1、在项目根目录创建app.js、app.json、app.wxss(非必须的) 2、在app.js脚本中，用App()方法注册（声明）小程序 3、在app.json中用花括号创建一个对象 4、创建pages目录 5、在pages目录中创建首页对应的目录index 6、在index目录中创建首页对应的index.js、index.json、index.wxss、index.wxml文件 ...
教程&硬货｜微信小程序开发之基于vue的微信开发工具JS文件解读（一）
Senoh的博客
05-15 4980
鉴于前段时间出的第一篇记录安装Nodejs和HBuilderX搭建、部署微信小程序开发环境（一），有小伙伴问到关于微信开发工具的使用，特出本文带大家简单了解一下，开始“扫盲”！主要的工作区：文件必需作用app.js是小程序逻辑app.json是小程序公共配置app.wxss否小程序公共样式表文件类型必需作用js是页面逻辑wxml是页面结构json否页面配置wxss否页面样式表。
用微信小程序开发者工具，编写一个可以实现实时输入用户名和密码的页面，并展示js json wxml wxss 和app.js app.json等全部代码
06-06
好的，以下是实现实时输入用户名和密码的微信小程序页面的代码： wxml： ```html <view class="container"> <view class="input-area"> <input placeholder="请输入用户名" bindinput="inputUsername" /> <input placeholder="请输入密码" type="password" bindinput="inputPassword" /> </view> <view class="result-area"> <text>您输入的用户名是：{{username}}</text> <text>您输入的密码是：{{password}}</text> </view> </view> ``` wxss： ```css .container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .input-area { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 100rpx; } .input-area input { width: 500rpx; height: 80rpx; font-size: 36rpx; padding-left: 20rpx; margin-bottom: 20rpx; border: 2rpx solid #ccc; border-radius: 10rpx; } .result-area { margin-top: 80rpx; font-size: 36rpx; } ``` js： ```js Page({ data: { username: '', password: '' }, inputUsername(e) { this.setData({ username: e.detail.value }) }, inputPassword(e) { this.setData({ password: e.detail.value }) } }) ``` app.json： ```json { "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "实时输入用户名和密码", "navigationBarTextStyle": "black" }, "sitemapLocation": "sitemap.json" } ``` app.js： ```js App({ onLaunch: function () { // Do something initial when launch. }, onShow: function () { // Do something when show. }, onHide: function () { // Do something when hide. }, onError: function (msg) { console.log(msg) }, globalData: 'I am global data' }) ``` json： ```json { "usingComponents": {} } ``` 以上就是全部代码，您可以将以上代码复制到微信小程序开发者工具中对应的文件中，即可实现实时输入用户名和密码的页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值