这次的项目总共有6个人页面分别是，欢迎页、新闻列表页、详情页、电影首页、列表页、搜索页、详情页，下面按每个页用到哪些小程序api做一个总结
欢迎页
整个页面的组成部分就是 一个头像、名字、加一个按钮跳转页面
welcome.json
修改导航修改颜色
{
"navigationBarBackgroundColor": "#b3d4db"
}
welcome.js
这个地方有个难点，就是如果跳转的页面是tabBar 就一定要用wx.switchTab方法，不然点击是没有反应的。
onTap: function(){
//vx.navigateTo 这个方法就是带返回功能的
// wx.navigateTo({
// url: '../posts/posts',
// })
// wx.redirectTo 是没有返回功能的
// wx.redirectTo({
// url: '../posts/posts',
// })
wx.switchTab({
url: '../posts/posts',
})
},
新闻列表页
首先是在全局的 app.json 里面配置是路由、导航的颜色、tabBar的切换菜单，用到的api有catch:tap=“onSwiperTap"事件绑定、wx:for=”{ {postList}}" wx:for-item=“item” 列表循环、data-postId="{ {item.postId}}"事件传参、 模板传数据
{
"pages": [
"pages/welcome/welcome",
"pages/posts/posts",
"pages/posts/post-detail/post-detail",
"pages/movies/movies",
"pages/movies/more-movie/more-movie",
"pages/movies/movie-detail/movie-detail"
],
"window": {
"navigationBarBackgroundColor": "#405f80"
},
"tabBar": {
"borderStyle": "white",
"color": "#333",
"selectedColor": "#405f80",
"list": [
{
"pagePath": "pages/posts/posts",
"text": "阅读",
"iconPath": "/images/tab/yuedu.png",
"selectedIconPath": "/images/tab/yuedu_hl.png"
},
{
"pagePath": "pages/movies/movies",
"text": "电影",
"iconPath": "/images/tab/dianying.png",
"selectedIconPath": "/images/tab/dianying_hl.png"
}
]
}
}
posts.wxml
轮播窗 和 列表template模板组成的
轮播窗 代码
<swiper catch:tap="onSwiperTap" indicator-dots="true" autoplay="true">
<swiper-item>
<image src="/images/wx.png" data-postId="3"></image>
</swiper-item>
<swiper-item>
<image src="/images/vr.png" data-postId="4"></image>
</swiper-item>
<swiper-item>
<image src="/images/iqiyi.png" data-postId="5"></image>
</swiper-item>
</swiper>
列表循环 代码
<import src="post-item/post-item-tem.wxml"/> //模板引用
<block wx:for="{
{postList}}" wx:for-item="item" wx:for-index="idx" wx:key="idx">
<view catch:tap="onPostTap" data-postId="{
{item.postId}}">
//如果是 {
{...item}} 等于把对象展开 ，那在模板里面就不用{
{item.avatar}} 直接 {
{avatar}} 这样就能拿到值了
<template is="postItem" data="{
{item}}" />
</view>
</block>
posts.js
跳转到详情的方法
onPostTap: function (event) {
var postId = event.currentTarget.dataset.postid;
wx.navigateTo({
url: 'post-detail/post-detail?id=' + postId,
})
},
获取列表数据 在本地创建的数据 在生命周期函数onLoad
var postsData = require('../../data/posts-data.js')
onLoad: function () {
this.setData({
postList: postsData.postList
}) //es6简写
}
post-item 模板
模板里面就是给每个字段添加值
<template name="postItem">
<view class="post-container">
<view class="post-author-data">
<image class="post-author" src="{
{item.avatar}}"></image>
<text class="post-data">{
{
item.date}}</text>
</view>
</view>
新闻详情页
这里用到的功能比较多，我还是根据不页面列取出来
post-detail.wxml
用到三元运算
<image class="head-image" src="{
{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
用到了 wx:if wx:else、 catch:tap事件方法
<image catch:tap="onCollectionTap" wx:if="{
{collected}}" src="/images/icon/collection.png"></image>
<image catch:tap="onCollectionTap" wx:else src="/images/icon/collection-anti.png"></image>
post-detail.json
添加页面标题
{
"navigationBarTitleText": "阅读"
}
post-detail.js
首先创建本地数据
var postsData = require(’…/…/…/data/posts-data.js’)
// 这个是在全局的 app.js 申请全局变量
var app = getApp()
App({
globalData:{
g_isPlayingMusic:false, //音乐是否在播放
g_currentMusicPostId: null, //哪个音乐正在播放
doubanBase: "http://t.yushu.im" //请示地址
},
})
然后通过 require 导入到 这个js里面来，在生命周期函数onLoad
onLoad: function(options) {
//获取详情数据
var postId = options.id;
this.data.currentPostId = postId
var postData = postsData.postList[postId]
// this.data.postData = postData;
this.setData({
postData: postData
})
//鉴听是否收藏方法
var postsCollected = wx.getStorageSync('posts_collected')
if (postsCollected) {
var postCollected = postsCollected[postId]
if (postCollected) {
this.setData({
collected: postCollected
})
}
} else {
var postsCollected = {
}
postsCollected[postId] = false;
wx.setStorageSync('posts_collected', postsCollected)
}
//鉴听音乐播放方法
var g_isPlayingMusic = app.globalData.g_isPlayingMusic //音乐是否在播放
var g_currentMusicPostId = app.globalData.g_currentMusicPostId //哪个详情页的音乐正在播放
if (g_isPlayingMusic && g_currentMusicPostId === postId) {
this.setData({
isPlayingMusic: true
})
}
this.setAudioMonitor()
}
第一个难点就是音乐播放 封装setAudioMonitor方法 在 onLoad 调用 检查当前音乐的状态
setAudioMonitor: function() {
wx.onBackgroundAudioPlay(() => {
this.setData({
isPlayingMusic: true
})
app.globalData.g_isPlayingMusic = true
app.globalData.g_currentMusicPostId = this.data.currentPostId
})
wx.onBackgroundAudioPause(() => {
this.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false
app.globalData.g_currentMusicPostId = null
}),
wx.onBackgroundAudioStop(() => {
this.setData({
isPlayingMusic: false
})
app.globalData.g_isPlayingMusic = false
app.globalData.g_currentMusicPostId = null
})
},
点击音乐按钮方法 用到了二个 api wx.pauseBackgroundAudio() 暂停 、wx.playBackgroundAudio 播放
// 音乐播放
onMiusicTap: function(event) {
var isPlayingMusic = this.data.isPlayingMusic
var currentPostId = this.data.currentPostId
var postData = postsData.postList[currentPostId]
// 监听音乐暂停事件
if (isPlayingMusic) {
wx.pauseBackgroundAudio()
this.setData({
isPlayingMusic: false
})
} else {
wx.playBackgroundAudio({
dataUrl: postData.music.url, // 音乐地址
title: postData.music.title, //名称
coverImgUrl: postData.music.coverImg //封面图
})
this.setData({
isPlayingMusic: true
})
}
}
第二个 收藏方法
在 onLoad 里面监听收藏状态 ，用到的api有 wx.getStorageSync 取 、wx.setStorageSync 存
点击收藏按钮事情方法
// 收藏方法
onCollectionTap: function(event) {
// this.getPostsCollectedAsy()
this.getPostsCollectedSyc()
},
//同步缓存方法
getPostsCollectedSyc: function() {
var postsCollected = wx.getStorageSync('posts_collected')
var postCollected = postsCollected[this.data.currentPostId]
postCollected = !postCollected // 取反
postsCollected[this.data.currentPostId] = postCollected
this.showToast(postsCollected, postCollected)
},
//收藏弹窗 方法
showToast(postsCollected, postCollected) {
//更新缓存
wx.setStorageSync('posts_collected', postsCollected)
//更新数据
this.setData({
collected: postCollected
})
wx.showToast({
title: postCollected ? '收藏成功' : '取消成功',
duration: 1000
})
},
不知不觉过去了快2个小时了，只整理了 三个页面，还是电影面页没有整理，用到了知识点还很多，费话不多说，开始整理电影页面，电影用的一个网站公开的 api地址 动态加载数据 电影首页、列表页、详情页
电影首页
一个搜索框 加 三个template使用的同一个模板组成的