5.小程序的Ajax数据请求

左手的ㄟ右手 2023-02-17 11:07 12阅读 0赞

1.接口
    	Mock服务器开启，只要把图片等所有静态资源文件放在public文件夹下，直接可以通过Mock服务器localhost:3000去找相应的路径
    http://localhost:3000/images/0/a.jpg(api/public/images/0/a.jpg)
    http://localhost:3000/recommends(db.json --> recommends:[{ },{ }....])

![在这里插入图片描述][20200613144552791.png]

2.小程序自带请求方案
    	在页面初次渲染完成onload(){ }来请求数据(也可以在onReady进行)，onReady会自动执行。
        
      // 接口已写好的情况下
      onLoad: function () { 
          // Ajax请求(很像jQuery)
            wx.request({ 
              url: 'https://m.maoyan.com/ajax/mostExpected?ci=10&limit=10&offset=0&token=&optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&optimus_risk_level=71&optimus_code=10',
              data:{ 
    
              },
              success:(res)=>{ 
                console.log(res.data) // res.data 后端真正返回的数据
              }
            })
    }
    // 会报错，需要将接口加入白名单
    
    3.注意：
    (1)如果后端接口已上线：
        <1>小程序没有跨域限制
        <2>为了掩护安全，需要将自己的后台接口加入了白名单
        <3>这个接口必须是https安全协议的接口(比如猫眼，没有跨域限制)
    
    (2)如果使用Mock服务器(模拟)：
    如果是开发阶段，后端接口未开发完成，我们可以开启小程序不校验域名这个功能
    
    3.域名加入白名单(猫眼的https接口)
    微信小程序平台 --> 开发 --> 开发设置 --> 服务器域名 --> request合法域名 
    --> 修改 --> 复制粘贴猫眼的https+域名(https://m.maoyan.com) --> 保存并提交
                               
    4.后端接口还没写好，使用Mock服务器模拟
      onLoad: function (options) { 
          // Ajax请求(很像jQuery)
          wx.request({ 
            url: 'http://localhost:3000/recommends',
            data:{ 
    
            },
            success:(res)=>{ 
              console.log(res.data) //res.data 后端真正返回的数据
            }
          })
      }
    注意，这时候没法在小程序平台配置白名单，要在详情中配置：
    微信开发者工具 --> 详情 --> 本地配置(项目配置可以看到合法域名有哪些) --> 不校验合法域名，web-view(业务域名)、TLS版本以及HTTPS证书(只适用于开发阶段)
    开发阶段勾选(不想校验)
    生产阶段取消勾选(需要校验)
    
    这样就能拿到数据了！

db.json

{ 
      "recommends": [
        { 
          "id": 1,
          "name": "Thinkpad",
          "url": "/images/0/a.jpg"
        },
        { 
          "id": 2,
          "name": "厨卫品类日",
          "url": "/images/0/b.jpg"
        },
        { 
          "id": 3,
          "name": "超级品牌日",
          "url": "/images/0/c.jpg"
        },
        { 
          "id": 4,
          "name": "一次性口罩",
          "url": "/images/0/d.jpg"
        }
      ],
      "goods": [
        { 
          "id": 1,
          "name": "荣耀9X",
          "feature": "麒麟810 4000mAh续航 4800万超清夜拍 6.59英寸升降全面屏 全网通6GB+64GB 魅海蓝",
          "price": 1299,
          "goodcomment": "97%",
          "poster": "/images/1/poster.jpg",
          "slides": [
            "/images/1/detail_1.jpg",
            "/images/1/detail_2.jpg",
            "/images/1/detail_3.jpg"
          ]
        },
        { 
          "id": 2,
          "name": "小米（MI） Redmi 8A",
          "feature": "超长续航 震撼大音量 AI人脸解锁",
          "price": 749,
          "goodcomment": "98%",
          "poster": "/images/2/poster.jpg",
          "slides": [
            "/images/2/detail_1.jpg",
            "/images/2/detail_2.jpg",
            "/images/2/detail_3.jpg"
          ]
        },
        { 
          "id": 3,
          "name": "三星 Galaxy S20+",
          "feature": "5G(SM-G9860)双模5G 骁龙865 120Hz超感屏 8K视频 游戏手机 12GB+128GB 幻游黑",
          "price": 7999,
          "goodcomment": "98%",
          "poster": "/images/3/poster.jpg",
          "slides": [
            "/images/3/detail_1.jpg",
            "/images/3/detail_2.jpg",
            "/images/3/detail_3.jpg"
          ]
        },
        { 
          "id": 4,
          "name": "荣耀20S",
          "feature": "3200万人像超级夜景 4800万超广角AI三摄 麒麟810 全网通版8GB+128GB 蝶羽白",
          "price": 1999,
          "goodcomment": "97%",
          "poster": "/images/4/poster.jpg",
          "slides": [
            "/images/4/detail_1.jpg",
            "/images/4/detail_2.jpg",
            "/images/4/detail_3.jpg"
          ]
        },
        { 
          "id": 5,
          "name": "荣耀20青春版",
          "feature": "AMOLED屏幕指纹 4000mAh大电池 20W快充 4800万 手机 6GB+64GB 冰岛幻境",
          "price": 1199,
          "goodcomment": "97%",
          "poster": "/images/5/poster.jpg",
          "slides": [
            "/images/5/detail_1.jpg",
            "/images/5/detail_2.jpg",
            "/images/5/detail_3.jpg"
          ]
        },
        { 
          "id": 6,
          "name": "Apple iPhone 11",
          "feature": "爱买不买 贵",
          "price": 5999,
          "goodcomment": "95%",
          "poster": "/images/6/poster.jpg",
          "slides": [
            "/images/6/detail_1.jpg",
            "/images/6/detail_2.jpg",
            "/images/6/detail_3.jpg"
          ]
        },
        { 
          "id": 7,
          "name": "vivo U3x",
          "feature": "6GB+64GB 赤茶红 5000mAh大电池 18W双引擎闪充 超广角AI三摄 骁龙665处理器 全网通4G手机",
          "price": 999,
          "goodcomment": "97%",
          "poster": "/images/7/poster.jpg",
          "slides": [
            "/images/7/detail_1.jpg",
            "/images/7/detail_2.jpg",
            "/images/7/detail_3.jpg"
          ]
        },
        { 
          "id": 8,
          "name": "荣耀Play3",
          "feature": "6.39英寸魅眼全视屏 4000mAh大电池 真4800万AI三摄 麒麟710F自研芯片 畅玩全网通6GB+64GB 幻夜黑",
          "price": 999,
          "goodcomment": "98%",
          "poster": "/images/8/poster.jpg",
          "slides": [
            "/images/8/detail_1.jpg",
            "/images/8/detail_2.jpg",
            "/images/8/detail_3.jpg"
          ]
        },
        { 
          "id": 9,
          "name": "小米（MI） Redmi Note8",
          "feature": "品质小金刚 4800万四摄 骁龙665",
          "price": 899,
          "goodcomment": "97%",
          "poster": "/images/9/poster.jpg",
          "slides": [
            "/images/9/detail_1.jpg",
            "/images/9/detail_2.jpg",
            "/images/9/detail_3.jpg"
          ]
        },
        { 
          "id": 10,
          "name": "华为 HUAWEI Mate 30",
          "feature": "5G 麒麟990 4000万超感光徕卡影像双超级快充8GB+128GB亮黑色5G全网通游戏手机",
          "price": 4499,
          "goodcomment": "97%",
          "poster": "/images/10/poster.jpg",
          "slides": [
            "/images/10/detail_1.jpg",
            "/images/10/detail_2.jpg",
            "/images/10/detail_3.jpg"
          ]
        },
        { 
          "id": 11,
          "name": "荣耀20 PRO",
          "feature": "4800万全焦段AI四摄 双光学防抖 麒麟980 全网通4G 8GB+128GB 幻夜星河 拍照手机",
          "price": 2499,
          "goodcomment": "95%",
          "poster": "/images/11/poster.jpg",
          "slides": [
            "/images/11/detail_1.jpg",
            "/images/11/detail_2.jpg",
            "/images/11/detail_3.jpg"
          ]
        },
        { 
          "id": 12,
          "name": "华为（HUAWEI） nova 5 Pro",
          "feature": "超级夜景/AI四摄/麒麟980",
          "price": 2499,
          "goodcomment": "96%",
          "poster": "/images/12/poster.jpg",
          "slides": [
            "/images/12/detail_1.jpg",
            "/images/12/detail_2.jpg",
            "/images/12/detail_3.jpg"
          ]
        },
        { 
          "id": 13,
          "name": "Apple iPhone Xs Max",
          "feature": "面容ID 双卡双待",
          "price": 7299,
          "goodcomment": "97%",
          "poster": "/images/13/poster.jpg",
          "slides": [
            "/images/13/detail_1.jpg",
            "/images/13/detail_2.jpg",
            "/images/13/detail_3.jpg"
          ]
        },
        { 
          "id": 14,
          "name": "vivo iQOO Neo 855版",
          "feature": "HDR10显示 骁龙855 大存储",
          "price": 2198,
          "goodcomment": "96%",
          "poster": "/images/14/poster.jpg",
          "slides": [
            "/images/14/detail_1.jpg",
            "/images/14/detail_2.jpg",
            "/images/14/detail_3.jpg"
          ]
        },
        { 
          "id": 15,
          "name": "华为 HUAWEI 畅享8e青春",
          "feature": "2GB+32GB全面屏 黑色 全网通版 移动联通电信4G手机 双卡双待",
          "price": 499,
          "goodcomment": "98%",
          "poster": "/images/15/poster.jpg",
          "slides": [
            "/images/15/detail_1.jpg",
            "/images/15/detail_2.jpg",
            "/images/15/detail_3.jpg"
          ]
        },
        { 
          "id": 16,
          "name": "海信(Hisense) 阅读手机A5",
          "feature": "5.84英寸护眼水墨屏 墨水屏 电纸书 阅读器 尊享版4GB+64GB(墨玉黑) 全网通4G手机",
          "price": 1499,
          "goodcomment": "95%",
          "poster": "/images/16/poster.jpg",
          "slides": [
            "/images/16/detail_1.jpg",
            "/images/16/detail_2.jpg",
            "/images/16/detail_3.jpg"
          ]
        }
      ],
      "carts": [
        { 
          "goodId": 1,
          "number": 2,
          "checked": false,
          "username": "饮冰",
          "id": 1
        }
      ],
      "users": []
    }

[20200613144552791.png]: https://img-blog.csdnimg.cn/20200613144552791.png