微信小程序实现天天有毒效果

前段时间搜索微信小程序，看到了一个挺不错的小程序：天天有毒，主要是每日分享一些毒鸡汤，首界面展示效果还不错，就想着尝试实现一下，还是先看下最终的实现效果：

界面逻辑分析

首先来分析一下界面构成，界面组成逻辑如下图：

实现思路：上图中内容区域为左右结构，左边区域为一个可滑动的布局，我们可以通过微信小程序组件swiper，取消其自动滑动属性来实现。右边区域为菜单栏，第一个组件可实现实时获取当前日期信息，下面依次添加三个组件，其中一个分享组件，可实现小程序分享功能。

wxml布局文件的实现

布局文件创建成功后，添加背景布局和内容布局，然后在内容布局中创建三个布局文件，依次对应为：左侧内容区域、分割线、右侧内容区域，最后在相应的区域，依次实现相关的布局效果。布局文件内容如下：

<view class='poisonbg'>
  <view class='poisoncontent'>
    <view class='poisonleft'>
      <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-dots="{{indicatorDots}}" indicator-color='#eeeeee' indicator-active-color='#bbbbbb'>
  <block wx:for="{{posionItems}}">
    <swiper-item>
      <view class='posionmessage'>
      <text class='posioncontet1'>{{item.content1}}</text>
      <view class='posioncontetline'></view>
      <text class='posioncontet2'>{{item.content2}}</text>
      <view>
        <text class='posionauthor'>-- {{item.author}}</text>
      </view>
      </view>
    </swiper-item>
  </block>
</swiper>
    </view>
    <view class='poisonline'>
    </view>
    <view class='poisonright'>
      <view class='posiondate'>
        <image class='dateimg' src='/images/img_posion_date.jpg'/>
        <text class='dateday'>{{dateDay}}</text>
        <text class='datemonth'>{{dateMonth}}</text>
      </view>
      <view class='posioninfo'>
        <image class='collect' bindtap='toCollect' src='/images/img_collect.jpg'/>
        <image class='edit' bindtap='toEdit' src='/images/img_edit.jpg'/>
        <button class='sharebut' open-type="share">
          <image class='share' src='/images/img_share.jpg'/>
        </button>
      </view>
    </view>
  </view>

  <text class='botmessage'>桃花潭水深千尺，不及天天送我毒</text>
</view>

其中要说明的是，右侧区域的分享功能按钮需要特殊处理，需要通过button按钮进行嵌套处理，因为根据微信官方API，页面内转发需要通过button来实现：

通过button控件进行嵌套后，设置button控件透明即可。

布局属性信息

根据上文中的布局文件，配置相关控件的属性信息。

.poisonbg {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #eff0f1;
  text-align: center;
}

.poisoncontent {
  position: relative;
  width: 92%;
  height: 82%;
  margin: 0 auto;
  padding: 0;
  background: white;
  margin-top: 5%;
  border-radius: 28rpx;
}

.botmessage {
  position: relative;
  width: 100%;
  height: 80rpx;
  font-size: 29rpx;
  font-weight: bold;
  color: #bcbcbc;
  top: 32rpx;
}

.poisonleft {
  float: left; 
  width: 72%;
  height: 100%;
}

.poisonline {
  float: left; 
  width: 2rpx;
  height: 90%;
  margin-top: 5%;
  background: #eff0f1;
}

.poisonright {
  float: left; 
  width: 27%;
  height: 100%;
  text-align: center;
}

.posiondate {
  position: relative;
  width: 129rpx;
  height: 139rpx;
  margin: 0 auto;
  margin-top: 50rpx;
  text-align: center;
}

.dateimg {
  width: 100%;
  height: 100%;
}

.dateday {
  position: absolute;
  width: 100%;
  height: 50rpx;
  top: 45rpx;
  font-size: 42rpx;
  font-weight: bold;
  color: #101010;
  left: 0;
  text-decoration: underline;
}

.datemonth {
  position: absolute;
  font-size: 16rpx;
  color: #101010;
  font-weight: bold;
  width: 100%;
  top: 100rpx;
  left: 0;
}

.posioninfo {
  position: relative;
  width: 48rpx;
  margin: 0 auto;
  margin-top: 170rpx;
  text-align: center;
}

.collect {
  width: 100%;
  height: 84rpx;
}

.edit {
  width: 100%;
  height: 84rpx;
  margin-top: 82rpx;
}

.sharebut {
  width: 100%;
  height: 84rpx;
  margin-top: 84rpx;
  padding: 0;
  background-color: rgba(255, 255, 255, 0)
}

.sharebut::after {
  width:0;
  height:0;
  top:0;
  left:0
}

.share {
  width: 100%;
  height: 100%;
}

swiper {
  width: 100%;
  height: 100%;
}

.posionmessage {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100rpx;
  left: 72rpx;
  text-align: left;
}

.posioncontet1 {
  width: 100%;
  font-size: 52rpx;
  color: #666666;
  font-weight: bold;
  line-height: 90rpx;
}

.posioncontetline {
  width: 100rpx;
  height: 4rpx;
  background: #666666;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.posioncontet2 {
  width: 100%;
  font-size: 52rpx;
  color: #666666;
  font-weight: bold;
  line-height: 90rpx;
}

.posionauthor {
  float: right;
  width: 100%;
  font-size: 32rpx;
  color: #666666;
  font-weight: bold;
  line-height: 95rpx;
  text-align: right;
  margin-right: 92rpx;
  margin-top: 40rpx;
}

到这里，我们的界面效果基本就实现了，接下来通过JS文件处理相关数据即可。

JS文件数据处理

在JS文件中，我们主要处理三个方面的内容：
1.左侧滑动区域的内容
2.获取当前日期信息
3.添加分享方法

Page({

  /**
   * 页面的初始数据
   */
  data: {
    dateDay:"01",
    dateMonth:"Jan",
    posionItems:[
      {
        "content1":"行\n而上学",
        "content2":"实在不行\n那就\n别上了吧",
        "author":"挪鸡思维"
      },
      {
        "content1": "面对困难\n我们\n从不弯腰低头",
        "content2": "一般都是\n直接跪",
        "author": "服不糊"
      },
      {
        "content1": "逼急了\n我可什么都\n做出来的",
        "content2": "那还好\n这有个需求",
        "author": "产品有毒"
      }
    ],
    indicatorDots: true,
    autoplay: false,
    interval: 5000,
    duration: 1000,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var self = this;
    var date = new Date();
    var month = date.getMonth + 1;
    var day = date.getDate();
    var monthstr = "Jan";
    if(month == 1) {
      monthstr = "Jan";
    } else if (month == 2) {
      monthstr = "Feb";
    } else if (month == 3) {
      monthstr = "Mar";
    } else if (month == 4) {
      monthstr = "Apr";
    } else if (month == 5) {
      monthstr = "May";
    } else if (month == 6) {
      monthstr = "June";
    } else if (month == 7) {
      monthstr = "July";
    } else if (month == 8) {
      monthstr = "Aug";
    } else if (month == 9) {
      monthstr = "Sept";
    } else if (month == 10) {
      monthstr = "Oct";
    } else if (month == 11) {
      monthstr = "Nov";
    } else if (month == 12) {
      monthstr = "Dec";
    }

    self.setData({
      dateDay: day,
      dateMonth: monthstr
    })
  },

  toCollect: function () {
    wx.showToast({
      title: '扎心',
    })
  },

  toEdit: function () {
    wx.showToast({
      title: '投稿',
    })
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    wx.showShareMenu({
      withShareTicket:true
    })

    var self = this;
    var coinSum = this.data.coinSum;
　　return {
      title:'天天有毒',
      path:'/pages/index/index',
      success:function(res) {
        if (res.errMsg =='shareAppMessage:ok') {
          if (res.shareTickets == undefined) {
            //分享到好友
          } else {
            //分享到群...
          }

        }
      }
    }
  }
})

至此，效果图中的效果我们就基本实现了。如有问题，欢迎留言。