篇首语：本文由编程笔记#小编为大家整理，主要介绍了10分钟入门微信小程序开发：从环境搭建到开发出第一个程序。相关的知识，希望对你有一定的参考价值。

小程序简介

小程序是一种不需要下载安装即可使用的快速应用，它实现了应用“触手可及”的操作；用户扫一扫或搜一下即可打开应用，完全不需要安装，因此小程序不仅可提高的用户的应用体验，也方便应用的传扩散。

本文带大家快速入门小程开发，了解从环境搭建到开发出一个简单hello world程序，从而上手小程序开发，让你快速成功小程序开发人员。之后，想开发什么样的小程序，就可以自己研究和努力了。

下面，是循序渐经的步骤：

?1、注册小程序

在开发之前，当然需要先注册一个小程序账号。

进入“微信公众平台”进行注册。

这里需要注意的是邮箱必须是未被微信公众平台注册、未被微信开放平台注册、未被个人微信号绑定的才有效。

提交之后登录你注册用的邮箱，会收到一个条“激活你的微信小程序”的邮件，点击邮件中的激活链接去完善“信息登记”即可激活账户。

? 2、获取AppID

登录小程序账号之后我们需要先填写“小程序信息”，然后可以在左侧菜单栏中找到“开发”选项，点击进入该栏后进行点击tab中的“开发设置”选项。就可以看到属于我们的AppID，这是微信公众平台上的小程序ID。微信通过它来确定小程序“身份”及提供相应的功能接口。

3、安装微信开发工具

在“微信官方文档-小程序”的开发页面中，我们可以找到“工具”选项，选择适合自己电脑系统版本的进行下载（这里我用的是Windows 64），双击运行下载好的软件然后“下一步”到底即可，安装完开发者工具后会自动在桌面添加“微信开发者工具”快捷图标。通过点击“微信开发者工具”图标打开微信小程序开发工具，然后用自己的微信软件扫描二维码登录，就可进入微信web开发者工具。

? 4、集成开发环境

安装开发工具之后就可以进行开发了。

用你注册小程序的微信账号扫码登录“微信开发者工具”就可以开始创建小程序项目了。

下面是“微信开发者工具”打开项目之后的显示界面。

官方工具中的代码编辑功能很弱，只有基本的代码编辑功能根本无法满足撑项目快速开发的需求。

（不过调及试预览功能还是很强大的）。

所以我们可以使用“微信开发者工具”再搭配一款IDE来一起开发。比如：VSCode，VSCode是一款免费开源的轻量级跨平台代码编辑器，集成了大部分代码编辑的器的优点，集成GIT、代码调试、语法高亮。最主要是拥有强大丰富的插件系统，几乎支持所有主流的开发语言且运行稳定，系统内存占用率低非常适合搭建IDE。

5、开发第一个小程序开始：创建项目

创建小程序项目。

“微信开发者工具”支持小程序、小游戏、代码片段及公众号网页项目开发，默认选择小程序。

?点击右侧空白处的“+”号来创建新项目或者导入已有项目，这里的AppID就是前面注册小程序的时候获取的。

初始操作时，应该创建一个空目录，用于存放项目文件。

6、创建app.js文件

在目录中创建一个app.js文件，该文件作为项目的入口文件，通过App() 函数来注册一个小程序的应用。 该函数接受一个object参数(function 和 data)，比如小程序的生命周期函数。这里我们先不管那些生命周期函数，只要定义个空参数的App({})函数即可注册小程序。

//app.js
App({})

7、创建一个hello world页面

我们需要显示“Hello World”内容，所以这里我们需要创建一个页面。在目录中创建一个helloworld.wxml文件，这里我用个视图容器view标签来显示“Hello World”内容。

// helloworld.wxml
Hello World

8、注册helloword页面

小程序中的每个页面都需要在页面对应的 js 文件中进行注册，所以这里我们需要在目录中创建一个helloworld.js文件并通过Page() 函数用来注册一个页面。该函数同样接受一个 object参数，可以是该页面的初始数据、生命周期函数、事件处理函数等。这里我们还是先不管那些生命周期函数，只要定义个空参数的Page({})函数即可注册页面。

// helloword.js
Page({})

9、创建app.json文件

页面注册好了我们就需要来配置页面路径了，告诉小程序要加载的页面在哪里。这就需要我们在根目录下创建一个app.json文件，通过该文件来对小程序进行全局配置。而其中的pages对象就是用来指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。

注意：文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。???????数组的第一项代表小程序的初始页面（即首页），小程序中新增/减少页面时都需要对 pages数组进行修改。

// app.json文件
{
"pages": [
"helloworld" //由于该文件目前存放在根目录，所以这里直接填文件名
],
}

10、调试

接下来我们就可以打开“微信开发者工具”并切换到“导入项目”页面，在目录栏中选择我们的项目文件夹。AppID没有的可以选择游客模式，点击“导入”按钮即可。程序会自动生成project.config.json配置文件和sitemap.json站点地图配置文件（可以暂时忽略），在左侧的模拟器中我们可以看到在小程序中显示了我们的“Hello Word”内容。

?到这里我们就创建了一个最简单的“Hello Word”小程序。

想美化页面显示

如果你想美化页面显示样式。我们可以继续创建一个helloword.wxss文件，在这里我们可以WXML 的组件样式进行控制。WXSS的写法和CSS相似，很容易上手的！

到此，以上简单10步，10分钟。我们就开发出了一个小程序，就已入门小程序开发了。

你已经是一个小程序开发者了。

补充知识

小程序目录结构说明

一个小程序主体至少需要app.js和app.json这两个文件组成且必须放在项目的根目录（文件名也必须为app）。

app.wxss为全局样式表，主要是用来美化视觉样式的，没有也可以，也能实现功能。

而通常的小程序页面由四个文件组成，分别定义了页面的：结构、样式、功能逻辑、配置信息。

如下做简单介绍：

app.js文件

每个小程序都需要在 app.js 中调用 App 方法来注册小程序实例，是小程序的入口文件。

同时该文件也是用来定义小程序的全局数据和函数，控制、监听小程序的全生命周期。

定义的函数及数据都是全局共享的，其他页面可以直接使用全局函数和数据。

而生命周期函数可以针对不同场景可以调用不同的生命周期函数，如：

onlaunch：监听小程序初始化；

onshow：监听小程序显示；

onhide：监听小程序隐藏；

注意：App() 必须在 app.js 中注册且只有一个 App 实例，通过 getApp 方法可以获取到全局唯一的 App 实例，但不要在 App() 函数中调用 getApp() 方法，使用 this 就可以拿到 App 实例。

这里再讲一点高级技巧，对于将来你做小程序开发很重要：代码保护！

由文件名也可知，这是app.js是个js文件。而我们知道，js文件是明文的、小程序也是可以反编译的。如果你辛苦开发了一个小程序，被别人反编译，很轻松就可以获得你写的代码，很容易就可以修改、复制你的程序。

那么，我们需要有产品保护意识：代码是保护起来的。有一个平台，叫作JShaman，传统做前后端开发的程序员都知道，这是一个JS代码保护平台工具，可以把JS代码进行混淆加密，使代码不可读不可分析，其目的就是防止自己别的代码被别人复制修复了使用。

在小程序开发中，同样可以用到这个平台，可以把app.js中的代码经JShaman加密了，再发布小程序。这样即使别人反编译了你的小程序，他也没办法用里面的代码。

而且，经还有一个神奇的用于：过审。因为小程序很多了，很多互相拷贝的小程序也很多，代码几乎是一样的，而小程序不允许同样或雷同度过高的小程序发布，所以很多小程序卡在过审环节。而用JShaman加密代码后，过审就不会因为代码雷同而被卡。

回到正题，上面讲了app.js。下面再介绍小程序其它三个重要文件。

app.json文件

该文件是一个json对象，用于对小程序进行全局配置（该文件中不能有注释）。

它可以配置页面路径，窗口表现，tabBar标签导航，网络超时，debug模式，其中pages对象用来配置小程序的里面所有的页面路径（该对象是个数组且第一个是小程序的首页），页面路径不需要写任何后缀，系统会自动去加载同名的 .json、.js、.wxml、.wxss 文件。window对象用于设置小程序的窗口表现，包括状态栏、导航条、标题、窗口背景色等。tabBar对象用于设置标签导航，就是小程序窗口底部的菜单栏，可以实现快速切换页面。

WXML文件

WXML是一套类似html的标签语言，是用来构建页面结构的。标签虽然与HTML有点不同但用法基本一致，同时还具备了类似Vue框架的特性，支持列表循环、条件渲染、模板引用及数据绑定等功能。一段完整的WXML语句由一个开始标签和一个结束标签组成，在标签中可以是内容也可以是其它WXML标签。这里需要注意的是WXML要求标签必须是严格闭合的，没有闭合将会导致编译错误。

WXSS文件

WXSS是一套样式语言，用于描述 WXML 的组件样式。通过定义WXSS来控制页面的呈现样式的，这个跟HTML中的CSS功能差不多（WXSS 具有 CSS 大部分特性并在CSS基础上进行了扩充以及修改）。app.wxss与页面中的.wxss文件不同之处在于它的作用域是全局，而页面中的.wxss文件只能作用于当前页面。

掌握以上内容，你便入门了小程序开发，是名小程序开发人员了。