首先，你需要注册一个小程序账号。需要用未注册公众号的邮箱注册。注册过程需要大量的认证，比较繁琐。如果暂时只是试水，没有公布的计划，那么只需要填写基本信息，不需要完成微信认证。

之后就可以用注册的账号登录公众平台了。

然后，在主页左侧的列表中单击设置，然后在设置页面中选择开发设置以查看AppID。AppID可用于在开发工具中注册，并使用开发工具的高级功能。可以在官网下载开发工具。

第一个项目:

打开开发者工具，选择applet选项，然后直接点击“添加项目”按钮。在这一步，我们可以填写注册时使用的AppID。

如果项目目录中的文件是空文件夹，将提示您是否创建快速启动项目。

选择“是”，开发者工具将帮助我们在开发目录中创建一个简单的演示。

这个演示有一个完整的applet的可能框架。

1.结构

我们先来看看官方演示中包含的目录:

App.js: applet逻辑，生命周期，全局变量。

App.json:小程序公共设置，导航栏颜色等。，无法评论。

App.wxss: applet公共样式，类似CSS。

applet页面的组成如下:

每个小程序页面都是在同一路径下由四个不同的同名后缀文件组成，比如:index.js、index.wxml、index.wxss、index.json

微信小程序中每个页面的路径和文件名都需要写在app.json的pages中，pages数组中的第一页就是小程序的首页。

这四个文件根据其功效可分为三个部门:

设置:json文件

逻辑层:js文件

视图图层:wxss.wxml文件

在iOS上，applet的逻辑代码运行在JavaScriptCore中，而在Android上，这个义务交给了X5内核。

在开发工具上，小程序的JavaScript代码运行在NW.js(Chrome内核)中。这也导致了开发工具的效果和实际效果之间的平衡。

2.成分

品牌营销成功的关键是什么？

微信提供了很多组件，主要分为八种:

其中包括视图、滚动视图、按钮、表单等常用组件，还提供了mapcanvas。

组件主要属于视图层，通过WXML结构化，类似于HTML。样式由WXSS定义和修改，其语法和用法类似于CSS。

组件用法语法示例:

lt gt lt gt

3.应用程序接口

网络

媒介

数据

位置

装备

连接

开发界面

网络请求接口包含了流行的HTTPS请求，支持上传、下载和Socket，基本满足了我们开发中需要的网络需求。

这些API属于逻辑层，用JS逻辑文件编写。

使用案例:

wx.getLocation({ type: ‘wgs84 ‘，success:function(RES){ var latitude = RES . latitude var longitude = RES . longitude var speed = RES . speed var accuracy = RES . accuracy } })

你可以去官方文档——API看看其他API怎么用。

编译并运行

1.模拟器调试

我们可以使用微信提供的开发者工具中的模拟器，看看小程序运行的效果。

我们之前提到过，小程序的操作在底层是不一样的，这也导致了在模拟器上的效果，会和在手机上有些不一样。

2.真机调试

在左侧的选项栏中，选择一个项目，然后点按“预览”以生成QR码。用管理员的微信号扫描一下就能在真机上看到实际效果。