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

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

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

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

   #region  --- 查询绑定信息 ---

         [HttpGet]

         public string GetQuery(string strEcNo)

         {

             //查询此EC单是否被绑定过

             try

             {

                 PcdbE.PcdbDataContext _Pc = new PcdbE.PcdbDataContext();

                 var _dt = from s in _Pc.EcDressLogs

                           where s.EcNo == strEcNo

                           select s;

                 var _count = _dt.Count();

                 if(_count.Equals())

                 {

                     return "没有绑定记录";

                 }

                 return JsonConvert.SerializeObject(_dt.ToList());

             }

             catch (Exception)

             {

                 return "error";

             }

         }

         #endregion

2 -- 客户端如何Call 个API ，先要在小程序管理员去注册API 发布的服务器域名， https：// 这部分，好像之前做过了
BtnQuery 是绑定给界面的一个方法，在.wxml文件中

 <!--按钮-->

    <view class="loginBtnView">

     <button  type="primary"  bindtap="BtnQuery"> Query </button>

    </view>

3 -- 在.js 文件中

 BtnQuery: function (){

     if (this.data.ecno.length == 0)

     {

       wx.showToast({

               title: '不能为空',

               icon: 'loading',

               duration: 2000

          })   

     }else{

       wx.request({

         method: "GET",

         url: 'https://（这里是你在微信小程序注册的你发布的API 域名）/api/pc/GetQuery', //仅为示例，并非真实的接口地址

         data: {

           strEcNo: this.data.ecno

         },

         header: {

           'content-type': 'application/json' // 默认值

         },

         success: (res) => {

           this.setData({

               warning: res.data

             })

           var result = JSON.parse(res.data);

           if(res.data !="")

           {

             console.log(result)

           }

           var x = result[0].Xdress

           var y = result[0].Ydress

           wx.navigateTo({ url: '/pages/tzdress/tzdress?xdress='+x+'&ydress='+y})

         }

       })

     }

   },

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

4 -- 那么问题来了：

wx.navigateTo({ url: '/pages/tzdress/tzdress?xdress='+x+'&ydress='+y})

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

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

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

  onLoad: function (options) {

     var _this = this;

     wx.getSystemInfo({

       success: function (res) {

         _this.setData({

           view: {

             Height: res.windowHeight - 150

           },

           longitude: options.xdress,

           latitude: options.ydress,

           circles: [{

             latitude: options.ydress,

             longitude: options.xdress,

             color: '#FF0000DD',

             fillColor: '#7cb5ec88',

             radius: 3000,

             strokeWidth: 1

           }]

         })

       }

     })

 }

巴特西

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

最新文章

热门文章