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

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

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

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