欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?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": "音樂(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í)行步驟

    這篇文章主要介紹了微信小程序動(dòng)畫(Animation) 的實(shí)現(xiàn)及執(zhí)行步驟,需要的朋友可以參考下
    2018-10-10
  • Grunt入門教程(自動(dòng)任務(wù)運(yùn)行器)

    Grunt入門教程(自動(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)畫

    微信小程序?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
  • mui上拉加載功能實(shí)例詳解

    mui上拉加載功能實(shí)例詳解

    最近小編在做移動(dòng)端的項(xiàng)目,用到了mui的上拉加載功能,今天小編給大家整理一下分享到腳本之家平臺(tái),需要的朋友參考下
    2017-04-04
  • 解析John Resig Simple JavaScript Inheritance代碼

    解析John Resig Simple JavaScript Inheritance代碼

    上網(wǎng)也查了一下對(duì)些的理解說(shuō)的都不是很清楚. 在翻閱的同時(shí)找到了一篇 分析這篇文章的文章 哈哈 分析的很詳細(xì). (Join Resig 大師的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有時(shí)間, 并對(duì)此感興趣不訪好好看看. 我相信多少會(huì)有所收益的.
    2012-12-12
  • javascript canvas檢測(cè)小球碰撞

    javascript canvas檢測(cè)小球碰撞

    這篇文章主要為大家詳細(xì)介紹了javascript canvas檢測(cè)小球碰撞,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-04-04
  • JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法示例

    JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法示例

    這篇文章主要介紹了JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法,涉及javascript針對(duì)json數(shù)組數(shù)據(jù)的遍歷、判斷、存取等相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • electron-builder打包配置詳解

    electron-builder打包配置詳解

    本文主要介紹了electron-builder打包配置詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • JS實(shí)現(xiàn)自定義彈窗功能

    JS實(shí)現(xiàn)自定義彈窗功能

    瀏覽器自帶的原生彈窗很不美觀,而且功能比較單一,絕大部分時(shí)候我們都會(huì)按照設(shè)計(jì)圖自定義彈窗或者直接使用注入layer的彈窗等等。下面小編給大家?guī)?lái)了JS實(shí)現(xiàn)自定義彈窗,感興趣的朋友一起看看吧
    2018-08-08
  • 解決OneThink中無(wú)法異步提交kindeditor文本框中修改后的內(nèi)容方法

    解決OneThink中無(wú)法異步提交kindeditor文本框中修改后的內(nèi)容方法

    下面小編就為大家?guī)?lái)一篇解決OneThink中無(wú)法異步提交kindeditor文本框中修改后的內(nèi)容方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05

最新評(píng)論