微信小程序實現書架小功能
本文實例為大傢分享瞭微信小程序實現書架功能的具體代碼，供大傢參考，具體內容如下
實現書架的功能，點擊之後可以看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%;
}
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。