广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现书架小功能
  • 236

0
分享到

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

2024-04-02 19:04:59 236人浏览 八月长安
摘要

本文实例为大家分享了微信小程序实现书架功能的具体代码，供大家参考，具体内容如下 实现书架的功能，点击之后可以看pdf 1.设定点击事件 2.在点击事件里面 2.1下载 wx.down

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

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


.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%;
    
    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%;
    
  }
  .txtview{
    width: 90%;
    height: 25%;
   
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cimg{
    width: 100%;
    height: 100%;
  }

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 微信小程序实现书架小功能

本文链接: https://www.lsjlt.com/news/165920.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 微信小程序实现书架小功能
    本文实例为大家分享了微信小程序实现书架功能的具体代码，供大家参考，具体内容如下 实现书架的功能，点击之后可以看pdf 1.设定点击事件 2.在点击事件里面 2.1下载 wx.down...
    99+
    2022-11-13
  • 微信小程序实现翻牌小功能
    本文实例为大家分享了微信小程序翻牌小功能，供大家参考，具体内容如下 页面 <view id="container">     <view wx:for="{{new...
    99+
    2022-11-13
  • 微信小程序实现计算器小功能
    微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景，在小程序领域也掺上一脚，本人也是自学小程序的，初期跟很多...
    99+
    2022-11-12
  • 微信小程序实现分页功能
    本文实例为大家分享了微信小程序实现分页的具体代码，供大家参考，具体内容如下 今天被提了个需求，需要小程序上实现分页，搜索能力不行，没找到demo，自己想了一下逻辑然后，就自己写了，不...
    99+
    2022-11-13
  • 微信小程序实现答题功能
    本文实例为大家分享了微信小程序实现答题功能的具体代码，供大家参考，具体内容如下 view <view class="topnav">   <image src="...
    99+
    2022-11-13
  • 微信小程序实现拍照功能
    小程序实现一个拍照功能，亲测可用。 页面的样式都是我自己写的，当然你们也可以自己排版写样式。下面一共有三个按钮，返回按钮、拍照按钮、切换摄像头按钮。 首先相机页面是通过wx:if来...
    99+
    2022-11-13
  • 微信小程序实现评价功能
    本文实例为大家分享了微信小程序实现评价的具体代码，供大家参考，具体内容如下 首先去图标库，找一个空心星图片和一个实星图片 先是效果图 代码 wxml文件 for循环5次，初始值是5...
    99+
    2022-11-13
  • 微信小程序怎么实现翻牌小功能
    本篇内容介绍了“微信小程序怎么实现翻牌小功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！页面<view id="...
    99+
    2023-06-30
  • 微信小程序实现上传图片小功能
    本文实例为大家分享了微信小程序实现上传图片的具体代码，供大家参考，具体内容如下 用到的apiwx.chooseMedia(); 用于拍摄或从手机相册中选择图片或视频 功能：点击上传图...
    99+
    2022-11-13
  • 微信小程序--小程序框架
    目录 前言：  一.框架基本介绍 1.整体结构： 2.页面结构： 3.生命周期： 4.事件系统： 5.数据绑定： 6.组件系统： 7.API： 8.路由： 9.模块化： 10.全局配置： 二.视图层详解 1.WXML（WeiXin Mar...
    99+
    2023-10-20
    小程序 微信小程序
  • 微信小程序实现简单购物车小功能
    本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下 微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！ 1. 应用场景2. 思路分析3....
    99+
    2022-11-13
  • 微信小程序如何实现计算器小功能
    这篇文章主要介绍微信小程序如何实现计算器小功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景...
    99+
    2023-06-20
  • 微信小程序实现聊天室功能
    本文通过实例为大家分享了微信小程序实现聊天室的具体代码，供大家参考，具体内容如下 1.实现效果展示 2.room.wxml <view class="container"...
    99+
    2022-11-12
  • 微信小程序实现计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码，供大家参考，具体内容如下 一、微信小程序开发工具界面 二、目录结构 第一次进到页面它的目录结构如下： 三、需要注意的问题 ...
    99+
    2022-11-12
  • 微信小程序实现录音Record功能
    本文实例为大家分享了微信小程序实现录音Record功能的具体代码，供大家参考，具体内容如下 布局 <!--pages/record/record.wxml--> &l...
    99+
    2022-11-12
  • 微信小程序实现滚动条功能
    本文实例为大家分享了微信小程序实现滚动条的具体代码，供大家参考，具体内容如下 view <view class="conty">   <!-- 滚动字幕 --&g...
    99+
    2022-11-13
  • 微信小程序实现搜索框功能
    本文实例为大家分享了微信小程序实现搜索框功能的具体代码，供大家参考，具体内容如下 效果： wxml文件: <view class="search_input" > ...
    99+
    2022-11-12
  • 小程序通过小程序云实现微信支付功能实例
    目录一、开通微信支付 1.1 关联商户号1.2 添加商户号1.3 管理员授权二、云函数开发2.1 新建云函数2.2 云函数代码2.3 云函数上传并部署三、小程序调用3.1 ...
    99+
    2022-11-12
  • 如何使用PHP实现微信小程序的图书借阅功能？
    如何使用PHP实现微信小程序的图书借阅功能？随着微信小程序的发展，越来越多的图书馆开始使用微信小程序来提供图书借阅服务。而PHP作为一种流行的服务器端编程语言，可以很好地支持这样的图书借阅功能的实现。在本文中，我们将介绍如何使用PHP来实现...
    99+
    2023-10-27
    PHP 微信小程序 图书借阅
  • 【微信开发】微信小程序实现实时聊天功能
    最近在做一个项目，需要运用到实时聊天功能，分享一下。      分为： 界面如何布局以及细节； 如何实现实时更新； 全部代码展示；         一、界面如何布局以及细节：         1.说到底，聊天界面就是循环一个数组，每一行...
    99+
    2023-09-02
    微信小程序 小程序
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作