这篇文章主要介绍“微信小程序如何实现书架小功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序如何实现书架小功能”文章能帮助大家解决问题。
效果图
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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
