微信小程序学习点滴《五》：网络请求(POST请求)填坑指南

1. <span style="font-size:24px;">//index.js
2. //获取应用实例
3. var app = getApp()
4. Page( {
5. data: {
6. toastHidden: true,
7. city_name: '',
8. },
9. onLoad: function() {
10. that = this;
11. wx.request( {
12. url: "https://op.juhe.cn/onebox/weather/query",
13. header: {
14. "Content-Type": "application/x-www-form-urlencoded"
15. },
16. method: "POST",
17. //data: { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" },
18. data: Util.json2Form( { cityname: "上海", key: "1430ec127e097e1113259c5e1be1ba70" }),
19. complete: function( res ) {
20. that.setData( {
21. toastHidden: false,
22. toastText: res.data.reason,
23. city_name: res.data.result.data.realtime.city_name,
24. date: res.data.result.data.realtime.date,
25. info: res.data.result.data.realtime.weather.info,
26. });
27. if( res == null || res.data == null ) {
28. console.error( '网络请求失败' );
29. return;
30. }
31. }
32. })
33. },
34. onToastChanged: function() {
35. that.setData( { toastHidden: true });
36. }
37. })
38. var that;
39. var Util = require( '../../utils/util.js' );</span>
40.  

1. <span style="font-size:24px;"><!--index.wxml-->
2. <view class="container">
3. <toast hidden="{{toastHidden}}" bindchange="onToastChanged">
4. {{toastText}}
5. </toast>
6. <view>{{city_name}}</view>
7. <view>{{date}}</view>
8. <view>{{info}}</view>
9. </view></span>
10.  

 

1. <span style="font-size:24px;">//util.js
2. function json2Form(json) {
3. var str = [];
4. for(var p in json){
5. str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));
6. }
7. return str.join("&");
8. }
9. module.exports = {
10. json2Form:json2Form,
11. }</span>
12.