WeChat Mini Program là một ứng dụng khách hàng, cần tương tác với máy chủ để hiển thị dữ liệu.

Để xây dựng API, chúng ta có thể sử dụng MVC4. Dưới đây là một ví dụ về một phương thức API dùng để truy vấn dữ liệu.

 1   #region  --- Tìm kiếm thông tin đơn hàng ---
 2         [HttpGet]
 3         public string TimKiemDonHang(string maDonHangTimKiem)
 4         {
 5             // Kiểm tra xem đơn hàng có tồn tại không
 6             try
 7             {
 8                 PcdbE.PcdbDataContext _context = new PcdbE.PcdbDataContext();
 9 
10                 var ketQuaTimKiem = from s in _context.DonHangLogs
11                           where s.MaDonHang == maDonHangTimKiem
12                           select s;
13 
14                 var soLuong = ketQuaTimKiem.Count();
15 
16                 if(soLuong.Equals(0))
17                 {
18                     return "Không tìm thấy bản ghi";
19                 }
20 
21                 return JsonConvert.SerializeObject(ketQuaTimKiem.ToList());  
22             }
23             catch (Exception)
24             {
25                 return "error";
26             }
27 
28         }
29         #endregion

Trên giao diện client, chúng ta cần một nút để kích hoạt việc gọi API.

1 <!-- Nút tìm kiếm -->
2    <view class="searchButtonView">  
3     <button  type="primary"  bindtap="handleTimKiemTap"> Tìm kiếm </button>  
4    </view> 

Trong file .js, chúng ta định nghĩa hàm xử lý sự kiện nhấp vào nút.

 1 handleTimKiemClick: function (){
 2     if (this.data.orderNumber.length == 0)
 3     {
 4       wx.showToast({
 5               title: 'Không được để trống',    
 6               icon: 'loading',    
 7               duration: 2000    
 8          })   
 9 
10     }else{
11 
12       wx.request({
13         method: "GET",    
14         url: 'https://（đây là tên miền API bạn đã đăng ký）/api/pc/TimKiemDonHang', // chỉ là ví dụ, không phải địa chỉ giao diện thực    
15         data: {
16           maDonHangTimKiem: this.data.orderNumber
17         },
18         header: {
19           'content-type': 'application/json' // giá trị mặc định
20         },
21         success: (res) => {
22           this.setData({
23               ketQuaTimKiem: res.data
24             })
25           var searchResult = JSON.parse(res.data); 
26           if(res.data !="")
27           {
28             console.log(searchResult)
29           }
30           var toaDoX = searchResult[0].Xdress
31           var toaDoY = searchResult[0].Ydress
32           wx.navigateTo({ url: '/pages/chiTietDonHang/chiTietDonHang?toaDoX='+toaDoX+'&toaDoY='+toaDoY})   
33         }
34 
35       })
36 
37 
38     }
39   },

Phần quan trọng nhất vẫn là dữ liệu được trả về trong hàm success. Vì API trả về một danh sách, và trong trường hợp này chỉ có một kết quả, chúng ta lấy phần tử đầu tiên của danh sách. Nếu có nhiều kết quả, chúng ta sẽ cần sử dụng vòng lặp. Cuối cùng, wx.navigateTo được sử dụng để điều hướng đến một trang khác trong WeChat Mini Program và truyền các giá trị.

Vậy làm thế nào để nhận các giá trị được truyền qua URL?

Chúng ta sử dụng hàm onLoad trong lifecycle của trang, nơi các tham số được truyền sẽ nằm trong đối tượng options.

 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.toaDoX,
11           latitude: options.toaDoY,
12           circles: [{
13             latitude: options.toaDoY,
14             longitude: options.toaDoX,
15             color: '#FF0000DD',
16             fillColor: '#7cb5ec88',
17             radius: 3000,
18             strokeWidth: 1
19 
20           }]
21         })
22       }
23     })
24 }