微信小程序实现书架小功能
作者：Yfzm_c
这篇文章主要为大家详细介绍了微信小程序实现书架小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现书架功能的具体代码，供大家参考，具体内容如下
实现书架的功能，点击之后可以看pdf
1.设定点击事件
2.在点击事件里面
2.1下载 wx.downloadFile({
2.2打开 wx.openDocument({
效果图
点开之后是pdf
代码
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%;
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。