開發微信小程序掌握了數據交互的方法,再加上web的知識,基本就能開發出了,研究了下與服務器通訊,暫時不知道怎么用ajax通訊,但可以使用WebService可以進行交互嘗試開發微信小程序(如果 ...
開發微信小程序掌握了數據交互的方法,再加上web的知識,基本就能開發出了,研究了下與服務器通訊,暫時不知道怎么用ajax通訊,但可以使用WebService可以進行交互嘗試開發微信小程序(如果需要登錄之類的,也可以自定義握手方法或使用微信登錄驗證:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject)。
1. 小程序=前端頁面 + 服務器數據
2. 前端頁面與服務器的交互
<!--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.運行結果 運行前:
運行后:
源碼地址:http://download.csdn.net/detail/ywjun0919/9753671 源碼下載:WeChatTest.rar