小程序模板网

微信小程序使用WebService(Asp.net)进行数据交互

开发微信小程序掌握了数据交互的方法,再加上web的知识,基本就能开发出了,研究了下与服务器通讯,暂时不知道怎么用ajax通讯,但可以使用WebService可以进行交互尝试开发微信小程序(如果 ...

 
 
 

开发微信小程序掌握了数据交互的方法,再加上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中对应的参数得名称、类型一样。 
    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//注意这里必须缓存,不然无法在回调中
  3. 获取数据后进行操作
  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.运行结果  运行前: 

运行后:

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/17994.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询