收藏
评论

初级小程序--最美轻杂志

首页:布局使用swiper

// swiper的基本使用
    
      
        
          
            
              
            
          
          
        
      
    
  


效果👇



小结:首页需要保证封面不变形,保证宽高比。在页面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展示

` src="https://xxx.xxx.com/xxx/article/{{readid}}">`

基本的分享:添加随机数,防止图片缓存

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')
    }
  }


扫码体验

最后一次编辑于  2019-10-15
赞 3
收藏
登录 后发表内容