微信小程序?qū)崿F(xiàn)書架小功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)書架功能的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)書架的功能,點(diǎn)擊之后可以看pdf
1.設(shè)定點(diǎn)擊事件
2.在點(diǎn)擊事件里面
2.1下載 wx.downloadFile({
2.2打開 wx.openDocument({
效果圖
點(diǎn)開之后是pdf
代碼
app.js
// app.js App({ ? onLaunch() { ? ? // 展示本地存儲(chǔ)能力 ? ? const logs = wx.getStorageSync('logs') || [] ? ? logs.unshift(Date.now()) ? ? wx.setStorageSync('logs', logs) ? ? ? // 登錄 ? ? wx.login({ ? ? ? success: res => { ? ? ? ? // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId ? ? ? } ? ? }) ? }, ? globalData: { ? ? userInfo: null, ? ? nginxadd:"這邊換成內(nèi)網(wǎng)穿透的地址/" ? } })
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": "音樂(lè)", ? ? ? ? "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({ ? ? /** ? ?* 頁(yè)面的初始數(shù)據(jù) ? ?*/ ? 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("打開文檔成功") ? ? ? ? ? ? ? } ? ? ? ? ? ? }) ? ? ? ? } ? ? ? ? }) ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載 ? ?*/ ? onLoad: function (options) { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成 ? ?*/ ? onReady: function () { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示 ? ?*/ ? onShow: function () { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏 ? ?*/ ? onHide: function () { ? ? }, ? ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁(yè)面卸載 ? ?*/ ? onUnload: function () { ? ? }, ? ? /** ? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 ? ?*/ ? onPullDownRefresh: function () { ? ? }, ? ? /** ? ?* 頁(yè)面上拉觸底事件的處理函數(shù) ? ?*/ ? onReachBottom: function () { ? ? }, ? ? /** ? ?* 用戶點(diǎn)擊右上角分享 ? ?*/ ? 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%; ? }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序動(dòng)畫(Animation)的實(shí)現(xiàn)及執(zhí)行步驟
這篇文章主要介紹了微信小程序動(dòng)畫(Animation) 的實(shí)現(xiàn)及執(zhí)行步驟,需要的朋友可以參考下2018-10-10Grunt入門教程(自動(dòng)任務(wù)運(yùn)行器)
Grunt是一個(gè)自動(dòng)任務(wù)運(yùn)行器,會(huì)按照預(yù)先設(shè)定的順序自動(dòng)運(yùn)行一系列的任務(wù)。這可以簡(jiǎn)化工作流程,減輕重復(fù)性工作帶來(lái)的負(fù)擔(dān)2015-08-08微信小程序?qū)崿F(xiàn)動(dòng)態(tài)列表項(xiàng)的順序加載動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)列表項(xiàng)的順序加載動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07解析John Resig Simple JavaScript Inheritance代碼
上網(wǎng)也查了一下對(duì)些的理解說(shuō)的都不是很清楚. 在翻閱的同時(shí)找到了一篇 分析這篇文章的文章 哈哈 分析的很詳細(xì). (Join Resig 大師的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有時(shí)間, 并對(duì)此感興趣不訪好好看看. 我相信多少會(huì)有所收益的.2012-12-12JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法,涉及javascript針對(duì)json數(shù)組數(shù)據(jù)的遍歷、判斷、存取等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12解決OneThink中無(wú)法異步提交kindeditor文本框中修改后的內(nèi)容方法
下面小編就為大家?guī)?lái)一篇解決OneThink中無(wú)法異步提交kindeditor文本框中修改后的內(nèi)容方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05