写给后端开发看的微信小程序开发教程（一）入门篇

本文作者：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

在改之前，先简单了解下wxml的标签，注意：这和html是不一样的，千万不要把html的标签写进来了。

但是，我们可以来做个类比：

• 小程序的