There are a total of 6 personal pages in this project, namely, welcome page, news list page, details page, movie homepage, list page, search page, and details page. The following is a summary of which applet APIs are used on each page
welcome page
The components of the entire page are an avatar, name, and a button to jump to the page
welcome.json
Modify navigation modify color
{
"navigationBarBackgroundColor": "#b3d4db"
}
welcome.js
There is a difficulty in this place, that is, if the page to jump to is tabBar, you must use the wx.switchTab method, otherwise the click will not respond.
onTap: function(){
//vx.navigateTo 这个方法就是带返回功能的
// wx.navigateTo({
// url: '../posts/posts',
// })
// wx.redirectTo 是没有返回功能的
// wx.redirectTo({
// url: '../posts/posts',
// })
wx.switchTab({
url: '../posts/posts',
})
},
News list page
The first is to configure routing, navigation color, tabBar switching menu in the global app.json, the apis used include catch:tap="onSwiperTap" event binding, wx:for="{ {postList}}" wx :for-item="item" list loop, data-postId="{ {item.postId}}" event parameter transmission, template data transmission
{
"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
Carousel window and list template template
Carousel window code
<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>
List loop code
<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
How to jump to details
onPostTap: function (event) {
var postId = event.currentTarget.dataset.postid;
wx.navigateTo({
url: 'post-detail/post-detail?id=' + postId,
})
},
Get list data locally created data in the life cycle function onLoad
var postsData = require('../../data/posts-data.js')
onLoad: function () {
this.setData({
postList: postsData.postList
}) //es6简写
}
post-item template
The template is to add values to each field
<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>
News detail page
There are many functions used here, I still take them out according to the page column
post-detail.wxml
Ternary operation
<image class="head-image" src="{
{isPlayingMusic?postData.music.coverImg:postData.headImgSrc}}"></image>
The wx:if wx:else, catch:tap event methods are used
<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
Add page title
{
"navigationBarTitleText": "阅读"
}
post-detail.js
First create local data
var postsData = require('…/…/…/data/posts-data.js')
// This is to apply for global variables in the global app.js
var app = getApp()
App({
globalData:{
g_isPlayingMusic:false, //音乐是否在播放
g_currentMusicPostId: null, //哪个音乐正在播放
doubanBase: "http://t.yushu.im" //请示地址
},
})
Then import into this js through require, in the life cycle function 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()
}
The first difficulty is that the music playback package setAudioMonitor method is called in onLoad to check the current music status
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
})
},
The method of clicking the music button uses two apis wx.pauseBackgroundAudio() to pause and wx.playBackgroundAudio to play
// 音乐播放
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
})
}
}
The second collection method
monitors the collection status in onLoad. The apis used are wx.getStorageSync fetch and wx.setStorageSync save
How to click the favorite button
// 收藏方法
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
})
},
Unknowingly, almost 2 hours have passed, only three pages have been sorted out, or the movie page has not been sorted out, a lot of knowledge points are used, not much to say, I started sorting out the movie page, a website public api used by the movie Address dynamic loading data movie homepage, list page, detail page
Movie Home
A search box plus the same template used by three templates