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(0))
                {
                    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

          }]
        })
      }
    })
}