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

具体内容如下

实现书架的功能，点击之后可以看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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 怎么将JS局部变量变为全局，方法是什么

  这篇文章主要介绍了JavaScript把局部变量变成全局变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 用JS怎样搭建别踩白板游戏，实现思路及方法是什么

  大家好,本篇文章主要的讲的是html+css+js实现别踩白板小游戏，感兴趣的同学赶快来看一看吧，觉得不错的话可以收藏一下哦，方便下次浏览

• ES6编码规范要注意哪些，如何写可读性强的代码

  本章节讨论使用ES6编码风格到代码中需要注意的点。通过记住这些关键点，可以让我们写出更优美的、可读性更强的JavaScript ES6风格的代码。

• 用JS制作滑块验证码的思路及具体过程是怎样的

  这篇文章主要为大家详细介绍了JavaScript实现滑块验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• js包装对象怎样理解？这三个原生对象要知

  这篇文章主要给大家分享js包装对象的内容，下文有具体的介绍和实例，对新手学习和理解js包装对象有一定的帮助，有需要的朋友可以参考借鉴，下面我们一起来学习一下吧。