程序思路：
- 用微信自带组件swiper来实现轮播图
- 用豆瓣提供的api(这里使用的电影api)来获取最近的电影数据【豆瓣api地址】
获取数据用微信的request方法，只需要提供豆瓣api的url链接，就能够get到数据
- 用setData()方法来将数据存进对应的page里面，在视图层(html)用wx:for来进行列表渲染
- 在渲染过程中加一个加载提示框(微信的showToast，API)，等到数据请求并渲染完成后，结束提示框
1.app.js 获取用户登录状态并获取用户信息
//app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync(‘logs‘) || [] logs.unshift(Date.now()) wx.setStorageSync(‘logs‘, logs) }, getUserInfo:function(cb){ var that = this if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo typeof cb == "function" && cb(that.globalData.userInfo) } }) } }) } }, globalData:{ userInfo:null } })
2.app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"color": "#fff",
"navigationBarBackgroundColor": "#000",
"navigationBarTitleText": "豆瓣",
"navigationBarTextStyle":"#fff"
},
"tabBar": {
"color": "#888",
"selectedColor": "#09bb07",
"backgroundColor": "#000",
"list": [{
"pagePath": "pages/index/index",
"text": "观看电影",
"iconPath": "icon/1.png",
"selectedIconPath": "icon/1.png"
},{
"pagePath": "pages/index/index",
"text": "当前热映",
"iconPath": "icon/2.png",
"selectedIconPath": "icon/2.png"
}]
}
}
3.app.wxss
/**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; }
4.until.js
function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinutes() var second = date.getSeconds() return [year, month, day].map(formatNumber).join(‘/‘) + ‘ ‘ + [hour, minute, second].map(formatNumber).join(‘:‘) } //获取对象类型 function formatNumber(n) { n = n.toString() return n[1] ? n : ‘0‘ + n } module.exports = { formatTime: formatTime }
5.index.wxml
<!--index.wxml--> <view class="content"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" class="slide-image" width="355" height="150" /> </swiper-item> </block> </swiper> <block wx:for="{{movie}}" wx:key="*this"> <view class="movie"> <view class="pic"> <image src="{{item.images.medium}}" mode="aspectFill"></image> </view> <view class="movie-info"> <view class="base-info"> <text>电影名字：{{item.title}}\n 导演：{{item.directors[0].name}}\n 演员： <text wx:for="{{item.casts}}">{{item.name}} </text> </text> </view> </view> </view> </block> </view>
6.index.wxss
/**index.wxss**/ page { height: 100%; } .content { background-color: #3a3a3a; min-height: 100%; } swiper-item image { width: 100%; } .movie { padding-top: 5px; padding-bottom: 5px; display: flex; border-bottom: 1px solid #888; } .pic image { width: 100px; height: 150px; vertical-align: top; } .movie-info { padding-left: 20px; } .base-info { color: #fff; font-size: 12px; padding-top: 20px; line-height: 20px; }
7.index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { imgUrls: [], indicatorDots: false, autoplay: true, interval: 5000, duration: 1000, movie: null }, //事件处理函数 bindViewTap: function () { }, onLoad: function () { this.loadMovie(); }, loadMovie() { wx.showToast({ title: ‘正在加载‘, icon: ‘loading‘, duration: 10000 }); let thispage = this; wx.request({ url: ‘http://api.douban.com/v2/movie/in_theaters‘, method: ‘GET‘, header: { ‘content-type‘: ‘json‘ }, success: function (res) { let subject = res.data.subjects; thispage.setData({ movie: subject }); thispage.setData({ imgUrls: [ res.data.subjects[0].images.large, res.data.subjects[1].images.large, res.data.subjects[2].images.large ] }); wx.hideToast(); } }); } })
8.logs.wxml
<!--logs.wxml--> <view class="container log-list"> <block wx:for="{{logs}}" wx:for-item="log" wx:key="*this"> <text class="log-item">{{index + 1}}. {{log}}</text> </block> </view>
9.logs.wxss
.log-list { display: flex; flex-direction: column; padding: 40rpx; } .log-item { margin: 10rpx; }
10.logs.json
{
"navigationBarTitleText": "查看启动日志"
}
11.logs.js
//logs.js var util = require(‘../../utils/util.js‘) Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync(‘logs‘) || []).map(function (log) { return util.formatTime(new Date(log)) }) }) } })
