收藏
回答

小程序与服务器对接数据怎么交互?发送一个数据xx,服务器自动匹配信息发回来一个?

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 需求 win64 all 1.02

本人不懂后端,小程序基础界面和按钮配资已经做完,就是服务器用的腾讯云,怎么能把数据上传上去,在服务器管理平台(phpMyAdmin)怎么能看见?看见之后怎么能自动匹配返回一个别的需要什么样子的操作,求大神们解答

最后一次编辑于  2018-06-15
回答关注问题邀请回答
收藏

1 个回答

  • 道火自然·刘明华
    道火自然·刘明华
    2018-06-16

    把你的小程序后端也是API,或者你想象成API 的概念是一样

    微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下。

    1. //list.js  

    2. //获取应用实例  

    3. var app = getApp()  

    4. Page({  

    5.   data: {  

    6.     list:[],  

    7.     hiddenLoading: true,  

    8.     url: ''  

    9.   },  

    10.   loadList: function () {  

    11.     var that = this;  

    12.     that.setData({  

    13.       hiddenLoading: !that.data.hiddenLoading  

    14.     })  

    15.     var url = app.urls.CloudData.getList;  

    16.     that.setData({  

    17.       url: url  

    18.     });  

    19.     wx.request({  

    20.       url: url,  

    21.       data: {},  

    22.       method: 'GET',  

    23.       success: function (res) {  

    24.         var list= res.data.list;  

    25.         if (list == null) {  

    26.           list = [];  

    27.         }  

    28.         that.setData({  

    29.           list: list,  

    30.           hiddenLoading: !that.data.hiddenLoading  

    31.         });  

    32.          wx.showToast({  

    33.           title: "获取数据成功",  

    34.           icon:  'success',  

    35.           duration: 2000  

    36.         })  

    37.       },  

    38.       fail: function (e) {  

    39.         var toastText='获取数据失败' + JSON.stringify(e);  

    40.         that.setData({  

    41.           hiddenLoading: !that.data.hiddenLoading  

    42.         });  

    43.         wx.showToast({  

    44.           title: toastText,  

    45.           icon:  '',  

    46.           duration: 2000  

    47.         })  

    48.       },  

    49.       complete: function () {  

    50.         // complete  

    51.       }  

    52.     }),  

    在loadList函数中进行了网络请求,请求的数据放到了data的list中。我们使用setData来修改list,在该函数调用之后,微信小程序的框架就会判断数据状态的变化,然后进行diff判断,如果有变化就渲染到界面中。这个与react.js的渲染方式相似,主要是内部维护了一个类似于虚拟文档的对象,然后通过对虚拟文档的判断来呈现界面,这样可以大大提高性能。


    这里我们还做了一个下拉刷新的触发,即onPullDownRefresh函数,为了能够使用下拉刷新,我们需要进行配置,现在我们只需要当前页面生效,所以只要在对应页的json中配置即可,即在list.json中配置。

    list.json


    [csharp] 

    1. {  

    2.     "navigationBarTitleText""产品列表",      

    3.     "enablePullDownRefresh":true  

    4. }  

    如果需要所有的页面的生效,可以在app.json中的window中配置。


    app.json

    [javascript] 

    1. {  

    2.   "pages":[  

    3.     "pages/index/index",  

    4.     "pages/logs/logs",  

    5.     "pages/list/list"  

    6.   ],  

    7.   "window":{  

    8.     "backgroundTextStyle":"light",  

    9.     "navigationBarBackgroundColor""#fff",  

    10.     "navigationBarTitleText""WeChat",  

    11.     "navigationBarTextStyle":"black",  

    12.     "enablePullDownRefresh":true  

    13.   }  

    14. }  

    在app.json中,还有一个pages,我们需要路由的页面都需要在这里注册,否则无法路由到。


    在请求数据的时候,加入了等待和获取成功失败的提示。这需要相应的页面配合,页面代码list.wxm.如下


    [javascript] 

    1. <!--list.wxml-->  

    2. <view class="container container-ext">  

    3.   <!--默认隐藏-->  

    4.   <loading hidden="{{hiddenLoading}}">正在加载</loading>  

    5.   <scroll-view scroll-y="true">  

    6.     <view>  

    7.       <block wx:for="{{list}}" wx:key="no">  

    8.         <view class="widget">  

    9.           <view>  

    10.             <text >{{item.no}}({{item.content}})</text>  

    11.           </view>  

    12.         </view>  

    13.       </block>  

    14.     </view>  

    15.   </scroll-view>  

    16. </view>  


    [css] view plain

    /**list.wxss**/  

    1. .widget {  

    2.   positionrelative;  

    3.   margin-top5rpx;  

    4.   margin-bottom5rpx;  

    5.   padding-top10rpx;  

    6.   padding-bottom10rpx;  

    7.   padding-left40rpx;  

    8.   padding-right40rpx;  

    9.   border#ddd 1px solid;  

    10. }  

    [css]  

    1. /**app.wxss**/  

    2. .container {  

    3.   height100%;  

    4.   display: flex;  

    5.   flex-direction: column;  

    6.   align-items: center;  

    7.   justify-content: space-between;  

    8.   box-sizing: border-box;  

    9.   padding-top10rpx;  

    10.   padding-bottom10rpx;  

    11. }  

    最终的呈现效果




    2018-06-16
    赞同
    回复