微信小程序实现书架小功能
本文实例为大家分享了微信小程序实现书架功能的具体代码，供大家参考，具体内容如下
实现书架的功能，点击之后可以看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%; }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
