⼩程序开发（后端Java）
使⽤的开发语⾔和⽂件很「特殊」。
所使⽤的程序⽂件类型⼤致分为以下⼏种：
①WXML(WeiXin Mark Language，标记语⾔)
②WXSS(WeiXin Style Sheet，样式表)
③JS(Java，⼩程序的主体)
在语⾔⽅⾯，⼩程序看似重新定义了⼀套标准。但实际上，它们与「前端三件套」——HTML、CSS 和 Java——差不太多。
下⾯，我们就来对⽐⼀下⼩程序开发语⾔和「前端三件套」有什么异同点：
HTML 与 WXML：两者差异⽐较⼤，如果之前没有接触过 Android 开发，可能会觉得有些头疼。事实上，WXML 更像是 Android 开发中的界⾯ XML 描述⽂件，适合于程序界⾯的构建;⽽ HTML 则倾向于⽂章的展⽰(这与 HTML 的历史有关)，以及互联⽹页⾯的构建。
WXSS 与 CSS：两者在语⾔上⼏乎没有差别，可以直接通⽤。
JS ⽂件：⼩程序的 JS ⽂件与前端开发使⽤的 JS ⼏乎没有区别，只是⼩程序的 JS 新增了的⼀些 API 接⼝，并去除了⼀些不必要的功能(如 DOM)。
在语⾔上，⼩程序完全向学习成本最低的前端开发看齐，但这不代表所有前端开发者都能⽆缝迁移。写文章的小程序
如果你是从前端开发转向⼩程序，就需要注意这两个点：
HTML 与 WXML 两种⽂件的构建思想差异较⼤，如果之前只接触过前端开发，需要⼀点时间才能适应 WXML 的编写⽅法。
虽然⼩程序使⽤的是前端语⾔，但不代表可以继续沿⽤前端的开发思想进⾏开发。⼩程序对前端开发的要求从「构建界⾯」升级成「开发完整应⽤」，前端开发需要在意识上进⾏转变。
1.主要内容
  springboot后端架构构建
  ⼩程序项⽬构建
  ⼩程序api调⽤
  后台resetful接⼝编写
  ⼩程序调⽤后台接⼝
  免费的https申请
  Linux下部署上线
2.后端详解（Java编写后端api）
  主要框架springboot，开发⼯具myeclipse，服务器阿⾥云服务器。
  创建⼀个maven项⽬，导⼊相关依赖：
  l依赖
<!-- 统⼀版本控制 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.9.RELEASE</version>
</parent>
<dependencies>
<!-- freemarker渲染页⾯ -->
<!-- mvnrepository/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>at.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框架开发⼩程序后台的主要原因之⼀，可以⽅便进⾏⼩程序后套开发
1. ⼩程序发起⽹络请求
在完成了⼩程序的后端开发，下⾯进⾏⼩程序端发起⽹络请求。
下⾯以⼀个简单的按钮请求数据为例：
wxml⽂件：　
<button bindtap='houduanButton1'>点击发起请求</button>
<view wx:for="{{list}}">
姓名：{{item}}
</view>
    js⽂件：
/**
* 页⾯的初始数据
*/
data: {
list: '',
word: '',
message:''
},
houduanButton1: function () {
var that = this;
url: '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;
url: 'localhost:443/getWord',
data:{
word: that.data.word
},
method: 'GET',
header: {
'content-type': 'application/json'// 默认值
},
success: function (res) {
console.log(res.data)//打印到控制台
var message = ssage;
if (message == null) {
var toastText = '数据获取失败';
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
} else {
that.setData({
message: message
})
}
}
})
}
  ⾄此已经完成了简易的⼩程序端与java后端进⾏通信。
现在可以在启动后端项⽬在开发⼯具上进⾏测试。
演⽰效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。