このプロジェクトには、ウェルカムページ、ニュースリストページ、詳細ページ、ムービーホームページ、リストページ、検索ページ、詳細ページの合計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',
})
},
ニュース一覧ページ
1つ目は、ルーティング、ナビゲーションの色、グローバル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
カルーセルウィンドウとリストテンプレートテンプレート
カルーセルウィンドウコード
<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简写
}
ポストアイテムテンプレート
テンプレートは各フィールドに値を追加することです
<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" //请示地址
},
})
次に、ライフサイクル関数onLoadでrequireを介してこのjsにインポートします
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
})
},
音楽ボタンをクリックするメソッドは、2つの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
})
}
}
2番目の収集メソッド
は、onLoadで収集ステータスを監視します。使用されるAPIは、wx.getStorageSync fetchとwx.setStorageSync saveです。
お気に入りボタンをクリックする方法
// 收藏方法
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時間が経過した、3ページしか整理されていない、または映画ページが整理されていない、多くの知識ポイントが使用されている、言うまでもなく、映画で使用されているWebサイトのパブリックAPIである映画ページを整理し始めた動的ローディングデータムービーのホームページ、リストページ、詳細ページに対応
映画ホーム
検索ボックスと3つのテンプレートで使用される同じテンプレート