微信小程序开发（后端 Java）

微信使用的开发语言和文件很「特殊」。

小程序所使用的程序文件类型大致分为以下几种：

①WXML (WeiXin Mark Language，微信标记语言)

②WXSS (WeiXin Style Sheet，微信样式表)

③JS (Java，小程序的主体)

小伙伴们有兴趣想了解内容和更多相关学习资料的请点赞收藏+评论转发+关注我，后面会有很多干货。我有一些面试题、架构、设计类资料可以说是程序员面试必备！
所有资料都整理到网盘了，需要的话欢迎下载！私信我回复【111】即可免费获取

在语言方面，小程序看似重新定义了一套标准。但实际上，它们与「前端三件套」——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 项目，导入相关依赖：
依赖





<!-- 统一版本控制 -->




    <parent>




        <groupId></groupId>




        <artifactId>spring-boot-starter-parent</artifactId>




        <version>1.5.9.RELEASE</version>




    </parent>




    <dependencies>




        <!-- freemarker渲染页面 -->




        <!-- https:///artifact//spring-boot-starter-freemarker -->




        <dependency>




            <groupId></groupId>




            <artifactId>spring-boot-starter-freemarker</artifactId>




        </dependency>




 



        <!-- spring boot 核心 -->




        <dependency>




            <groupId></groupId>




            <artifactId>spring-boot-starter-web</artifactId>




        </dependency>




 



        <!-- springboot整合jsp -->




        <!-- tomcat 的支持. -->




        <dependency>




            <groupId></groupId>




            <artifactId>spring-boot-starter-web</artifactId>




            <exclusions>




                <exclusion>




                    <groupId></groupId>




                    <artifactId>spring-boot-starter-tomcat</artifactId>




                </exclusion>




            </exclusions>




        </dependency>




 



        <dependency>




            <groupId></groupId>




            <artifactId>tomcat-embed-jasper</artifactId>




        </dependency>




    </dependencies>

在配置文件 src/main/resources/ 下创建文件，可以修改一些配置参数等




#jsp支持



=.jsp



=/WEB-INF/jsp/




#this is set port



#=80




=443




#添加ssl证书



#ssl证书文件名



-store=classpath:



-store-password=xxxxxxxx



=xxxxxxxx

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

首先创建 springboot 的入库程序：下为代码：





@ComponentScan(basePackages= "")//添加扫包@ComponentScan(basePackages= "")




@EnableAutoConfiguration



public class App{



 



    //启动springboot




    public static void main(String[] args) {



        SpringApplication.run(, args);



    }



}

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

在写一个测试的 controller 进行微信小程序与 java 后端实现通信，controller 代码如下：




@RestController



@SpringBootApplication



public class ControllerText {



 



    @RequestMapping("getUser")



    public Map<String, Object> getUser(){



        ("微信小程序正在调用。。。");



        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");



        ("list",list);



        ("微信小程序调用完成。。。");



        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）简称”西安工大“，位于世界历史名城古都西安，是中国西北地区唯一一所以兵工为特色，以工为主，理、文、经、管、法协调发展的教学研究型大学。原*兵器工业部直属的七所本科院校之一（“兵工七子”），陕西省重点建设的高水平教学研究型大学、陕西省人民*与中国兵器工业集团、国防科技工业局共建高校、教育部“卓越工程师教育培养计划”试点高校、陕西省大学生创新能力培养综合改革试点学校。国家二级保密资格单位，是一所以\"军民结合，寓军于民\"的国防科研高校。";



        }



        ("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;



    ({



      url: 'http://localhost:443/getUser',



      method: 'GET',



      header: {



        'content-type': 'application/json' // 默认值



      },



      success: function (res) {



        (res.data)//打印到控制台



        var list = res.data.list;



        if (list == null) {



          var toastText = '数据获取失败';



          ({



            title: toastText,



            icon: '',



            duration: 2000




          });



        } else {



          ({



            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) {



    ({



      word: e.detail.value




    })



  },



  // houduanButton2的网络请求



  houduanButton2: function () {



    var that = this;



    ({



      url: 'http://localhost:443/getWord',



      data:{



        word: that.data.word



      },



      method: 'GET',



      header: {



        'content-type': 'application/json' // 默认值



      },



      success: function (res) {



        (res.data)//打印到控制台



        var message = res.data.message;



        if (message == null) {



          var toastText = '数据获取失败';



          ({



            title: toastText,



            icon: '',



            duration: 2000




          });



        } else {



          ({



            message: message



          })



        }



      }



    })



  }

至此已经完成了简易的微信小程序端与 java 后端进行通信。
现在可以在启动后端项目在微信开发工具上进行测试。
演示效果：

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

申请
其实也不算什么申请，在购买域名之后可以申请免费的 ssl 证书，在前面的配置文件中有证书的配置，将证书的 pfx 文件直接添加到后端项目下即可。
2. 购买服务器部署后端 api 代码
对于 springboot 项目，本人建议打 jar，直接在服务器上部署即可，在服务器上只需要安装对应版本的 jdk 即可。项目部署命令：
我购买的是阿里云的轻量级应用服务器部署的。比较划算吧。

运行命令： nohup java -jar &

nohup 的意思不挂服务，常驻的意思，除非云服务器重启，那就没法了；最后一个 & 表示执行命令后要生成日志文件。
当然还可以使用 java -jar

秒客网