微信小程序实现书架小功能

本文实例为大家分享了微信小程序实现书架功能的具体代码，供大家参考，具体内容如下

实现书架的功能，点击之后可以看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%;
? }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现书架小功能的详细内容...