首页：布局使用swiper
// swiper的基本使用
<view class='creat_swiper' style="height:{{deviceHeight}}">
<swiper indicator-dots="{{indicatorDots}}" circular="true" next-margin="30px" previous-margin="30px" duration='300' current="{{swiperCurrent}}">
<block wx:for="{{count}}" wx:key='{{index}}'>
<swiper-item>
<view class="card_item" style='width:{{swiperWidth}}'>
<view class='card_top' data-issue='{{item.issue}}' bindtap='goissue'>
<image class='card_image' mode='widthFix' src="{{item.surfacePlot}}"></image>
</view>
</view>
<!-- <view class="card_item {{tabIndex == index ? 'active ' : 'normal '}}"></view> -->
</swiper-item>
</block>
</swiper>
</view>
效果👇
小结：首页需要保证封面不变形，保证宽高比。在页面onready里获取屏幕宽高 ，然后简单的跳转👇
onReady: function() { var that = this let screenHeight = wx.getSystemInfoSync().windowHeight let screenWidth = wx.getSystemInfoSync().windowWidth let scrollHeight = screenHeight - 30 + 'px' // 减去tabbar的高度 let scrollWidth = screenWidth - 75 + 'px' // （不记得为什么-75了） that.setData({ deviceHeight: scrollHeight, swiperWidth: scrollWidth, }); }, //跳转 goissue: function(event) { let issue = event.currentTarget.dataset.issue wx.navigateTo({ url: '../read/read?issue=' + issue }) }, |
内页：展示本期内容，点击卡片跳转至webview。内容是同步APP和公众号的，一开始是做富文本解析，解析效果不如意，各种尝试后放弃。然后切换成H5展示，在H5内使用同编辑器一样的js解析文件，保证展示效果一致。👇
goatc: function(event) { let id = event.currentTarget.dataset.readid let title = event.currentTarget.dataset.readtit let readbg = event.currentTarget.dataset.readbg wx.navigateTo({ url: '../readAtc/readAtc?article=' + id + "&title=" + title + "&readbg=" + readbg }) }, |
展示页：webview展示
`<web-view src="https://xxx.xxx.com/xxx/article/{{readid}}"></web-view>`
基本的分享：添加随机数，防止图片缓存
onShareAppMessage: function() { let that = this; let title = that.data.title; let readbg = that.data.readbg; return { title: title, path: '/pages/readAtc/readAtc?article=' + that.data.readid, imageUrl: readbg + '?d=' + app.fmt(new Date(), 'yyyyMMdd') } } |
