微信小程序?qū)崿F(xiàn)書架小功能
更新時(shí)間：2022年08月24日 16:21:55 作者：Yfzm_c
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)書架小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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": "音樂",
? ? ? ? "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({
?
? /**
? ?* 頁面的初始數(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)聽頁面加載
? ?*/
? onLoad: function (options) {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
?
? },
?
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
? ?*/
? onPullDownRefresh: function () {
?
? },
?
? /**
? ?* 頁面上拉觸底事件的處理函數(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)文章
今天小編就為大家分享一篇layui點(diǎn)擊按鈕添加可編輯的一行方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用詳解
這篇文章主要介紹了javascript 設(shè)計(jì)模式之組合模式原理與應(yīng)用,結(jié)合實(shí)例形式分析了javascript組合模式基本概念、原理、應(yīng)用場(chǎng)景及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能
這篇文章主要介紹了基于JS實(shí)現(xiàn)根據(jù)密碼長(zhǎng)度顯示安全條功能，非常不錯(cuò)，在一些網(wǎng)站上經(jīng)常會(huì)遇到此功能，需要的的朋友參考下實(shí)現(xiàn)代碼吧
2017-03-03 
這篇文章主要介紹了swtich／if...else的替代語句的相關(guān)資料,需要的朋友可以參考下
2015-08-08 
這篇文章主要為大家詳細(xì)介紹了小程序自定義輪播圖圓點(diǎn)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-06-06 
淺談webpack打包過程中因?yàn)閳D片的路徑導(dǎo)致的問題
下面小編就為大家分享一篇淺談webpack打包過程中因?yàn)閳D片的路徑導(dǎo)致的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02 
這篇文章主要介紹了如何在JavaScript中使用for循環(huán),通過使用JavaScript?for...in循環(huán)，我們可以循環(huán)對(duì)象的鍵或?qū)傩裕诘鷮?duì)象屬性或進(jìn)行調(diào)試時(shí)，它可能很有用，但在迭代數(shù)組或?qū)?duì)象進(jìn)行修改時(shí)，應(yīng)該避免使用for...in循環(huán)，需要的朋友可以參考下
2022-11-11 
這篇文章主要為大家介紹了JavaScript?BOM，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2021-12-12 
JS中數(shù)組與對(duì)象的遍歷方法實(shí)例小結(jié)
這篇文章主要介紹了JS中數(shù)組與對(duì)象的遍歷方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript針對(duì)數(shù)組與對(duì)象遍歷操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下
2018-08-08