微信小程式實現書架小功能

2022-08-24 18:01:55

本文範例為大家分享了微信小程式實現書架功能的具體程式碼，供大家參考，具體內容如下

實現書架的功能，點選之後可以看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%;
  }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

微信小程式實現書架小功能

程式碼

熱門文章