这篇文章主要介绍“微信小程序如何实现书架小功能”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序如何实现书架小功能”文章能帮助大家解决问题。
效果图
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%; }
关于“微信小程序如何实现书架小功能”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。