一、注册小程序帐户
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是小程序的脚本代码（必填）。在此文件中，您可以监视和处理小程序的生命周期函数，声明全局变量，并调用框架提供的丰富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是整个小程序的全局配置（必需），用于全局配置微信小程序，确定页面文件的路径，窗口性能，设置网络超时时间，设置多个标签，等等。接受一个数组，每个项目都是一个字符串，以指定小程序组成的页面。需要将微信小程序中每个页面的[路径+页面名称]写入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） page用于描述该页面，一个页面由四个文件组成，这里以主页索引为例，每个小程序页面由四个不同的后缀文件组成，名称相同相同的路径，例如：index.js，index.wxml，index.wxss，index.json。带有.js后缀的文件是脚本文件，带有.json后缀的文件是配置文件，.wxss后缀文件是样式表文件，以及.wxml后缀的文件这是一个页面结构文件。
index.js是页面的脚本文件（必需）。在此文件中，我们可以监视和处理页面的生命周期功能，获取小程序实例，声明和处理数据以及响应页面交互事件。
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.打开微信 Web开发人员工具，然后选择“本地小程序项目”。
2.填写小程序的AppID，项目名称，选择在第三步中编写的小程序实例文件夹，然后单击“添加项目”。
3.如果出现以下效果，恭喜，您的第一个小程序项目已成功编写！点击左侧边栏中的“编辑”，您也可以直接在右侧的编辑窗口中修改代码，保存（CTRL + S）并刷新（F5）生效。
4.如果要在手机上查看小程序项目的效果，请单击左侧边栏上的“项目”，单击“预览”以生成QR码，然后打开微信进行扫描，然后可以看到它。