一、開始微信小程序
有人問我微信小程序的開發需要學什麼，有什麼視頻啥的。想起來我剛接觸微信小程序的時候，也是十分的迷茫，用了很長的時間研究如下的問題。下面的介紹是我學習了 vue 之後，再次學習微信小程序時寫的，相比較來說，比之前更加規範了，理解也更深刻。
1、數據交互
現在的開發都想要前後端分離，那麼微信小程序作爲前端，如何與後端（例如 SpringBoot 開發的後端）進行數據的交互。
- 微信小程序 通過API
wx.request發起網絡請求，SpringBoot作爲後端提供請求url，例如http:localhost:8080/emp的GET請求。 - 交互的數據格式使用
json（json的處理庫有：Gson，FastJson，Jackson，Json-lib），其中Gson是Google的產品，FastJson是alibaba的產品 也是我比較喜歡的產品。 - 網絡請求的方法包括
GET、POST、PUT、DELETE等，具體可以學restful風格的API
wx.request({
url: 'http:localhost:8080/emp',
...
success: function (res) {
//接口調用成功的回調函數
console.log(res);
},
fail: function (res) {
//接口調用失敗的回調函數
console.log(res);
},
complete: function (res) {
//接口調用結束的回調函數
console.log(res);
},
})
2、項目結構
如果你學過 vue ，對於 微信小程序 的開發會輕鬆很多。
項目結構如下：
├── app.js
├── app.json
├── app.wxml
├── app.wxss
├── project.config.json
├── assets
│ └── images #項目中需要用到的靜態圖片
├── common
│ └── commonUtil.js #項目中用到的工具方法
├── components #項目中需要用到的公共組件
│ └── ...
└── network
├── request.js # 對數據請求的封裝
├── config.js # 網絡請求的配置，如baseurl、timeout等
├── home.js # home頁面中用到的網絡請求
├── ...
└── pages
├── home # home頁面的內容
├── home.js
├── home.json
├── home.wxml
├── home.wxss
├── childCpns #home中用到的組件
├── ...
二、例子
1、後端
@RestController
public class EmpController {
@GetMapping("/emp")
public JSONObject hello() {
JSONObject jsonObject = new JSONObject();
jsonObject.put("name","zhangsan");
jsonObject.put("age","23");
jsonObject.put("mobile","155*****795");
return jsonObject;
}
}
瀏覽器中輸入 http://localhost:8080/emp ，出現如下結果時，說明後端可以了。
2、前端
下面的內容用到了 JavaScript 中的 promise 知識，如果不知道，需要自學。
//network/config.js
export const baseURL = 'http://localhost:8080'
export const timeout = 5000
//network/request.js
import {baseURL, timeout} from './config.js'
//網絡請求方法
export default function request(options) {
wx.showLoading({
title: '數據加載中ing',
})
//返回Promise對象
return new Promise((resolve, reject) => {
wx.request({
url: baseURL + options.url,
timeout: timeout,
data: options.data,
success: function (res) {
resolve(res.data) //成功時調用
},
fail: reject, //失敗時調用
complete: res => {
wx.hideLoading()
}
})
})
}
//network/home.js
import request from './request.js'
//GET請求emp
export function getEmp() {
return request({
url: '/emp',
method: 'GET'
})
}
//pages/home/home.js
import {
//...
getEmp
} from '../../network/home.js'
Page({
/**
* 頁面的初始數據
*/
data: {
emps: []
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
const that = this;
//網絡獲取數據
that._getData();
},
//網絡請求數據
_getData() {
const that = this;
that._getMultiData();
},
//請求emp
_getEmp(){
const that = this;
getEmp()
.then(res => {
//網絡請求成功，在其中數據綁定、數據處理等
console.log(res);
})
.catch(res => {
//網絡請求失敗
console.log(res);
})
}
//請求其他數據
//...
})
3、結果
