20171018 微信小程序客户端数据和服务器交互

Post author:xfxia
Post published:2023年9月2日
Post category:小程序

— 时常在想，怎么样才能把知识写的清晰，其实是我理解的不够清晰

微信小程序其实是一个客户端页面，也是需要和服务器交互才能体现数据。

1 –服务器搭建Web API ：MVC4 中的一个模板，如下是Query API 的一个Get 方式，只是为了了解 JsonConvert.SerializeObject(_dt.ToList()); 值如何返回到界面

 1   #region  --- 查询绑定信息 ---
 2         [HttpGet]
 3         public string GetQuery(string strEcNo)
 4         {
 5             //查询此EC单是否被绑定过
 6             try
 7             {
 8                 PcdbE.PcdbDataContext _Pc = new PcdbE.PcdbDataContext();
 9 
10                 var _dt = from s in _Pc.EcDressLogs
11                           where s.EcNo == strEcNo
12                           select s;
13 
14                 var _count = _dt.Count();
15 
16                 if(_count.Equals(0))
17                 {
18                     return "没有绑定记录";
19                 }
20 
21                 return JsonConvert.SerializeObject(_dt.ToList());  
22             }
23             catch (Exception)
24             {
25                 return "error";
26             }
27 
28         }
29         #endregion

2 — 客户端如何Call 个API ，先要在小程序管理员去注册API 发布的服务器域名， https：// 这部分，好像之前做过了

BtnQuery 是绑定给界面的一个方法，在.wxml文件中

1 <!--按钮-->  
2    <view class="loginBtnView">  
3     <button  type="primary"  bindtap="BtnQuery"> Query </button>  
4    </view>

3 — 在.js 文件中

 1 BtnQuery: function (){
 2     if (this.data.ecno.length == 0)
 3     {
 4       wx.showToast({
 5               title: '不能为空',    
 6               icon: 'loading',    
 7               duration: 2000    
 8          })   
 9 
10     }else{
11 
12       wx.request({
13         method: "GET",    
14         url: 'https://（这里是你在微信小程序注册的你发布的API 域名）/api/pc/GetQuery', //仅为示例，并非真实的接口地址    
15         data: {
16           strEcNo: this.data.ecno
17         },
18         header: {
19           'content-type': 'application/json' // 默认值
20         },
21         success: (res) => {
22           this.setData({
23               warning: res.data
24             })
25           var result = JSON.parse(res.data); 
26           if(res.data !="")
27           {
28             console.log(result)
29           }
30           var x = result[0].Xdress
31           var y = result[0].Ydress
32           wx.navigateTo({ url: '/pages/tzdress/tzdress?xdress='+x+'&ydress='+y})   
33         }
34 
35       })
36 
37 
38     }
39   },

主要的部分还是succes 返回里面的数据格式，由于在API 中返回的是list ，我这里因为只有一个数据，所以取得是list里面第一个位置，当然如果是list表数据多，就需要写循环的方式了，而最后面的wx.navigateTo 是为了在微信小程序客户端进行，页面跳转使用的，并传递了，值

4 — 那么问题来了：

      
       wx

        .

         navigateTo

          ({

           url

            :

              ‘/pages/tzdress/tzdress?xdress=’

               +

                x

                 +

                  ‘&ydress=’

                   +

                    y

                     })

       传递的值，在对应页面又如何的接收？

       对应就需要到tzdress.js文件中去看， onLoad 是小程序页面的生命周期中的一个页面加载部分，页面加载时执行， 而值传递，值都是在options中的。

       所以取值就是options.xdress 参数名称即可

 1  onLoad: function (options) {
 2 
 3     var _this = this;
 4     wx.getSystemInfo({
 5       success: function (res) {
 6         _this.setData({
 7           view: {
 8             Height: res.windowHeight - 150
 9           },
10           longitude: options.xdress,
11           latitude: options.ydress,
12           circles: [{
13             latitude: options.ydress,
14             longitude: options.xdress,
15             color: '#FF0000DD',
16             fillColor: '#7cb5ec88',
17             radius: 3000,
18             strokeWidth: 1
19 
20           }]
21         })
22       }
23     })
24 }

转载于:https://www.cnblogs.com/Soar-Pang/p/7685289.html

你可能也喜欢