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

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

 

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

 

    ​1、注册小程序

 

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

 

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

 

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

 

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

 

    ​2、获取AppID

 

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

 

    3、安装微信开发工具

 

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

 

    ​4、集成开发环境

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

    创建小程序项目。

 

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

 

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

 

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

 

    6、创建app.js文件

 

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

 

    //app.jsApp({})

 

    7、创建一个helloworld页面

 

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

 

    //helloworld.wxmlHelloWorld

 

    8、注册helloword页面

 

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

 

    //helloword.jsPage({})

 

    9、创建app.json文件

 

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

 

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

 

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

 

    10、调试

 

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

 

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

 

    想美化页面显示

 

    如果你想美化页面显示样式。我们可以继续创建一个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文件只能作用于当前页面。

 

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