class05：全局配置和网络请求

一、全局配置

1.全局配置在app.json中设置

链接: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

2.底部TabBar的配置

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
必写属性：list

注：TabBar指向的页面在pages字段中需要放在其他页面之前，否则将不显示。

"tabBar": {
    "list":[{
      "pagePath":"pages/index/index",
      "text": "首页",
      "iconPath": "./images/home01.png",
      "selectedIconPath": "./images/home02.png"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志",
      "iconPath": "./images/jornal01.png",
      "selectedIconPath": "./images/jornal02.png"
    } 
  ]
  },

全局配置和页面配置若出现冲突则以页面配置来显示。

二、网络请求

链接: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

1.发起请求

发起请求时要在小程序中设置信任该接口对应的域名
登录小程序官网 -> 开发管理 -> 开发设置 -> 服务器域名

注： 可在微信开发者工具app右上角详情中查看已配置域名：

实例：将百度域名设置为信任列表的域名
1.进入百度官网复制网址

2.进入小程序官网的上述服务器域名点击开始配置并扫码验证身份

3.将网址填入对应方框点击保存并提交


注：若需要使用ws、http等域名网址时，需要在app勾选不校验的选项。如图所示。(仅开发时使用)

三、网络请求案例

链接: https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html
实例：发起get请求
###遇到的问题：无法识别npm

###解决方法：
1.查看环境变量是否配置好，cmd中输入node -v回车查看是否有版本号；
2.以管理员身份运行vscode。

无误后开始：

1.初始化npm

初始化成功后会生成package.json文件

npm init -y

2.导入常用的基本包

导入成功会生成node_modiles文件

npm i express nodemon -s

3.可选择是否配置nodemon

即将以上字段修改为：

"start": "nodemon app.js"

注：nodemon后跟的是创建的对应入口文件的名称。

4.调试运行

// 开启终端
npm run start

5.node后端代码

const express = require("express");//导入express包
const app = express();//创建实例

//启动本地4000端口
app.listen(4000, ()=>{
    console.log("启动4000端口成功！");
})

//发起请求
app.get("/api/getData", (req, res)=>{
    console.log(req.query);
    res.send({
        id:10086,
        msg:"我收到你的get请求了。"
    });
})

###查看端口是否正确开启：在浏览器中输入地址搜索

6.将地址复制到微信开发者工具中的js代码中

<!--pages/test/test.wxml-->
<button type="primary" bindtap="getData">发起get请求</button>

// pages/test/test.js
Page({
  // 发起get请求
  getData(){
    wx.request({
      url:"http://localhost:4000/api/getData",
      method:"GET",
      data:{
        name:"kobe",
        age:40
      },
      success(res){
        console.log(res)
      }
    })
  },
})

三、实例：发起post请求

1.node后端代码

const express = require("express");//导入express包
const app = express();//创建实例

//启动本地4000端口
app.listen(4000, ()=>{
    console.log("启动4000端口成功！");
})

//解码
//提前处理请求传过来的数据
app.use(express.urlencoded({extended:true}));
app.use(express.json());

app.post("/api/postData", (req, res)=>{
    console.log(req.body);//获取post请求提交来的数据
    res.send({
        id:10010,
        msg:"我收到你的post请求了。"
    });
})

2.小程序代码

<!--pages/test/test.wxml-->
<button type="primary" bindtap="postData">发起post请求</button>

// pages/test/test.js
Page({
  // 发起post请求
  postData(){
    wx.request({
      url:"http://localhost:4000/api/postData",
      method:"POST",
      data:{
        name:"james",
        age:37
      },
      success(res){
        console.log(res)
      }
    })
  },
})

注：若需要在加载页面时就需要加载以上数据，则可在js文件的onLoad函数中加入对应代码：

3.实例：简单首页

1.在app.json中新建home首页和test页面，pages中会自动生成页面。并将页面名字改为“首页”。

2.在vscode中新建public文件夹保存所需图片。

3.完整代码

<!--pages/home/home.wxml-->
<!-- 轮播区域 -->
// 顺序点，自动播放，轮播时间，无缝轮播
<swiper indicator-dots autoplay interval="2000" circular>
   //通过id遍历轮播图片
  <swiper-item wx:for="{{swiperImgList}}" wx:key="id">
     //通过轮播图片地址显示图片
    <image src="{{item.imgUrl}}"></image>
  </swiper-item>
</swiper>

/* pages/home/home.wxss */
swiper{
  height: 500rpx;
}
swiper image{
  width: 100%;
  height: 100%;
}

// pages/home/home.js
Page({
  //页面的初始数据
  data: {
    swiperImgList:[] //轮播数据
  },
  //获取轮播图片
  getSwiperImgList(){
    wx.request({
      url: 'http://localhost:4000/swiper',
      method:"GET",
      success:(res)=>{
        // console.log(res);
        // res接收到数据后不能直接传到小程序组件上，故先赋值
        this.setData({
          swiperImgList : res.data
        })
      },//箭头函数中的this是外部函数的this，其本身没有this
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //页面加载时立即发起请求获取轮播数据
    this.getSwiperImgList();
  },
})

// node后端----app.js
const express = require("express");//导入express包
const app = express();//创建实例

//启动本地4000端口
app.listen(4000, ()=>{
    console.log("启动4000端口成功！");
});

app.use(express.static("./public"));//配置静态资源目录

//监听获取轮播数据的请求
app.get("/swiper", (req, res)=>{
    let staticUrl = "http://localhost:4000/swiper/";
    let imgArrData = [
        {
            id:1,
            imgUrl:staticUrl + "swiper01.jpg"
        },
        {
            id:2,
            imgUrl:staticUrl + "swiper02.webp"
        },
        {
            id:3,
            imgUrl:staticUrl + "swiper03.webp"
        },
    ];
    res.send(imgArrData);//监听到请求后发送后端数据
})