微信小程式+後端(java)實現開發
前言
現在微信小程式越來越火了，相信不少人都通過各種途徑學習過微信小程式或者嘗試開發，作者就是曾經由於興趣瞭解開發過微信小程式，最終自己的畢業設計也是開發一個微信小程式。所以現在用這篇部落格記錄我之前開發的一些經驗和一些心得吧。
主要內容
- 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>();
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
},success: function (res) {
console.log(res.data)//列印到控制檯
var message = res.data.message;
if (message == null) {
var toastText = '資料獲取失敗';
wx.showToast({
title: toastText,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
原始碼：java-wechat_jb51.rar
到此這篇關於微信小程式+後端(java)實現開發的文章就介紹到這了,更多相關微信小程式java開發內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！