微信小程序入门①小程序目录结构与新页面创建

小程序目录结构与新页面创建

选用工具：微信开发者工具，根据自己的电脑情况进行下载安装。

下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

一、小程序目录结构

打开微信开发者工具，选择测试号，点击确定。

进入到主页面，我们需要微信扫码登录，登录后页面如下所示。

在这里我们能够清楚地看到目录结构。

文件后缀名含义：

.js 逻辑层
.json 配置项
.wxss 样式文件 （类似css）
.wxml 页面  （类似html）

前期界面主要写在pages/index/index.wxml里。

二、新页面创建

在资源管理器中pages目录下index文件里，包含index.wxml和index.wxss，我们的第一个小程序页面就从此开始。

第一个页面

在index.wxml里创建一个box

<view class="box">Hello World</view>

在index.wxss里进行样式配置

.box{width: 100px; height: 100px; background: cadetblue;}

Ctrl+S保存一下，即可运行出以下截图：

如果成功运行，恭喜你，成功的迈入了小程序开发的大门！