在語言方面,小程序看似重新定義了一套標(biāo)準(zhǔn)。但實際上,它們與「前端三件套」——HTML、CSS 和 Java——差不太多。
下面,我們就來對比一下小程序開發(fā)語言和「前端三件套」有什么異同點:
HTML 與 WXML:兩者差異比較大,如果之前沒有接觸過 Android 開發(fā),可能會覺得有些頭疼。事實上,WXML 更像是 Android 開發(fā)中的界面 XML 描述文件,適合于程序界面的構(gòu)建;而 HTML 則傾向于文章的展示(這與 HTML 的歷史有關(guān)),以及互聯(lián)網(wǎng)頁面的構(gòu)建。
WXSS 與 CSS:兩者在語言上幾乎沒有差別,可以直接通用。
JS 文件:小程序的 JS 文件與前端開發(fā)使用的 JS 幾乎沒有區(qū)別,只是小程序的 JS 新增了微信的一些 API 接口,并去除了一些不必要的功能(如 DOM)。
在語言上,小程序完全向?qū)W習(xí)成本最低的前端開發(fā)看齊,但這不代表所有前端開發(fā)者都能無縫遷移。
如果你是從前端開發(fā)轉(zhuǎn)向小程序,就需要注意這兩個點:
HTML 與 WXML 兩種文件的構(gòu)建思想差異較大,如果之前只接觸過前端開發(fā),需要一點時間才能適應(yīng) WXML 的編寫方法。
雖然小程序使用的是前端語言,但不代表可以繼續(xù)沿用前端的開發(fā)思想進(jìn)行開發(fā)。小程序?qū)η岸碎_發(fā)的要求從「構(gòu)建界面」升級成「開發(fā)完整應(yīng)用」,前端開發(fā)需要在意識上進(jìn)行轉(zhuǎn)變。
springboot后端架構(gòu)構(gòu)建
小程序項目構(gòu)建
小程序api調(diào)用
后臺resetful接口編寫
小程序調(diào)用后臺接口
免費的https申請
Linux下部署上線
<!-- 統(tǒng)一版本控制 -->
<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>
#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
@ComponentScan(basePackages= "com.bin")//添加掃包@ComponentScan(basePackages= "")
@EnableAutoConfiguration
public class App{
//啟動springboot
public static void main(String[] args) {
SpringApplication.run(App.class, args);
}
}
@RestController
@SpringBootApplication
public class ControllerText {
@RequestMapping("getUser")
public Map<String, Object> getUser(){
System.out.println("微信小程序正在調(diào)用。。。");
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("微信小程序調(diào)用完成。。。");
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= "想獲取更多微信小程序相關(guān)知識,請更多的閱讀微信官方文檔,還有其他更多微信開發(fā)相關(guān)的內(nèi)容,學(xué)無止境。";
}else if("西安工業(yè)大學(xué)".equals(word)){
message="西安工業(yè)大學(xué)(Xi'an Technological University)簡稱”西安工大“,位于世界歷史名城古都西安,是中國西北地區(qū)唯一一所以兵工為特色,以工為主,理、文、經(jīng)、管、法協(xié)調(diào)發(fā)展的教學(xué)研究型大學(xué)。原中華人民共和國兵器工業(yè)部直屬的七所本科院校之一(“兵工七子”),陜西省重點建設(shè)的高水平教學(xué)研究型大學(xué)、陜西省人民政府與中國兵器工業(yè)集團(tuán)、國防科技工業(yè)局共建高校、教育部“卓越工程師教育培養(yǎng)計劃”試點高校、陜西省大學(xué)生創(chuàng)新能力培養(yǎng)綜合改革試點學(xué)校。國家二級保密資格單位,是一所以\"軍民結(jié)合,寓軍于民\"的國防科研高校。";
}
map.put("message", message);
return map;
}
@RequestMapping("")
public String getText(){
return "hello world";
}
}
<button bindtap='houduanButton1'>點擊發(fā)起請求</button>
<view wx:for="{{list}}">
姓名:{{item}}
</view>
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' // 默認(rèn)值
},
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
})
}
}
})
}
wxml文件:
<input type="text" class="houduanTab_input" placeholder="請輸入你要查詢的內(nèi)容" bindinput='houduanTab_input'></input>
<button bindtap='houduanButton2'>查詢</button>
<view wx:if="{{message!=''}}">
{{message}}
</view>
js文件:變量的定義見上一個js文件
//獲取輸入框的內(nèi)容
houduanTab_input: function (e) {
this.setData({
word: e.detail.value
})
},
// houduanButton2的網(wǎng)絡(luò)請求
houduanButton2: function () {
var that = this;
wx.request({
url: 'http://localhost:443/getWord',
data:{
word: that.data.word
},
method: 'GET',
header: {
'content-type': 'application/json' // 默認(rèn)值
},
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)完成了小程序的前后端通信。
摘錄自:https://blog.csdn.net/zwb19940216/article/details/81023191
https://blog.csdn.net/qq_38125123/article/details/69568667