美文网首页
微信小程序3 数据请求

微信小程序3 数据请求

作者: bridegg | 来源:发表于2018-09-12 17:36 被阅读0次

    前言

    在数据请求之前,我们需要把微信小程序数据请求的坑过一遍,若无法满足这些坑,请放弃小程序吧
    1:微信小程序的请求地址需要在开发者小程序设置里配置
    2:微信的小程序必须是https接口,并且默认443端口,也是就是说不允许修改默认端口。
    3:域名必须经过 ICP 备案
    4:关于https证书


    证书

    若这些坑不算啥,那就可已开发小程序啦(当然,如果只是学习,以上可以忽略)
    来来来,打开你的微信小程序开发工具,啥也不要干,在测试环境我们不需要验证上面的那么多坑,比如自己起的本地服务啊啥的,需要把这个勾勾去掉


    去掉勾勾
    这样我们就能愉快的玩耍接口请求了

    正文

    先看下关于请求的文档
    了解下数据请求的参数

    请求参数
    都是中国字,大家看懂就o了,主要是看懂了也不会写,怎么办,我下面就开始附上代码。

    首先新建一个page 双色球list


    page

    然后将其调整到首页

      "pages": [
        "pages/ssq/ssqList",
        "pages/main/main",
        "pages/user/login"
      ],
    

    ok,我说下主要功能,我之前写了一个本地接口,是双色球列表,这个会有分页,也就是简单的加载更多,和刷新,然后每页展示20条,首先我们需要建立对象列表;
    先附上我的接口
    http://192.168.89.125:8099/shproject/ssq/listByBall?pageNum=0&pageSize=20
    返回参数

    {
      "code": "1",
      "Results": {
        "list": [
          {
            "id": "2017140",
            "creatTime": 1511798400000,
            "n1": "21",
            "n2": "22",
            "n3": "25",
            "n4": "28",
            "n5": "29",
            "n6": "30",
            "l7": "8"
          }......
        ]
      }
    }
    

    ok,下面就按照微信接口先测试接口通不通吧
    关键代码如下

     onLoad: function (options) {
        //直接在页面打开的时候获取数据
        this.getData();
      },
    
      getData:function(){
        wx.request({
          url:"http://192.168.89.125:8099/shproject/ssq/listByBall?pageNum=0&pageSize=20",
          data:"",
          //header:{...}用啥设置啥,我这里什么都不需要修改
          method:"GET",
          dataType:"json",//若设置json则直接返回的是对象,若其他返回貌似是String
         success:function(res){
           var obj=res;//我们这里打断点来看数据是否获取到了
            //这里执行数据操作,
          },
         fail:function(e){
    
         },
        complete: function (obj) {
    
         }
        })
      },
    

    注意,在page里调用方法必须使用this通过page的上下文去获取
    断点结果截图


    image.png

    结果获取到了,但是不是json呢?我们先把data的code拿到,修改success如下


    image.png

    通过断点可以看到,完全没有问题,微信直接帮我们把返回结果转成对象了。

    相关文章

      网友评论

          本文标题:微信小程序3 数据请求

          本文链接:https://www.haomeiwen.com/subject/hltbbxtx.html