微信小程式使用WebService(Asp.net)進行資料互動
阿新 • • 發佈:2018-12-31
開發微信小程式掌握了資料互動的方法,再加上web的知識,基本就能開發出了,研究了下與伺服器通訊,暫時不知道怎麼用ajax通訊,但可以使用WebService可以進行互動嘗試開發微信小程式(如果需要登入之類的,也可以自定義握手方法或使用微信登入驗證:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject)。
1. 小程式=前端頁面 + 伺服器資料
2. 前端頁面與伺服器的互動
- 前端使用 wx.request請求資料(常用的有 get,和post)
- 伺服器使用WebService處理資料,並返回結果。
- 使用WebService時wx.request需要使用post方式
- 引數對應:wx.request請求data中的引數必須與WebService中對應的引數得名稱、型別一樣。
<!--index.wxml--> <view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> <!-- <button bindtap="onButtonchange">點選</button> <button bindtap="add">add</button> <button bindtap="remove">remove</button>--> <button bindtap="requestWebService">測試</button> </view> </view>
requestWebService:function(){ var that=this//注意這裡必須快取,不然無法在回撥中 獲取資料後進行操作 wx.request({ url: 'http://localhost:53639/HelloServer.asmx/Name', data: { a:1, b:2 }, method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: { }, // 設定請求的 header success: function(res){ // success console.log(res) that.setData({motto:res.data.d})//這裡是that不是this }, fail: function() { // fail }, complete: function() { // complete } }) }
4.WebService程式碼
public class HelloServer : System.Web.Services.WebService
{
[WebMethod]
public int[] Name(int a, int b)
{
return new int[] { a,b};
}
}
5.執行結果
執行前: 執行後: