關(guān)于網(wǎng)絡(luò)通信，這里我使用的是wx.request,官方代碼示例如下:
我們提供的服務(wù)有：成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、興文ssl等。為上千多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的興文網(wǎng)站制作公司
重慶分公司
重慶分公司
wx.request({
url: 'test.php', //僅為示例，并非真實(shí)的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success (res) {
console.log(res.data)
}
})對于初學(xué)者而言，官方示例可能會(huì)看不怎么懂，所以我就以我自己當(dāng)初項(xiàng)目驅(qū)動(dòng)學(xué)習(xí)的方式(開發(fā)個(gè)人的記賬小程序)來作為學(xué)習(xí)實(shí)例。
以登錄來說，效果圖如下:
此次示例包含表單校驗(yàn)和網(wǎng)絡(luò)請求，代碼如下:
login.js
// pages/login/login.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
username: "",
password: ""
},
register:function(e){
wx.navigateTo({
url: '../register/register'
})
},
formSubmit: function(e) {
console.log(e.detail.value.email);
console.log(e.detail.value.pwd)
var username = e.detail.value.email;
var password = e.detail.value.pwd;
var emailReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
if (username == null || username == "") {
wx.showToast({
title: "用戶名不能為空",
icon: 'none',
duration: 1500
})
} else if (!emailReg.test(username)) {
wx.showToast({
title: "郵箱有誤",
icon: 'none',
duration: 1500
})
} else if (password == null || password == "") {
wx.showToast({
title: "密碼不能為空",
icon: 'none',
duration: 1500
})
} else {
wx.request({
url: getApp().globalData.urlPath + "sysUser/login",
method: "POST",
data: {
username: username,
password: password
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
success: function(res) {
console.log(res.data);
if (res.statusCode == 200) {
//訪問正常
if (res.data.code == "000000") {
wx.showToast({
title: "登陸成功",
icon: 'success',
duration: 2000,
success: function() {
wx.navigateTo({
url: '../manage/manage'
})
wx.setStorage({
key: 'userId',
data: res.data.user.userCode
})
wx.setStorage({
key: 'userName',
data: res.data.user.userName
})
console.log("test:" + wx.getStorageSync('userName'));
}
})
} else if (res.data.code == "111111") {
wx.showToast({
title: "密碼錯(cuò)誤",
icon: 'none',
duration: 1500
})
} else {
wx.showToast({
title: "該用戶不存在",
icon: 'none',
duration: 1500
})
}
} else {
wx.showLoading({
title: '系統(tǒng)異常',
fail
})
setTimeout(function() {
wx.hideLoading()
}, 2000)
}
}
})
}
}
})關(guān)于login.js，主要是寫通信邏輯的，與咱們平時(shí)寫js差異并不大，唯一不同的就是api長得不樣罷了。
關(guān)于其中的getApp().globalData.urlPath，相當(dāng)于全局變量，不用我每次都寫一大串https之類的。
表單校驗(yàn)的效果如圖:
代碼說明:
顯示消息提示框(相當(dāng)于js的alert提示):
wx.showToast({
title: "郵箱有誤",
icon: 'none',
duration: 1500
})獲取input屬性為name的值(相當(dāng)于js中form.email.value,前提是這個(gè)表單name要為form，且form中的input要存在一個(gè)name=”email”)
e.detail.value.email;
跳轉(zhuǎn)代碼(相當(dāng)于window.location.href):
wx.navigateTo({
url: '../manage/manage'
})至于wx.request，我想只要是寫過ajax的，都很好理解。
login.json:
{
"usingComponents": {}
}關(guān)于這個(gè)login.json有什么用，我唯一想到的是頁面的title(其實(shí)相當(dāng)于html中的title)
lgoin.wxml:
acs系統(tǒng) \n
wxml相當(dāng)于視圖(如html或者模板語言(jsp、volocity、freemarker、beetl等))
視圖除了可以寫一些標(biāo)簽之類的，還可以寫一些邏輯判斷。后面會(huì)講到的。
login.wxss:
/* pages/login/login.wxss */
form{
width: 310px;
height: 240px;
line-height: 40px;
/* border: 1px solid red; */
}
input{
border: 1px solid #ccc;
width: 310px;
height: 40px;
}
.button{
margin-top: 20px;
}
.header text{
font-size: 25px;
color: #666;
}
form text{
font-size: 20px;
color: #666;
}
.register{
color:black;
display: block;
width: 310px;
height: 40px;
border: 1px solid #ccc;
text-align: center;
}這個(gè)wxss就相當(dāng)于css，定義視圖的樣式，決定視圖長什么樣(好看不好看)
關(guān)于微信小程序網(wǎng)絡(luò)通信，更多信息可以參考官方文檔:
wx.request
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
