一、注册小程序帐户

1.进入微信公众平台，注册一个小程序帐号，并根据提示填写相应的信息。

2.成功注册后，进入主页，然后在小程序发布过程->小程序开发和管理->配置服务器中单击“开发人员设置”。

3.将获得一个AppID并记录该AppID，该ID将在以后创建项目时使用。

注意：如果您想使用非管理员的微信帐户在手机上体验小程序，我们还需要操作“绑定开发者”。也就是说，在“用户身份”-“开发人员”模块中，绑定需要体验小程序的微信帐户。在本教程中，默认帐户注册和体验都使用管理员的微信帐户

二、下载微信网络开发人员工具

为了帮助开发人员简单有效地进行开发，微信小程序启动了一个新的开发人员工具，该工具集成了开发和调试，代码编辑和程序发布功能。

1.下载页面：

根据系统，选择相应的工具版本进行下载

2.工具包含三个页面卡，用于编辑，调试和项目：

（1）编辑区域可以执行基本操作，例如编写代码以及向当前项目中添加，删除和重命名文件

（[2）程序调试具有三个主要功能区域：模拟器，调试工具和小程序操作区域

（3）项目页面卡具有三个主要功能：显示当前项目详细信息，提交预览，提交上传和项目配置

注意：启动该工具时，开发人员需要使用已成功在后台绑定的微信帐户来扫描QR码以登录。所有后续操作将基于该微信帐户

三、编写小型程序的示例

1.示例目录结构

test

├─ page

│ └─ index

│ ├─ index.js

│ ├─ index.json

│ ├─ index.wxml

│ └─ index.wxss

├─ app.js

├─ app.json

└─ app.wxss

2.示例文件说明和源代码

一个小程序包含一个应用程序（主要部分）和多个页面（页面）

（1） app用于描述整个程序，它由三个文件组成。.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件，必须将其放置在项目的根目录中。

app.js是applet的脚本代码（必需）。在此文件中，您可以监视和处理applet的生命周期功能，声明全局变量，并调用框架提供的丰富API。

App({

onLaunch: function () {

console.log('App Launch')

},

onShow: function () {

console.log('App Show')

},

onHide: function () {

console.log('App Hide')

},

globalData: {

hasLogin: false

}

})

app.json是整个applet的全局配置（必需）。它用于全局配置微信小程序，确定页面文件的路径，窗口性能，设置网络超时以及设置多个选项卡。接受一个数组，每个项目都是一个字符串，以指定小程序组成的页面。微信小程序中每个页面的[路径+页面名称]需要写在app.json的页面中，页面的第一页是小程序的主页。

{

"pages":[

"page/index/index"

],

"window":{

"navigationBarTextStyle": "black",

"navigationBarTitleText": "欢迎页",

"navigationBarBackgroundColor": "#fbf9fe",

"backgroundColor": "#fbf9fe"

},

"debug": true

}

app.wxss是整个小程序的通用样式表（不是必需的）。

page {

background-color: #fbf9fe;

height: 100%;

}

.container {

display: flex;

flex-direction: column;

min-height: 100%;

justify-content: space-between;

}

（2）页面用于描述页面，一个页面由四个文件组成，这里以主页索引为例，每个小程序页面由四个不同的后缀文件组成，它们在相同的名称下路径，例如：Index.js，index.wxml小程序开发，index.wxss，index.json。后缀.js的文件是脚本文件，后缀.json的文件是配置文件，.wxss后缀的文件是样式表文件，以及.wxml后缀是Page结构文件。

index.js是页面的脚本文件（必需）。在此文件中，我们可以监视和处理页面的生命周期功能，获取applet实例，声明和处理数据以及响应页面交互事件。

Page({

data: {

title:'小程序',

desc:'Hello World!'

}

})

index.wxml是页面结构文件（必需）。

标题：{{title}}

描述：{{desc}}

index.wxss是页面样式表文件（不是必需的）。当存在页面样式表时，页面样式表中的样式规则将层叠并覆盖app.wxss中的样式规则。如果不指定页面的样式表，则还可以直接使用页面的结构文件中app.wxss中指定的样式规则。

.header {

padding: 80rpx;

line-height: 1;

}

.title {

font-size: 52rpx;

}

.desc {

margin-top: 10rpx;

color: #888888;

font-size: 28rpx;

}

index.json是页面配置文件（不是必需的）。当存在页面配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。无需在此处指定。

提示：

a。为了方便开发人员减少配置项，小程序规定描述页面的四个文件必须具有相同的路径和文件名

b。小程序提供了丰富的API，您可以根据需要选择（）

四、测试小程序示例

1.打开微信网络开发人员工具，然后选择“本地小程序项目”。

2.填写小程序的AppID和项目名称，选择在步骤3中编写的小程序实例文件夹，然后单击“添加项目”。

3.如果出现以下效果，恭喜，您的第一个小程序项目已成功编写！点击左侧边栏中的“编辑”，您也可以直接在右侧的编辑窗口中修改代码，保存（CTRL + S）并刷新（F5）生效。

小程序开发

4.如果要在手机上查看Mini Program项目的效果，请单击左侧边栏上的“项目”，单击“预览”以生成QR码，打开微信进行扫描，即可看到它。