前言

现在微信小程序越来越火了，相信不少人都通过各种途径学习过微信小程序或者尝试开发，作者就是曾经由于兴趣了解开发过微信小程序，最终自己的毕业设计也是开发一个微信小程序。所以现在用这篇博客记录我之前开发的一些经验和一些心得吧。


主要内容

springboot后端架构构建

小程序项目构建

小程序api调用

后台resetful接口编写

小程序调用后台接口

免费的https申请

linux下部署上线


微信小程序项目构建

这些基础的东西我就不过多介绍，大家在刚开始开发的时候一般都没有自己的服务器及域名，所以大家在本地编写的时候，在“详细”下的“项目设置”里面将“不校验域名安全性”勾选。

至于微信小程序的组件，即前端页面的开发希望大家耐住寂寞认真在微信开发平台上，组件https://developers.weixin.qq.com/miniprogram/dev/component/及api：https://developers.weixin.qq.com/miniprogram/dev/api/


后端详解

我在后端编写主要是用java，当然对其他开发语言熟悉的也可以使用其他语言开发后端。现在我就java编写后端api的讲解。主要框架springboot，开发工具myeclipse，服务器阿里云服务器。

创建一个maven项目，导入相关依赖：

pom.xml依赖


    <!-- 统一版本控制 -->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>1.5.9.RELEASE</version>
	</parent>
	<dependencies>
		<!-- freemarker渲染页面 -->
		<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-freemarker -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-freemarker</artifactId>
		</dependency>

		<!-- spring boot 核心 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<!-- springboot整合jsp -->
		<!-- tomcat 的支持. -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
			<exclusions>
				<exclusion>
					<groupId>org.springframework.boot</groupId>
					<artifactId>spring-boot-starter-tomcat</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
	</dependencies>

在配置文件src/main/resources/下创建application.properties文件可以修改一些配置参数等。
#jsp支持
spring.mvc.view.suffix=.jsp
spring.mvc.view.prefix=/WEB-INF/jsp/
#this is set port
#server.port=80
server.port=443
#添加ssl证书
#ssl证书文件名
server.ssl.key-store=classpath:xxxxxxx.pfx
server.ssl.key-store-password=xxxxxxxx
server.ssl.keyStoreType=xxxxxxxx

在实际项目中可能涉及数据库，还要整合mybatis，在文章中，我仅仅做测试就不做使用数据库的测试。

首先创建springboot的入口程序:app.class下面贴上代码：
@ComponentScan(basePackages= "com.bin")//添加扫包@ComponentScan(basePackages= "")
@EnableAutoConfiguration
public class App{

	//启动springboot
	public static void main(String[] args) {
		SpringApplication.run(App.class, args);
	}
}

启动项目时直接右击run即可。

在写一个测试的controller进行微信小程序与java后端实现通信，controller代码如下：
@RestController
@SpringBootApplication
public class ControllerText {
	
	@RequestMapping("getUser")
	public Map<String, Object> getUser(){
		System.out.println("微信小程序正在调用。。。");
		Map<String, Object> map = new HashMap<String, Object>();
		List<String> list = new ArrayList<String>();
 		list.add("zhangsan");
 		list.add("lisi");
 		list.add("wanger");
 		list.add("mazi");
 		map.put("list",list);
		System.out.println("微信小程序调用完成。。。");
		return map;
	}
	
	@RequestMapping("getWord")
	public Map<String, Object> getText(String word){
		Map<String, Object> map = new HashMap<String, Object>();
		String message = "我能力有限，不要为难我";
		if ("后来".equals(word)) {
			message="正在热映的后来的我们是刘若英的处女作。";
		}else if("微信小程序".equals(word)){
			message= "想获取更多微信小程序相关知识，请更多的阅读微信官方文档，还有其他更多微信开发相关的内容，学无止境。";
		}else if("西安工业大学".equals(word)){
			message="西安工业大学（Xi'an Technological University）简称”西安工大“，位于世界历史名城古都西安，是中国西北地区唯一一所以兵工为特色，以工为主，理、文、经、管、法协调发展的教学研究型大学。原中华人民共和国兵器工业部直属的七所本科院校之一（“兵工七子”），陕西省重点建设的高水平教学研究型大学、陕西省人民政府与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位，是一所以\"军民结合，寓军于民\"的国防科研高校。";
		}
		map.put("message", message);
		return map;
	}
	
	@RequestMapping("")
	public String getText(){
		return "hello world";
	}


}

至此简易的后端框架及测试基本完成。

说明：@RestController与@Controller注解的区别@RestController相当于两个注解，它能实现将后端得到的数据在前端页面（网页）中以json串的形式传递。而微信小程序与后台之间的数据传递就是以json报文的形式传递。所以这就是选择springboot框架开发小程序后端的主要原因之一。可以方面我们进行小程序的后端开发。

小程序发起网络请求

在完成了小程序的后端开发，下面进行小程序端发起网络请求。

下面以一个简单的按钮请求数据为例：

wxml文件

<button bindtap='houduanButton1'>点击发起请求</button>
<view wx:for="{{list}}">
    姓名：{{item}}
  </view>

js文件

 /**
   * 页面的初始数据
   */
  data: {
    list: '',
    word: '',
    message:''

  },
  houduanButton1: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:443/getUser',
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)//打印到控制台
        var list = res.data.list;
        if (list == null) {
          var toastText = '数据获取失败';
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
        } else {
          that.setData({
            list: list
          })
        }
      }
    })
  }

主要调用的api就是wx.request，想知道将详细的介绍大家可以去微信公众平台。

接下来以搜索类型的请求为例：

wxml文件：
 <input type="text" class="houduanTab_input" placeholder="请输入你要查询的内容" bindinput='houduanTab_input'></input>
  <button bindtap='houduanButton2'>查询</button>
  <view wx:if="{{message!=''}}">
    {{message}}
  </view>

js文件：变量的定义见上一个js文件
//获取输入框的内容
  houduanTab_input: function (e) {
    this.setData({
      word: e.detail.value
    })
  },
  // houduanButton2的网络请求
  houduanButton2: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:443/getWord',
      data:{
        word: that.data.word
      },
      method: 'GET',
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)//打印到控制台
        var message = res.data.message;
        if (message == null) {
          var toastText = '数据获取失败';
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
        } else {
          that.setData({
            message: message
          })
        }
      }
    })
  }

至此已经完成了简易的微信小程序端与java后端进行通信。

现在可以在启动后端项目在微信开发工具上进行测试。

演示效果：





所以至此已经完成了小程序的前后端通信。

https申请

其实也不算什么申请，在购买域名之后可以申请免费的ssl证书，在前面的配置文件application.properties中有证书的配置，将证书的pfx文件直接添加到后端项目下即可。
购买服务器部署后端api代码

对于springboot项目，本人建议打jar，直接在服务器上部署即可，在服务器上只需要安装对应版本的jdk即可。项目部署命令：

我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。

运行命令： nohup java -jar helloworld.jar &

nohup的意思不挂服务，常驻的意思，除非云服务器重启，那就没法了；最后一个&表示执行命令后要生成日志文件nohup.out。

当然还可以使用java -jar helloworld.jar
源码：链接: https://pan.baidu.com/s/1PfByFfEgqkVALcc3PRhn9w 提取码: c7yf
结束语：由于时间篇幅问题，本人介绍的内容很有限，希望对这方面有兴趣的你能有帮助。共同进步。

觉得有帮助，给个赞赏吧。给赞赏的优先同意qq或者微信，问问题秒回复等[滑稽]，谢谢老铁。

帐号相关流程
注册范围
企业
政府
媒体
其他组织
换句话讲就是不让个人开发者注册。 ?
填写企业信息
不能使用和之前的公众号账户相同的邮箱,也就是说小程序是和微信公众号一个层级的。
填写公司机构信息,对公账户信息
绑定管理员微信
企业认证
公司对公账户对微信进行打款
账户自动验证后,自动认证通过,并将认证资金退回公司对公账户,费用在1元内随机
小程序发布流程

开发实践
这次的demo项目为农历和公历的转换器,重在体验开发流程。
AppID(小程序ID)
做上面的那些步骤就是为了得到小程序ID~
创建项目
我们在官方下载的微信wweb开发者工具中,必须填入小程序ID才能进行下一步,在选择项目目录之前,最好先创建一个代码仓库,来管理我们的项目代码。

调试工具

左边第一个tab是编辑,也就是说,这还是个简易的编辑器。
?

从上面可以看出的是,开发者通过web开发者工具进行小程序代码的上传,上传到微信端的服务器。
通过微信端的身份验证,再加上上传的操作需要管理员帐号扫码确认,从而给开发者一种封闭的感觉。
上传demo
首先复制小程序的官方demo到项目中
项目结构
结构还是比较简单的,微信给的demo并不多,也就是以后大家的代码还是会跟随自己的风格来走~

上传到微信
上传操作为重要操作,需要管理员账户扫码确认,二维码有效期为5分钟。
之后是版本信息,对应的是项目的代码仓库的版本信息。

上传操作完成之后,会展示本次的信息。
2016/11/7 下午4:58:18, 编译包大小 13 kb
提交审核
回到小程序管理后台,就能看到这次的开发版本提交信息。

点击审核按进行审核
提交审核操作,需要管理员帐号进行微信扫码确认。
接下来需要添加测试微信号,填写配置功能页面
注意的是

绑定测试微信号

该微信号将提供给微信审核人员审核微信小程序时登录使用，微信号需能够体验小程序的全部功能，请勿使用常用微信号扫描

也就是说以后微信的小号会越来越多~
?

之后,就会看到审核版本的状态

通过审核就可以上线咯~
快速上手体验
从注册流程到发布流程,体现了微信小程序的封闭性。
凭借着微信这么大的体量,前端的同学又有一个方向了~
参考资料
https://mp.weixin.qq.com/debug/wxadoc/dev/index.html?t=20161107

课程介绍

本课程是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。

本课程共包含四个部分。

第一部分（第1-3篇）带你初步了解小程序是什么，然后进行小程序开发的准备工作，从注册账号到安装开发工具一应俱全。工欲善其事，必先利其器。

第二部分（第4-6篇）。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识，需要掌握的会进行说明，需要扩展的会提供信息的出处。千里之行始于足下。

第三部分（第7-8篇）通过指南针的例子，介绍一个小程序的实现过程。通过这个实例，综合运用所学知识，使小程序开发能力进一步提高。麻雀虽小，五脏俱全。

第四部分（第9篇）只包含一篇文章，具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓，全在收口。

哪怕您事先没有任何微信小程序相关技术的经验，认真学完该达人课之后，您会掌握基本的小程序开发方法，并具备自主扩展知识面，以及进行更高层次开发的能力。

点击查看课程全部内容

作者介绍

薛卫国，现就职于某外企担任架构小组责任人，CSDN 博客专家，长期从事 C++ 开发，精通 UML、设计模式，创办有公众号《面向对象思考》。毕业于东北大学，曾留校在国家重点实验室工作。

课程内容

第01课：初识微信小程序

要火的节奏

最近有一则来自北京商报的新闻引起了不少人的注意，我们这里选取一部分：


争夺流量 手机厂商“抱团”对抗微信小程序

3月20日，小米、中兴、华为等10家手机厂商联合对外宣布，推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下，本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为，对于整个市场来说，流量竞争有促进作用，但微信已经具有较强的用户黏性，十大手机厂商要想争夺用户流量并非易事。


估计这些厂家的标准出台还需要一段时间，但是有一点可以确定的是：小程序类的开发要火。

但如果你打开轻应用的文档可以发现两点：

1.应用文档的信息量还很有限。2.轻应用的架构，采用的技术和微信小程序很相似。

处于这个目的，作者赶在这个时机制作了本课程，希望可以为潮流加一份力；作为程序员，希望各位可以通过本课程的学习，在有限的时间内为自己添一份技能！

参考资料：轻应用开发文档

什么是小程序？

最近一个小游戏“跳一跳”火得不得了，相信即使您自己没有玩过，身边的亲戚朋友也一定玩过。画面大致如下：



当然了，关于玩法等等不是本文的内容，可以参照百度百科。

这就是微信小程序的成功案例了。

微信小程序简介

微信小程序简称小程序，张小龙在微信公开课 Pro 上发布的小程序正式上线，时间是2017年1月9日。关于小程序，张小龙在他的公开课中有过很详细的说明，大家尽可以到网上去搜，这里不再赘述，只说作者自己的理解。

微信小程序这个词可以分解为“微信”和“小程序”两部分。

其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。

“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。

另外，微信不会提供类似于小程序商店的地方，需要小程序提供者自己通过二维码，群分享的手段来传播，这就是所谓去中心化的形态。

微信朋友圈提供了好友之间沟通信息的手段，订阅号提供了面向粉丝推送信息的手段，而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

小程序相关技术介绍

本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员，因此在说明微信小程序的同时，对相关技术也将进行相应的介绍。通过这种方式，可使读者能够非常顺利地学习，而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

微信小程序推出一年多一点的时间，算是一个新事物，但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现，不光是微信小程序，很多类似形态的应用都采用类似的架构：

使用 JSON 技术来表现应用的配置信息。包含应用的基本信息，页面配置和路由，应用全体的信息等。
	
使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素，例如列表、按钮、文本框、选择框等都通过 XML 语言来描述，遵从 XML 语法，对于页面的共同风格，使用 CSS 进行定义。
	
使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理，系统 API 的调用等。
	
架构在视图层和逻辑层之间提供数据和事件传输功能，从而尽量减少难度。由于类似应有都属于轻应用，所以提供的功能都比较单一。
具体的语法，用途等将会在使用的时候详细介绍，这里只提一下相关技术的基本情况，了解即可。

换一种说法就是：并不需要另外自己调查，跟着本课程走下去就好。

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于 ECMAScript（W3C 制定的 JavaScript 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

XML

XML（Extensible Markup Language），中文名为可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。

在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息，比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在1998年，W3C 就发布了 XML1.0 规范，使用它来简化 Internet 的文档信息传输。

CSS

层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JavaScript

JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

在1995年时，由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

为了取得技术优势，微软推出了 JScript，CEnvi 推出 ScriptEase，与 JavaScript 同样可在浏览器上运行。为了统一规格，再加上 JavaScript 兼容于 ECMA 标准，因此也称为 ECMAScript。

学习方法

微信小程序虽然是新事物，但学习方法却不是新方法。

我们的套路是：首先生产一个最简单的小程序实例，通过这个实例介绍微信小程序的构造和想法，这算是学习这个活动中“学”的部分。然后扩展这些知识点，通过开发一个简单的小程序的过程来运用这些知识点，这算是“习”的过程。

这是作者这些年来屡试不爽的方法。

参考资料

在学习和开发的过程中，我们主要会参考微信的开发文档。其原因是小程序太新了，相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍，但是说实话，内容并不比微信本身的开发文档更详尽。

第02课：开发环境的准备 

创建自己的小程序账号

在开发自己的微信小程序之前，首先需要注册小程序账号，接下来我们一步一步做详细说明。

打开浏览器，输入：mp.weixin.qq.com。



因为是第一次使用，所以选择画面右上角的“立即注册”。



选择左下角的“小程序”方框。



输入邮箱、密码、确认密码、验证码，之后选择同意协议和条款。当然这里的密码不是邮箱的密码，而是正在申请的小程序账号的密码。

最后按下“注册”按钮。



点击“登录邮箱”按钮。打开相应的软件后，应该可以收到下面的邮件。如果没收到的话，建议看一下垃圾邮件，没准儿那里有。



单击下半部一大片绿色的部分，就可以回到注册界面继续剩下的工作。



选择主题类型为“个人”，然后输入管理员的姓名，身份证号码。

输入手机号码并单击“获取验证码”，将手机接收到的验证码输入到短信验证码栏中。

完成上述步骤，画面下部会出现一个二维码，需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

如果认证成功，画面会变成下面这个样子。



点击“继续”按钮。



意思就是现在后悔还来得及，如果不后悔今后就没法后悔了。我们按下“确定”按钮。



大功告成！

小程序管理平台

账号申请成功之后，就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

首页



内容比较简单，主要是表示小程序的实时访问次数和系统公告。

开发管理



用户在使用小程序的时候，需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

过程也不复杂，一共分为三步：上传代码，提交审核和发布小程序。

用户身份



这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

数据分析



这个画面可以统计小程序的访问数量，对用户来源、性别、年龄分布等进行分析。

模板消息



这个画面可以定制微信小程序向客户发送的消息。

客服消息



通过这个画面可以指定小程序的客服人员，从而实现小程序的在线客服功能。

附近的小程序



当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时，小程序指定地点以后，用户可以通过微信的“附近的小程序”界面发现该小程序。

运维中心



一共有两个页面，分别用于查询小程序的错误日志和对客户端进行监控。

推广



用来自定义小程序推广关键字。

设置

设置分类中一共有五个页面，这里只介绍前两个。

基本设置



顾名思义，这里主要是用来设置小程序的基本信息。内容包括：

设定小程序名称，小程序头像；
	
取得小程序码；
	
取得认证；
	
设定主题信息；
	
其他省略。
开发设置



这个页面主要负责和小程序开发相关的设定信息，内容包括：

取得小程序 ID。每一个发布的小程序都需要唯一的 ID。
	
生成小程序秘钥。
	
指定服务器域名。小程序可以访问外部网站，可以上传和下载文件。但是对象服务器不是任意的，需要在这里指定。
	
其他省略。
其他

在画面的右上角，有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

安装开发工具

小程序账号申请成功之后的工作就是准备开发环境。

早期的版本在首页分类中有开发工具的下载链接，最近不知道为什么变成了访问次数统计画面。但是没有关系，可以直接点击这里，便可打开下面的下载地址页面。



根据操作系统选择合适的下载链接。



下载完成后打开安装程序，首先是开始画面。



按下“下一步”按钮。



按下“我接受”按钮。



指定适当的安装目录后按下“安装”按钮。



安装中……



完成！

接下来就可以开始微信小程序的开发之旅啦！

第03课：微信开发者工具介绍

第04课：小程序构成介绍——配置文件的形式和内容 

第05课：小程序构成介绍——WXML 和 WXSS 

第06课：小程序构成介绍——事件处理和数据绑定 

第07课：小程序开发实例——指南针（上） 

第08课：小程序开发实例——指南针（下）

第09课：发布小程序 

点击查看课程全部内容

做任何程序开发要首先找到其官方文档，我们先来看看其有哪些官方文档。
微信小程序开发文档链接为：https://mp.weixin.qq.com/debug/wxadoc/dev/index.html，如下图：

这里就是做微信小程序开发的全部官方文档。
知道了文档的位置，下面我们来介绍下如何做一个微信小程序开发：
第一步：
下载微信小程序开发者工具并安装，下载路径：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
进到下载界面后，根据自己的操作系统选择相应的链接进行下载，下载完成后进行安装。
第二步：登录工具
开发者工具安装完成后我们就可以将其打开，初次打开会需要用微信扫码登录，入下图，用手机微信扫一扫后确认登录就可以了。


第三步：创建一个项目
登录成功后，如果是第一次使用该工具会弹出创建项目的窗口，如下图：



​ 在创建过程中，如果选择的本地文件夹是个空文件夹会出来一个勾选项“在当前目录中创建quick start项目”，为方便初学者了解微信小程序的基本代码结构，请勾选此项，勾选后，开发者工具会帮助我们在开发目录里生成一个简单的 demo，如下图：


第四步：项目代码结构解释


点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。
​ 1、app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。
2、​ app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
3、app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
我们注意到，在实例程序的代码中还有2个文件夹，一个是pages,一个是utils,其中utils是放通用工具类方法的一个文件夹，pages是存放所有页面的文件夹。我们着重讲一下这个pages.
第五步：小程序页面文件构成
在这个示例中，我们有两个页面，index 页面和 logs 页面，即欢迎页和小程序启动日志的展示页，他们都在 pages 目录下。微信小程序中的每一个页面的【路径+页面名】都需要写在 app.json 的 pages 中，且 pages 中的第一个页面是小程序的首页。
每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。
​ index.wxml 是页面的结构文件：
<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

本例中使用了、、来搭建页面结构，绑定数据和交互处理函数。
​ index.js 是页面的脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。
//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.wxss 是页面的样式表：
/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

页面的样式表是非必要的。当有页面样式表时，页面的样式表中的样式规则会层叠覆盖 app.wxss 中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用 app.wxss 中指定的样式规则。
​ index.json 是页面的配置文件：
​ 页面的配置文件是非必要的。当有页面的配置文件时，配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用 app.json 中的默认配置。
​ logs 的页面结构
<!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

logs 页面使用  控制标签来组织代码，在  上使用 wx:for-items 绑定 logs 数据，并将 logs 数据循环展开节点
 //logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

运行结果如下：


第六步：手机预览（只有获得AppId的才有权限预览）
​ 开发者工具左侧菜单栏选择"项目"，点击"预览"，扫码后即可在微信客户端中体验。



以上是微信小程序前端开发的基本流程，而实际上要做一个内容可以更新的小程序，单有前端开发是远远不够的，还需要后台开发。后台开发与web开发的后台基本无异，可以选择用java、php、nodejs等任一语言，有一点需要注意的是小程序后台服务器必须是https协议的，这就要求必须购买云服务器并将后台服务器设置成https服务。