可视化界面

目录树

page文件

对页面内容的操作
其分为index和logs两个文件

index文件

即首页文件
在里面添加字段会直接显示到模拟器中

logs文件

utils文件

存放公共文件，修改时间戳等

app.js

入口文件，即逻辑层（实现交互等内容）

app.json

配置文件，全局配置，包括小程序的路径，界面表现，网络延迟等

app.wxss

样式文件，设置颜色等……
比如在这里添加了color：red

模拟器中字体颜色就改成了红色
但其优先级不如在index文件中的.wxss文件
这个是公共样式，index.wxss文件是基础样式

project.config.json

整个项目配置文件，可以在本地设置中进行可视化修改，基本不用在代码中修改

sitemap.json

地图，即文件的地址

正式编写

几乎所有内容都是在index文件目录下编写的

清空原有的wxml 和 wxss
正式写入第一个程序

在同目录下的wxss中可以设置其格式

创建新文件夹

小程序不可能只有一个页面，当需要行的页面时可以有两种创建方式

逐个创建

右击pages文件，可以选择“新建文件夹”

但这个文件夹是空的，还需要右击新建的文件夹，创建page文件（最好和文件名保持一致）

这样一套页面的基础文件就建好了（js文件实现交互功能，json文件是全局配置，wxml文件是页面内容，wxss是内容颜色风格配置）

通过地址直接创建

打开app.json文件，这里可以看到当前所有页面文件的地址

在这里直接输入想要创建的文件夹及page文件（一定要在最后一行创建文件，否则会报错）

Ctrl+S保存后虽然没有在模拟器直接显示，但目录树已经存在此文件

想要显示？，直接移到最上端即可

如果还是不明显，打开创建后的文件中wxml文件，敲一行view标签，保存后即可显示

微信小程序开发页面介绍相关推荐

微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
微信小程序开发工具介绍及安装（中）
小程序开发工具的安装方法微信小程序开发工具的安装方法相对简单,并且适用于多个操作系统平台.以下是关于Windows.macOS和Linux三个平台上安装微信小程序开发工具的步骤和注意事项的详细介绍. ...
微信小程序开发工具介绍及安装（下）
开发工具的基本功能介绍微信小程序开发工具是一款强大的集成开发环境(IDE),旨在帮助开发者更便捷地创建.调试和发布微信小程序.它提供了丰富的功能和工具集,下面将对微信小程序开发工具的基本功能进行详细 ...
微信小程序开发界面介绍
这里是引用主要是简单的介绍一下微信小程序开发界面的各个文件先看下这个图片这是最简单的目录了 pages: 所有的页面都要在这里面创建,在这里面创建的页面需要在app.json里面添加一下路径如下 ...
微信小程序开发---页面生命周期
微信小程序开发---生命周期何为生命周期小程序全局[app.js]---生命周期小程序页面[pages/pagename.js]---生命周期何为生命周期生命周期是指一个事物从创建到销毁的一 ...
微信小程序开发页面总结-文档(ing)
公共样式定义 /* 公共样式 */ page{height: 100%;background: #f7f7f7; } view,image,input,text,button,textarea {bo ...
微信小程序开发页面无法显示，未注册报错
微信小程序开发 VM507 WAService.js:2 Page "pages/post/post" has not been registered yet 在对应的js文件中检 ...
微信小程序开发流程介绍
1&:起步一.申请账号: 点击 mp.weixin.qq.com/wxopen/ware- 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号. 登录 mp.weixin.qq.c ...
微信小程序开发指南介绍
一.小程序介绍与开发环境: 1.helloworld代码 [1]请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html ...
四十七、微信小程序开发页面结构WXML
这年头,一天不学习,天理难容. 还是赶紧复习微信小程序的知识,加大学习力度. 文章目录 WXML 数据绑定 WXML基本语法系统组件 WXML WXML(WeiXin Markup Language ...

微信小程序开发页面介绍