1. <strong id="7actg"></strong>
    2. <table id="7actg"></table>

    3. <address id="7actg"></address>
      <address id="7actg"></address>
      1. <object id="7actg"><tt id="7actg"></tt></object>

        微信小程序練手實戰(zhàn):前端+后端(Java)

        共 5317字,需瀏覽 11分鐘

         ·

        2021-02-09 20:21

        不點藍字,我們哪來故事?

        每天 11 點更新文章,餓了點外賣,點擊 ??《無門檻外賣優(yōu)惠券,每天免費領!》

        1. ?前言

        現(xiàn)在微信小程序越來越火了,相信不少人都通過各種途徑學習過微信小程序或者嘗試開發(fā),作者就是曾經(jīng)由于興趣了解開發(fā)過微信小程序,最終自己的畢業(yè)設計也是開發(fā)一個微信小程序。所以現(xiàn)在用這篇博客記錄我之前開發(fā)的一些經(jīng)驗和一些心得吧。

        2. ?主要內(nèi)容

        • springboot后端架構構建
        • 小程序項目構建
        • 小程序api調(diào)用
        • 后臺resetful接口編寫
        • 小程序調(diào)用后臺接口
        • 免費的https申請
        • linux下部署上線

        3. ?微信小程序項目構建

        這些基礎的東西我就不過多介紹,大家在剛開始開發(fā)的時候一般都沒有自己的服務器及域名,所以大家在本地編寫的時候,在“詳細”下的“項目設置”里面將“不校驗域名安全性”勾選。

        這里寫圖片描述

        至于微信小程序的組件,即前端頁面的開發(fā)希望大家耐住寂寞認真在微信開發(fā)平臺上,

        組件

        https://developers.weixin.qq.com/miniprogram/dev/component/

        api:

        https://developers.weixin.qq.com/miniprogram/dev/api/

        4. ?后端詳解

        我在后端編寫主要是用java,當然對其他開發(fā)語言熟悉的也可以使用其他語言開發(fā)后端?,F(xiàn)在我就java編寫后端api的講解。主要框架springboot,開發(fā)工具myeclipse,服務器阿里云服務器。

        創(chuàng)建一個maven項目,導入相關依賴:

        pom.xml依賴


        <parent>
        ?<groupId>org.springframework.bootgroupId>
        ?<artifactId>spring-boot-starter-parentartifactId>
        ?<version>1.5.9.RELEASEversion>
        parent>
        <dependencies>
        ?
        ?
        ?<dependency>
        ??<groupId>org.springframework.bootgroupId>
        ??<artifactId>spring-boot-starter-freemarkerartifactId>
        ?dependency>

        ?
        ?<dependency>
        ??<groupId>org.springframework.bootgroupId>
        ??<artifactId>spring-boot-starter-webartifactId>
        ?dependency>

        ?
        ?
        ?<dependency>
        ??<groupId>org.springframework.bootgroupId>
        ??<artifactId>spring-boot-starter-webartifactId>
        ??<exclusions>
        ???<exclusion>
        ????<groupId>org.springframework.bootgroupId>
        ????<artifactId>spring-boot-starter-tomcatartifactId>
        ???exclusion>
        ??exclusions>
        ?dependency>

        ?<dependency>
        ??<groupId>org.apache.tomcat.embedgroupId>
        ??<artifactId>tomcat-embed-jasperartifactId>
        ?dependency>
        dependencies>

        在配置文件src/main/resources/下創(chuàng)建application.properties文件可以修改一些配置參數(shù)等。

        #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

        在實際項目中可能涉及數(shù)據(jù)庫,還要整合mybatis,在文章中,我僅僅做測試就不做使用數(shù)據(jù)庫的測試。

        首先創(chuàng)建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后端實現(xiàn)通信,controller代碼如下:

        @RestController
        @SpringBootApplication
        public?class?ControllerText?{
        ?
        ?@RequestMapping("getUser")
        ?public?Map?getUser(){
        ??System.out.println("微信小程序正在調(diào)用。。。");
        ??Map?map?=?new?HashMap();
        ??List?list?=?new?ArrayList();
        ???list.add("zhangsan");
        ???list.add("lisi");
        ???list.add("wanger");
        ???list.add("mazi");
        ???map.put("list",list);
        ??System.out.println("微信小程序調(diào)用完成。。。");
        ??return?map;
        ?}
        ?
        ?@RequestMapping("getWord")
        ?public?Map?getText(String?word){
        ??Map?map?=?new?HashMap();
        ??String?message?=?"我能力有限,不要為難我";
        ??if?("后來".equals(word))?{
        ???message="正在熱映的后來的我們是劉若英的處女作。";
        ??}else?if("微信小程序".equals(word)){
        ???message=?"想獲取更多微信小程序相關知識,請更多的閱讀微信官方文檔,還有其他更多微信開發(fā)相關的內(nèi)容,學無止境。";
        ??}else?if("西安工業(yè)大學".equals(word)){
        ???message="西安工業(yè)大學(Xi'an Technological University)簡稱”西安工大“,位于世界歷史名城古都西安,是中國西北地區(qū)唯一一所以兵工為特色,以工為主,理、文、經(jīng)、管、法協(xié)調(diào)發(fā)展的教學研究型大學。原中華人民共和國兵器工業(yè)部直屬的七所本科院校之一(“兵工七子”),陜西省重點建設的高水平教學研究型大學、陜西省人民政府與中國兵器工業(yè)集團、國防科技工業(yè)局共建高校、教育部“卓越工程師教育培養(yǎng)計劃”試點高校、陜西省大學生創(chuàng)新能力培養(yǎng)綜合改革試點學校。國家二級保密資格單位,是一所以\"軍民結合,寓軍于民\"的國防科研高校。";
        ??}
        ??map.put("message",?message);
        ??return?map;
        ?}
        ?
        ?@RequestMapping("")
        ?public?String?getText(){
        ??return?"hello?world";
        ?}

        }

        至此簡易的后端框架及測試基本完成。

        說明:@RestController與@Controller注解的區(qū)別@RestController相當于兩個注解,它能實現(xiàn)將后端得到的數(shù)據(jù)在前端頁面(網(wǎng)頁)中以json串的形式傳遞。而微信小程序與后臺之間的數(shù)據(jù)傳遞就是以json報文的形式傳遞。所以這就是選擇springboot框架開發(fā)小程序后端的主要原因之一??梢苑奖阄覀冞M行小程序的后端開發(fā)。

        5. ?小程序發(fā)起網(wǎng)絡請求

        在完成了小程序的后端開發(fā),下面進行小程序端發(fā)起網(wǎng)絡請求。

        下面以一個簡單的按鈕請求數(shù)據(jù)為例:

        wxml文件

        'houduanButton1'>點擊發(fā)起請求
        for="{{list}}">
        ????姓名:{{item}}
        ??

        js文件

        ?/**
        ???*?頁面的初始數(shù)據(jù)
        ???*/

        ??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?=?'數(shù)據(jù)獲取失敗';
        ??????????wx.showToast({
        ????????????title:?toastText,
        ????????????icon:?'',
        ????????????duration:?2000
        ??????????});
        ????????}?else?{
        ??????????that.setData({
        ????????????list:?list
        ??????????})
        ????????}
        ??????}
        ????})
        ??}

        主要調(diào)用的api就是wx.request,想知道將詳細的介紹大家可以去微信公眾平臺。

        接下來以搜索類型的請求為例:

        wxml文件:

        ?type="text"?class="houduanTab_input"?placeholder="請輸入你要查詢的內(nèi)容"?bindinput='houduanTab_input'>
        ??'houduanButton2'>查詢
        ??if="{{message!=''}}">
        ????{{message}}
        ??

        js文件:變量的定義見上一個js文件

        //獲取輸入框的內(nèi)容
        ??houduanTab_input:?function?(e)?{
        ????this.setData({
        ??????word:?e.detail.value
        ????})
        ??},
        ??//?houduanButton2的網(wǎng)絡請求
        ??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?=?'數(shù)據(jù)獲取失敗';
        ??????????wx.showToast({
        ????????????title:?toastText,
        ????????????icon:?'',
        ????????????duration:?2000
        ??????????});
        ????????}?else?{
        ??????????that.setData({
        ????????????message:?message
        ??????????})
        ????????}
        ??????}
        ????})
        ??}

        至此已經(jīng)完成了簡易的微信小程序端與java后端進行通信。

        現(xiàn)在可以在啟動后端項目在微信開發(fā)工具上進行測試。

        演示效果:

        這里寫圖片描述

        所以至此已經(jīng)完成了小程序的前后端通信。

        6. ?https申請

        其實也不算什么申請,在購買域名之后可以申請免費的ssl證書,在前面的配置文件application.properties中有證書的配置,將證書的pfx文件直接添加到后端項目下即可。

        7. ?購買服務器部署后端api代碼

        對于springboot項目,本人建議打jar,直接在服務器上部署即可,在服務器上只需要安裝對應版本的jdk即可。項目部署命令:

        我購買的是阿里云的輕量級應用服務器部署的。比較劃算吧。

        運行命令:

        ?nohup?java?-jar?helloworld.jar?&

        nohup的意思不掛服務,常駐的意思,除非云服務器重啟,那就沒法了;最后一個&表示執(zhí)行命令后要生成日志文件nohup.out。

        當然還可以使用java -jar helloworld.jar

        源碼:

        鏈接: https://pan.baidu.com/s/1PfByFfEgqkVALcc3PRhn9w 提取碼: c7yf

        往期推薦

        分庫分表 vs NewSQL,如何取舍?

        很多人用 ji32k7au4a83 做密碼?

        領個紅包給自己加個餐!

        看我用 9000+ 字征服 Spring AOP!

        下方二維碼關注我

        技術草根堅持分享?編程,算法,架構

        看完文章,餓了點外賣,點擊 ??《無門檻外賣優(yōu)惠券,每天免費領!》

        朋友,助攻一把!點個在看!
        瀏覽 51
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        分享
        舉報
        評論
        圖片
        表情
        推薦
        點贊
        評論
        收藏
        分享

        手機掃一掃分享

        分享
        舉報
        1. <strong id="7actg"></strong>
        2. <table id="7actg"></table>

        3. <address id="7actg"></address>
          <address id="7actg"></address>
          1. <object id="7actg"><tt id="7actg"></tt></object>
            久久国产99 | 日本精品视频在线播放 | 超碰逼逼| 好大好长好紧爽男 | chinese老头勃起gay45 | www.一区二区三区.com | 卖婬全过程无遮挡免费 | 操操操操操操操操 | 97人人做人人人难人人做 | 免费又色又爽无遮挡的扒胸罩视频 |