小程序模板網(wǎng)

微信小程序使用WebService(Asp.net)進行數(shù)據(jù)交互

發(fā)布時間:2017-11-29 18:10 所屬欄目:小程序開發(fā)教程

開發(fā)微信小程序掌握了數(shù)據(jù)交互的方法,再加上web的知識,基本就能開發(fā)出了,研究了下與服務器通訊,暫時不知道怎么用ajax通訊,但可以使用WebService可以進行交互嘗試開發(fā)微信小程序(如果 ...

 
 
 

開發(fā)微信小程序掌握了數(shù)據(jù)交互的方法,再加上web的知識,基本就能開發(fā)出了,研究了下與服務器通訊,暫時不知道怎么用ajax通訊,但可以使用WebService可以進行交互嘗試開發(fā)微信小程序(如果需要登錄之類的,也可以自定義握手方法或使用微信登錄驗證:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject)。

1. 小程序=前端頁面 + 服務器數(shù)據(jù) 
2. 前端頁面與服務器的交互

  • 前端使用 wx.request請求數(shù)據(jù)(常用的有 get,和post)
  • 服務器使用WebService處理數(shù)據(jù),并返回結(jié)果。
  • 使用WebService時wx.request需要使用post方式
  • 參數(shù)對應:wx.request請求data中的參數(shù)必須與WebService中對應的參數(shù)得名稱、類型一樣。 
    3. 客戶端代碼
 

		
  1. <!--index.wxml-->
  2. <view class="container">
  3. <view bindtap="bindViewTap" class="userinfo">
  4. <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  5. <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  6. </view>
  7. <view class="usermotto">
  8. <text class="user-motto">{{motto}}</text>
  9. <!-- <button bindtap="onButtonchange">點擊</button>
  10. <button bindtap="add">add</button>
  11. <button bindtap="remove">remove</button>-->
  12. <button bindtap="requestWebService">測試</button>
  13. </view>
  14. </view>
 

		
  1. requestWebService:function(){
  2. var that=this//注意這里必須緩存,不然無法在回調(diào)中
  3. 獲取數(shù)據(jù)后進行操作
  4.  
  5. wx.request({
  6. url: 'http://localhost:53639/HelloServer.asmx/Name',
  7. data: {
  8. a:1,
  9. b:2
  10. },
  11. method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
  12. // header: { }, // 設置請求的 header
  13. success: function(res){
  14. // success
  15. console.log(res)
  16. that.setData({motto:res.data.d})//這里是that不是this
  17. },
  18. fail: function() {
  19. // fail
  20. },
  21. complete: function() {
  22. // complete
  23. }
  24. })
  25. }

4.WebService代碼

 

		
  1. public class HelloServer : System.Web.Services.WebService
  2. {
  3.  
  4. [WebMethod]
  5. public int[] Name(int a, int b)
  6. {
  7. return new int[] { a,b};
  8. }
  9. }

5.運行結(jié)果  運行前: 

運行后:

源碼地址:http://download.csdn.net/detail/ywjun0919/9753671  源碼下載:WeChatTest.rar



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.u-renovate.com/wxmini/doc/course/17994.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×