步骤一:小程序 生命周期
//app.js App({ onLaunch: function () { //当小程序初始化完成时,会触发onLaunch(全局只触发一次) }, onShow: function () { //当小程序启动,或从后台进入前台显示,会触发onShow }, onHide: function () { //当小程序从前台进入后台,会触发onHide }, onError: function (msg) { //当小程序发生脚本错误,或者api调用失败时,会触发onError并带上错误信息 }, other: function () { //全局函数,可以被项目上的其他js文件调用 }, globalData: { //全局对象 }, })
步骤二:配置服务器信息
步骤三:项目结构
1.数据(逻辑)
splash.js
// pages/splash/splash.js Page({ /** * 页面的初始数据 */ data: { movies: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { const _this = this; // 请求数据 wx.request({ url: \'https://api.douban.com/v2/movie/coming_soon\', data: {}, header: { \'content-type\': \'json\' // 默认值 }, success: function(res){ const data = res.data.subjects.slice(0,3); // console.log(data); _this.setData({ movies: data }) } }) }, // 事件绑定函数 start: function(){ // 重定向 wx.redirectTo({ url: \'../board/board\' }) } })
2.页面
splash.wxml
<!--pages/splash/splash.wxml--> <!-- 轮播图 --> <swiper indicator-dots=\'true\' autoplay=\'true\' interval=\'5000\' duration=\'1000\'> <block wx:for="{{movies}}" wx:for-index="index" wx:key="id"> <swiper-item> <!-- 轮播图片 --> <image src=\'{{item.images.large}}\' class=\'slide-image\' mode=\'aspectFill\' /> <!-- 滑动到最后一张图,显示按钮 --> <button class=\'btn\' bindtap=\'start\' wx:if="{{index == movies.length -1}}">立即体验</button> </swiper-item> </block> </swiper>
3.样式
splash.wxss
/* pages/splash/splash.wxss */ page { width: 100%; height: 100%; } swiper { flex: 1; height: 100%; } swiper-item { flex: 1; } swiper-item image { position: absolute; height: 100%; width: 100%; opacity: .8; } /*立即体验按钮*/ .btn { position: absolute; bottom: 150rpx; left: 50%; width: 300rpx; margin-left: -150rpx; background-color: rgba(53, 73, 94, 0.7); color: #fff; border: 5rpx solid #fff; font-size: 40rpx; cursor: pointer; }
步骤四:设置启动页
步骤五:效果图
请发表评论