【星海随笔】微信小程序(三)

网络数据请求

1.小程序中网络数据请求的限制

出于安全性方面的考虑,小程序官方对 数据接口的请求 做出了如下

两个限制:

① 只能请求 HTTPS 类型的接口

② 必须将 接口的域名 添加到 信任列表

微信小程序只能请求 https 类型的接口

且需要请求的域名必须提前进行设置后,才可以通过微信小程序访问该请求
https://www.escook.cn/

配置方式: 登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名.

配置 request 合法域名

注意事项

  • 域名只支持 https 协议
  • 域名不能使用 IP 地址 或 localhost
  • 域名必须经过 ICP 备案
  • 服务器域名一个月最多可申请 5 次修改
发起 GET 请求

JSONPlaceholder 是一个提供免费的在线 REST API 的网站,我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数。或者当我们程序需要获取一些假数据、假图片时也可以使用它。

网站地址:http://jsonplaceholder.typicode.com/

嘿嘿 重要的事情说三遍
注:如果不在wx官网网站上设置自己要用到的网站地址,在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务,这里暂时使用的是一个免费的API 接口网址进行测试,注:每月只能修改5次网址接口地址
注:如果不在wx官网网站上设置自己要用到的网站地址,在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务,这里暂时使用的是一个免费的API 接口网址进行测试,注:每月只能修改5次网址接口地址
注:如果不在wx官网网站上设置自己要用到的网站地址,在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务,这里暂时使用的是一个免费的API 接口网址进行测试,注:每月只能修改5次网址接口地址

微信小程序中有个顶级对象是 wx

调用微信小程序提供的 wx.request() 方法, 可以发起 GET 数据请求,示例代码如下:

html 复制代码
<!--pages/home/home.wxml-->

<text></text>
<view>作者: 王鑫</view>
支持商业活动相关合作
<view>电话: 15135151098</view>
<button bindtap="getInfor">发起GET</button>

要和data处于同一级

data 为发送到服务器的数据

js 复制代码
xxx {
  xxx
},
getInfor: function() {
    wx.request({
      url: 'https://example/api/get',  
      method: 'GET',
      data: {
        name: 'zs',
        age: 20
      },
      success: (res) => {
        console.log('请求成功'),
        console.log(res.data)
      },
      fail(err) {
        console.log('请求错误'),
        console.error('Error',err);
      },
      complete(res) {
        console.log("请求完成")
      }
    })
  },
  xxx {
    xxx
  },
py 复制代码
method: 'POST'
请求方式
在页面刚加载时请求数据

在很多情况下,需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数,示例代码如下:

当页面一加载,一开始,这个函数就会执行

js 复制代码
/**
* 生命周期函数 -- 监听页面数据
*/
  onLoad: function (options) {
    this.getSwiperList()
    this.getGridList()
    this.getInfor()
  },
  // 获取轮播图的数据
  getSwiperList() { ...
  },
  // 获取九宫格的数据
  getGridList() { ...
  }
}}

如果后端没有https接口,仅提供http请求,也可以进行测验

详情-> 本地设置->点击(不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS 证书 )

注意:

跳过 request 合法域名校验的选项,仅限在开发与调试阶段使用!

网络数据请求

关于 跨域Ajax 的说明

跨域问题,只存在于 基于浏览器的 Web开发中。由于 小程序的宿主环境 不是浏览器,而是微信客户端

所以小程序不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信小程序,所以小程序中 不能叫做 "发起Ajax请求" , 而是叫做 "发起网络数据请求"。

案例实现:

首页效果以及实现

① 新建项目并梳理项目结构

② 配置导航栏效果

③ 配置tabBar效果

④ 实现轮播图效果

⑤ 实现九宫格效果

⑥ 实现图片布局

导航栏

app.json -> window

页面配置中常用的配置项

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor #000000 当前页面导航栏背景颜色,如 #000000
navigationBarTextStyle String white 当前页面导航栏标题颜色,仅支持 black/white
navigationBarTitleText String Weixin 当前页面导航栏标题文字内容
backgroundColor HexColor #ffffff 当前页面窗口的背景色
backgroundTextStyle String dark 当前页面下拉 loading 的样式,仅支持 dark/light
enablePullDownRefresh Boolean false 是否 为当前页面开启下拉刷新的效果
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px
配置tabBar

和window窗口平级

json 复制代码
"tabBar": {
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "home"
        // "iconPath": "iconpath",  // 未选中时候的图标。 例如 /image/tabs/home.png
        // "selectedIconPath": "selectIconpath"   //选中时候的图标
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "text"
        // "iconPath": "iconpath",
        // "selectedIconPath": "selectIconpath"
      }
    ]
  },
轮播图

https://img-blog.csdnimg.cn

想到一个好主意,免费撸CSDN的羊毛。

html 复制代码
<swiper class="swiper-container" indicator-dots indicator-active-color="gray" indicator-active-color="black" autoplay interval="5000" circular>
  <!-- 第1项 -->
  <swiper-item>
    <view class="item">石头</view>
  </swiper-item>
  <!-- 第2项 -->
  <swiper-item>
    <view class="item">剪刀</view>
  </swiper-item>
  <!-- 第3项 -->
  <swiper-item>
    <view class="item">布</view>
  </swiper-item>
	<swiper-item>
	  <image src="/images/1.png"  mode="aspectFill"></image>
	</swiper-item>
</swiper>
获取轮播图数据的方法

JS

js 复制代码
data: {
  swiperList: []
},
onLoad: function (option){
  this.getSwiperList()
},
getSwiperList(){
  wx.request() {
    url: 'https://img-blog.csdnimg.cn/xxx',
    method: 'GET',
    success: (res) => {
      console.log(res)
      this.setData({
        swiperList: res.data 
      })
    }
  }
}

wxml

html 复制代码
<swiper indicator-dots circular>
  <swiper-item wx:for="{{swiperList}}" wx:key="id">
    <image src="{{item.image}}"></image>
  </swiper-item>
</swiper>

wxss

css 复制代码
swiper {
  height: 350rpx;
}

swiper image {
  width: 100%;
  height: 100%;
}
实现九宫格

https://www.escook.cn/categories

Also Need An List

js 复制代码
data: {
  // 存放九宫格的列表
  gridList: []
},
onLoad: function (option){
  this.getSwiperList()
  this.getGridList()
},
// 定义一个新的函数
// 获取九宫格数据的方法
getGridList() {
  wx.request({
    url: 'https://www.escook.cn/categories',
    method: 'GET',
    success: (res) => {
      console.log(res)   //打印了一个对象,里面就是一个九宫格的列表
      this.setData({
        gridList: res.data
      })
    }
  })
},

wxml

html 复制代码
<view class="grid-list">
  <view class="grid-item" wx:for="{{gridList}}" wx:key="id">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
</view>

wxss

css 复制代码
.grid-list {
  display: flex;
  flex-wrap: wrap;
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}

.grid-item {
  width: 33.33%;
  height: 200rpx;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  box-sizing: border-box;
}
.grid-item image {
  width: 60rpx;
  height: 60rpx;
}
.grid-item text {
  font-size: 24rpx
  margin-top: 10rpx;
}
实现图片布局
html 复制代码
<view class="img=box">
  <image src="/images/link-01.png" mod="widthFix"></image>
  <image src="/images/link-02.png" mod="widthFix"></image>
</view>
css 复制代码
.img-box{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}

.img-box image {
  width: 45%;
}
相关推荐
丁总学Java2 小时前
页面、组件、应用、生命周期(微信小程序)
微信小程序·小程序·生命周期
编程千纸鹤7 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域8 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
李少兄13 小时前
Notepad++ 更改字体大小和颜色
notepad++·技巧
丁总学Java19 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域21 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86821 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650221 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac1 天前
微信小程序的组件
微信小程序