溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“微信小程序如何實現書架小功能”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序如何實現書架小功能”文章能幫助大家解決問題。
效果圖
app.js
// app.js
App({
onLaunch() {
// 展示本地存儲能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
},
globalData: {
userInfo: null,
nginxadd:"這邊換成內網穿透的地址/"
}
})app.json
{
"pages": [
"pages/start/start",
"pages/music/music",
"pages/videoinfo/videoinfo",
"pages/main/main",
"pages/readbook/readbook",
"pages/one/one",
"pages/index/index",
"pages/logs/logs",
"pages/playmusic/playmusic"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"tabBar": {
"selectedColor": "#8a8a8a",
"list": [
{
"pagePath": "pages/music/music",
"text": "音樂",
"iconPath": "pages/images/music1.png",
"selectedIconPath": "pages/images/music2.png"
},
{
"pagePath": "pages/videoinfo/videoinfo",
"text": "視頻",
"iconPath": "pages/images/sp1.png",
"selectedIconPath": "pages/images/sp2.png"
},
{
"pagePath": "pages/readbook/readbook",
"text": "書架",
"iconPath": "pages/images/rb1.png",
"selectedIconPath": "pages/images/rb2.png"
}
]
}
}readbook.js
// pages/books/books.js
let app=getApp()
Page({
/**
* 頁面的初始數據
*/
data: {
books1:[{"bookimg":app.globalData.nginxadd+"img/d0.jpg","bookname":"python","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/d1.jpg","bookname":"java","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/d2.jpg","bookname":"dart","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/a1.jpg","bookname":"javascript","booklink":app.globalData.nginxadd+"text/a1.pdf"}
],
books2:[{"bookimg":app.globalData.nginxadd+"img/f0.jpg","bookname":"c#","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/f1.jpg","bookname":"Rust","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/f2.jpg","bookname":"Lua","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/a1.jpg","bookname":"javascript","booklink":app.globalData.nginxadd+"text/a1.pdf"}
],
books3:[{"bookimg":app.globalData.nginxadd+"img/g0.jpg","bookname":"javascript","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/g1.jpg","bookname":"c++","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/g2.jpg","bookname":"Go","booklink":app.globalData.nginxadd+"text/a1.pdf"},
{"bookimg":app.globalData.nginxadd+"img/a1.jpg","bookname":"javascript","booklink":app.globalData.nginxadd+"text/a1.pdf"}
]
},
openbook(event)
{
wx.showLoading({
title: '正在打開文檔',
})
let link=event.currentTarget.dataset.link;
console.log(link);
//1.下載
wx.downloadFile({
url: link,
success:(resp)=>
{
let path=resp.tempFilePath;
console.log(path);
//2.打開
wx.openDocument({
filePath: path,
success:(resp)=>
{
wx.hideLoading({
success: (res) => {},
});
console.log("打開文檔成功")
}
})
}
})
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})readbook.wxml
<!--pages/books/books.wxml-->
<view class="booktopview">
<scroll-view class="scrollview" scroll-x="true">
<block wx:for="{{books1}}">
<view class="bookview" bindtap="openbook" data-link="{{item.booklink}}">
<view class="innerview">
<view class="imgview">
<image src="{{item.bookimg}}" class="cimg"></image>
</view>
<view class="txtview">
{{item.bookname}}
</view>
</view>
</view>
</block>
</scroll-view>
</view>
<view class="booktopview">
<scroll-view class="scrollview" scroll-x="true">
<block wx:for="{{books2}}">
<view class="bookview" bindtap="openbook" data-link="{{item.booklink}}">
<view class="innerview">
<view class="imgview">
<image src="{{item.bookimg}}" class="cimg"></image>
</view>
<view class="txtview">
{{item.bookname}}
</view>
</view>
</view>
</block>
</scroll-view>
</view>
<view class="booktopview">
<scroll-view class="scrollview" scroll-x="true">
<block wx:for="{{books3}}">
<view class="bookview" bindtap="openbook" data-link="{{item.booklink}}">
<view class="innerview">
<view class="imgview">
<image src="{{item.bookimg}}" class="cimg"></image>
</view>
<view class="txtview">
{{item.bookname}}
</view>
</view>
</view>
</block>
</scroll-view>
</view>readbook.wxss
/* pages/books/books.wxss */
.booktopview{
width: 100%;
height: 30vh;
border-top: 2px solid black;
border-bottom: 2px solid black;
display: flex;
align-items: center;
}
.scrollview{
width: 100%;
height: 80%;
/**border:1px solid green;**/
white-space: nowrap;
}
.bookview{
width: 30%;
height: 98%;
border:1px solid brown;
margin-left: 10px;
display: inline-block;
}
.innerview{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.imgview{
width: 80%;
height: 75%;
/**border:1px solid black;**/
}
.txtview{
width: 90%;
height: 25%;
/** border:1px solid black;**/
display: flex;
justify-content: center;
align-items: center;
}
.cimg{
width: 100%;
height: 100%;
}關于“微信小程序如何實現書架小功能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
