本文作者：kelly， 原创文章，转载请注明出处。
很多Java的同学问到，微信小程序怎么开发，怎么创建一个小程序项目，和普通的网页有什么区别。嗯~~ ， 还是觉得有必要写一个面向后台开发人员的微信小程序教程，教程重点在于小程序的搭建和快速开发，以及如何对接Java后台，不做详细样式效果处理，减少不必要的信息量，但是阅读该课程的同学有html及js基础最好。
首先大致给同学们解释一下微信公众号和微信小程序的区别，二者虽然都是依附于微信应用的，但是定位却不同。
- 微信公众号以营销与信息传递为主，适合内容创作者，及粉丝引流，结合H5，公众号也能够提供一些简单交互功能。
- 微信小程序不支持关注，没有粉丝体系、群发消息等营销手段，但使用方便，直接扫码或者点击就能打开，主要以服务为主，相比公众号运行起来更流畅，接近原生APP的体验，能够提供更加复杂的产品与服务，比如可以调用原生的各种接口，像网络状态、罗盘、重力、地理位置、拨打电话等等。
一.注册微信小程序
公众号和小程序都可以单独注册，但是大部分真正运营的要用上高级功能，都要进行认证，认证费用每年300元，如果有认证的公众号就可以在公众号的后台，利用公众号的认证信息快速注册小程序并免费认证，这样会方便很好。
如果没有公众号的，可以在该地址单独注册小程序：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
如果你只是想体验一下小程序开发，不是真正运营使用，可以不用去注册正式的小程序，因为微信官方为了方便开发者开发和体验小程序的能力，提供了测试号进行开发测试，以及真机预览体验。
测试号申请地址：
https://developers.weixin.qq.com/weloginpage?redirect_url=%2Fsandbox
申请测试号的过程非常简单。只需访问申请地址，并扫码登录后，即可查看到已为自己分配好的测试帐号信息。
二.下载开发工具
开发微信小程序必须要下载官方提供的开发工具来进行编译，不然我们没有办法看到效果。
下载地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
工具使用手册 ：
https://developers.weixin.qq.com/miniprogram/dev/devtools/page.html
三.创建小程序项目
打开工具，选择小程序项目，并创建新项目。
点击测试号，工具会自动填入你的测试号的信息，当然，如果你已经注册了正式的小程序，就登录小程序后台找到AppID，拷贝进去。
image.png
点击新建按钮，项目创建成功，可以看到你自己的头像和昵称，这是官方提供的HelloWorld页面。
image.png
四.项目文件结构介绍
image.png
上图是创建好项目之后，我们可以看到的项目文件结构。在进行开发之前，我们先来一起了解一下。
- pages目录：用来存放小程序页面，图中该目录下包含了两个小程序页面：一个叫index，一个叫logs。
小明同学：那怎么才算是小程序的页面呢？
答：其实index和logs名称的那个文件夹，并不是页面，真正的页面是由4个相同名称，但类型不同(js,json,wxml,wxss)的文件组成的。那个文件夹的作用只是方便分类管理而已。像下图，也是pages下存放了2个页面，也没错，但是就问你一句，丑不丑？以后页面多咋办？
image.png
一个小程序页面由四个文件组成，分别是：
| 文件类型 | 必需 | 作用 |
|---|---|---|
| js (相当于以前的js文件) | 是 | 页面逻辑 |
| wxml (相当于以前的html文件) | 是 | 页面结构 |
| wxss (相当于以前的css文件) | 否 | 页面样式表 |
| json | 否 | 页面配置 |
一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表 |
-
app.json文件：用来对小程序进行全局配置，决定页面的路径、窗口表现、设置网络超时时间、设置底部tab栏 等。
-
app.js文件：用来创建小程序实例对象，整个小程序只有一个 app 实例，还可绑定生命周期回调函数、监听错误等。
-
app.wxss文件：用来配置一些全局的样式。
-
utils目录：用来存放工具包，比如一些日期处理工具，加密工具，格式化工具等等。
-
project.config.json文件：小程序项目的相关开发配置，用来配置小程序的AppID，项目名称等等，类似于idea项目中的*.iml配置文件。
小明同学：这么多的文件，这些文件都是必须存在的吗？
答：当然不是，这是官方提供的HelloWorld项目，目的是把项目结构给大家搭建好，里面有的文件是可以删的，比如pages里面的两个页面，我们做自己的小程序，那肯定是自己来建页面嘛，但是，如果自己不确定哪些文件必须存在，哪些文件可以删的，那就先别动，等你写多几个功能，熟悉一下。
五.创建小程序页面
打开app.json文件，可以看到里面有个pages属性，用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。比如图中pages配置了两个页面，就是之前说的index和logs页面，我们每新建一个页面，这里都必须配置进去，才可以正常使用。
image.png
数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
现在让我们来创建一个新的页面吧~
我们用最快速的办法，直接修改app.json文件，在里面的pages里面添加"pages/hello/hello"，代表页面的路径，按下ctrl+s保存后开发工具可以自动生成相关文件。
具体效果如下图：
image.png
这样，我们自己的小程序页面就创建成功啦！
六.修改页面显示内容
之前已经介绍过，小程序的每一个页面，都是由4个文件（wxml,wxss,js,json）组成。
现在我们想要修改页面显示内容，首先就是修改wxml文件(相当于网页开发中的html文件)。
打开hello.wxml文件，可以看到以下内容
<!--pages/hello/hello.wxml -->
<text>pages/hello/hello.wxml</text>
在改之前，先简单了解下wxml的标签，注意：这和html是不一样的，千万不要把html的标签写进来了。
但是，我们可以来做个类比：
- 小程序的<!-- -- > 跟html中注释作用是一样的
- 小程序的text标签是行内元素，类似html中的span标签
- 小程序的view标签是块级元素，类似html中的div标签
前面说的text和view是小程序中最基本的标签，但其实小程序还提供了很多很方便的标签，可以处理更高级的功能，比如video标签可播放视频，还可以带弹幕功能；swiper滑块标签，可实现banner轮播图功能；map地图标签；表单相关标签等等，这里不一一列出，有需要的可以自行查阅官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/
修改页面布局及内容：
image.png
另外，hello.wxss文件是页面布局文件对应的样式文件，无须手动引入，在文件中直接添加样式类即可生效。如下例子：
hello.wxss： 声明样式类
.view-class{
color: red;
}
hello.wxml ：使用样式类
<view class="view-class">广州今日天气：</view>
<text>晴</text> <text>26度</text>
效果如下：
image.png
小明同学：那我是不是可以自己完成一个完整的小程序应用了呢？
答：其实开发小程序就相当于网页开发一样，一个完整的应用，若想要处理业务，处理数据，还需要有后端服务器支持，而小程序仅仅是作为单独的一个前端项目，这种其实是属于前后端分离的架构。下一篇，让我们来进一步了解小程序中的组件吧。
网友评论