4 列表渲染 在vue中和微信小程序中如何遍历的
微信小程序
Vue中发送网络请求axios
小程序中网络数据请求的限制
出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下 两个限制：
① 只能请求 HTTPS 类型的接口
② 必须将接口的域名添加到信任列表中
网络请求的方式
// 发送请求的方式Get请求 getInfo(){ wx.request({ url:"https://www.escook.cn/api/get", method:"GET", data:{ name:"李四", age:67 }, success:(res)=>{ console.log(res.data) } }) }, // 发送请求的方式为POST请求方式 Infopost(){ wx.request({ url:"https://www.escook.cn/api/post", method:"POST", data:{ name:"张三李四", age:23 }, success:(res)=>{ console.log(res.data) } }) },
<!--page/day02/day02.wxml--> <!-- 第一点 数据的绑定 --> <!-- <image src="/image/屏幕截图_20221027_193003.png" mode="aspectFill"/> <image src="/image/屏幕截图_20221027_193003.png" mode="aspectFit"/> <image src="/image/屏幕截图_20221027_193003.png" mode="widthFix"/> --> <text>微信小程序</text> <!-- 数据的绑定信息 --> <!-- 微信小程序的mustache语法内容介绍 在data中定义的数据信息 --> <!-- 绑定图片的属性 --> <view>{{info}}</view> <!-- <image src="{{imgSrc}}"></image> --> <view>{{randomNum>=50?'数字大于等于50':'数字小于等于50'}}</view> <!-- <view>{{randomNum1>0.50?'>5':'<5'}}< /view> --> <button type="primary" bindtap="big">按钮</button> {{count}} <button type="warn" bindtap="CountChange">+1</button> <!-- 事件传入参数 --> <button type="primary" bindtap="btn2" data-info="{{count}}">开始事件传入参数 </button> {{count}} <!-- bindinput语法格式 input>--> <input bindinput="btninput" value="{{msg}}"></input> <!-- wx:if wx:else wx:if else判断的语句条件 --> <view wx:if="{{type==1}}"> 男 </view> <view wx:elif="{{type==2}}"> 女 </view> <view wx:else=""> 保密 </view> <!-- 控制多个微信小程序的组件1信息 --> <block wx:if="{{false}}"> <view> 我是组件一 </view> <view> 我是组件二 </view> </block> <!-- 频繁的切换的时候使用 hidden --> <view hidden="{{flag}}"> 条件为true 则隐藏 否 显示 </view> <!-- wx:for 对组件的内容进行循环 --> <view wx:for="{{arr}}"> 索引:{{index}}, item项:{{item}} </view> <view> --------------------------------------- </view> <view wx:for="{{arr1}}"> 索引:{{index}}, item项:{{item}} </view> <!-- <view wx:for="{{arr2}} wx:for-index="idex" wx:for-item="itemNume"> 索引的下标:{{idex}}, item项:{{itemNume}} </view> --> <!-- 对象的遍历 --> <view> --------------------------------------- </view> <view wx:for="{{ userlist}}" wx:key="id"> {{item.name}} </view> <!-- 用户发送的是GET请求 --> <button bindtap="getInfo">用户发送的请求方式为GET请求</button> <!-- 用户发送的是GET请求 --> <button bindtap="Infopost">用户发送的请求方式为post请求</button> <!--page/day02/day02.wxml--> <!-- 第一点 数据的绑定 --> <!-- <image src="/image/屏幕截图_20221027_193003.png" mode="aspectFill"/> <image src="/image/屏幕截图_20221027_193003.png" mode="aspectFit"/> <image src="/image/屏幕截图_20221027_193003.png" mode="widthFix"/> --> <text>微信小程序</text> <!-- 数据的绑定信息 --> <!-- 微信小程序的mustache语法内容介绍 在data中定义的数据信息 --> <!-- 绑定图片的属性 --> <view>{{info}}</view> <!-- <image src="{{imgSrc}}"></image> --> <view>{{randomNum>=50?'数字大于等于50':'数字小于等于50'}}</view> <!-- <view>{{randomNum1>0.50?'>5':'<5'}}< /view> --> <button type="primary" bindtap="big">按钮</button> {{count}} <button type="warn" bindtap="CountChange">+1</button> <!-- 事件传入参数 --> <button type="primary" bindtap="btn2" data-info="{{count}}">开始事件传入参数 </button> {{count}} <!-- bindinput语法格式 input>--> <input bindinput="btninput" value="{{msg}}"></input> <!-- wx:if wx:else wx:if else判断的语句条件 --> <view wx:if="{{type==1}}"> 男 </view> <view wx:elif="{{type==2}}"> 女 </view> <view wx:else=""> 保密 </view> <!-- 控制多个微信小程序的组件1信息 --> <block wx:if="{{false}}"> <view> 我是组件一 </view> <view> 我是组件二 </view> </block> <!-- 频繁的切换的时候使用 hidden --> <view hidden="{{flag}}"> 条件为true 则隐藏 否 显示 </view> <!-- wx:for 对组件的内容进行循环 --> <view wx:for="{{arr}}"> 索引:{{index}}, item项:{{item}} </view> <view> --------------------------------------- </view> <view wx:for="{{arr1}}"> 索引:{{index}}, item项:{{item}} </view> <!-- <view wx:for="{{arr2}} wx:for-index="idex" wx:for-item="itemNume"> 索引的下标:{{idex}}, item项:{{itemNume}} </view> --> <!-- 对象的遍历 --> <view> --------------------------------------- </view> <view wx:for="{{ userlist}}" wx:key="id"> {{item.name}} </view> <!-- 用户发送的是GET请求 --> <button bindtap="getInfo">用户发送的请求方式为GET请求</button> <!-- 用户发送的是GET请求 --> <button bindtap="Infopost">用户发送的请求方式为post请求</button>
