在这篇文章中，我们来学习一下“小程序书架功能的实现代码是什么”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

具体内容如下

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

到此这篇关于“小程序书架功能的实现代码是什么”的文章就介绍到这了,更多相关小程序书架功能的实现代码是什么内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Object.assign的基本使用是怎样的，有哪些知识点

  最在做项目过程中，大量的使用了Object.assign方法，发现这个还是挺好使用的，现在总结下Object.assign的基本使用。一、基本语法Object.assign(target, ...sources)二、基本概念O

• Vue拦截器interceptors能解决什么问题，用法是怎样

  这篇文章主要介绍了vue-resource 拦截器interceptors使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 详解JS Number数据结构的用法是怎样

  JS Number数据结构的用法是怎样?一些朋友可能会遇到这方面的问题，对此在下文小编向大家来讲解一下，内容详细，易于理解，希望大家阅读完这篇能有收获哦，有需要的朋友就往下看吧！

• JS实现数组去重有什么简单方法呢？

  JS实现数组去重有什么简单方法呢？JS实现数组去重的方法有很多，下面分享两个简单的方法，及注意事项。下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。

• Vue中长按事件touch怎么实现，代码是什么

  这篇文章主要介绍了vue长按事件touch,文末给大家补充介绍了Vue长按触摸事件的实现代码，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下