《微信小程序》入门小程序-商城小demo的实现

<swiper

//是否显示轮播上的点

indicator-dots=“{ {indicatorDots}}”

//滑动方向是否为纵向

vertical=“{ {vertical}}”

//是否自动切换图片

autoplay=“{ {autoplay}}”

//自动切换时间间隔

interval=“{ {interval}}”

//滑动动画时常

duration=“{ {duration}}”

//是否采用衔接滑动

circular=“{ {circular}}”

//轮播图上原点的颜色

indicator-color=“rgba(255, 255, 255, .3)”

//当前被选中的轮播图的小圆点颜色

indicator-active-color=“#ffffff”

class=“swiper”

//wx:for指令循环遍历数组

scroll-view，官方提供的滚动视图组件，它将内容包裹起来之后，当内容超出高度或宽度，那么可纵向或横向滚动视图区域，具体请看：scroll-view滚动视图，在这里主要使用到了其一个纵向属性scroll-y，默认是false，也就是不允许滚动，因此需要设置成true；

swiper，轮播图组件，网页上常见的功能组件，微信官方命名为滑块视图容器，该容器中只可放置swiper-item组件，其内是具体内容，关于使用到的属性已注释在组件上了，更多具体请看：swiper轮播图组件；

请求数据

---

微信官方提供了请求数据的方法，并不需要自己引入axios或者ajax等工具，在微信中请求的方法叫做wx.request()方法，具体请看微信数据请求request，当然请求的接口地址的域名必须是在该小程序的后台登记过的，没有登记过是会报错的，即使接口正确；

当页面进行加载（也就是生命周期处于onload）的时候，向服务器请求数据，同时显示加载中的提示loading提示框，等到请求成功，返回了数据，那么就将加载中的提示关闭掉；

当请求成功之后，将请求到的数据存储到本地的data中，存储变量的方式和react类似，是通过setData()的方式存储的；

//引入接口地址，接口地址是统一写在一个文件中的，通过require引入

const interfaces = require(“…/…/utils/urlconfig.js”);

/**

• 生命周期函数–监听页面加载

*/

onLoad: function (options) {

const _this = this;

//显示加载中的提示框，文字为：加载中

wx.showLoading({

title: ‘加载中’,

})

//发起一个请求

wx.request({

//请求的服务器地址，例子的地址是统一写的，因此这里只是引入urlconfig.js中写好的地址

url:interfaces.homepage,

header:{

// 返回的数据类型为json格式，当然默认是application/json格式

“content-type”:“application/json”

},

//请求成功后的回调函数

success(res){

// 请求成功代表有返回数据，那么通过setData保存数据，保存的数据会实时更新

_this.setData({

swipers:res.data.swipers,

logos:res.data.logos,

quicks:res.data.quicks,

pageRow:res.data.pageRow

})

//隐藏加载中的提示框

wx.hideLoading();

}

})

}

这里通过setData设置数据，刚开始有疑问，为什么要通过setData设置，直接通过类似下例的方法不可以吗？

this.data.swipers = res.data.swipers;

这种方式设置数据难道不行吗，这种设置当然是可以的，但是这种设置有一个致命缺陷，就是设置后的数据不会实时的响应式的渲染到页面上，比如；swipers初始时是一个空数组，页面上通过wx:for循环也没有结果，当使用setData()的方式设置值后，那么页面会实时的渲染新结果，如果是通过直接赋值的方式保存结果，那么此时页面是不会对其作出响应的，仍然是渲染的空数组；

页面跳转

---

在小程序中&#x