wepy - 與原生有什么不同（x.wpy)使用實例

?

?

源碼

<template>
  <view class='mark' wx:if="{{showMark}}">
    <view animation="{{animationData}}" class="animCat">
      <image src="http://osk1hpe2y.bkt.clouddn.com/18-5-30/34559443.jpg"></image>
    </view>
    <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo" class="css-button">開始吧!</button>
  </view>
  <!-- test-tab -->
  <view>
    <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">
      <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">快遞</view>
      <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">身份證</view>
      <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">銀行卡號</view>
      <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">手機號碼</view>
      <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">身材計算</view>
    </scroll-view>
    <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">
      <!-- 快遞查詢 -->
      <swiper-item wx:for="{{[0,1,2,3,4]}}" wx:key="*this">
        <scroll-view scroll-y="true" class="scoll-h" wx:if="{{index==0}}">
          <ForexpressItem :history.sync='history'></ForexpressItem>
        </scroll-view>
        <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==1}}">
          <PeoPleCard></PeoPleCard>
        </scroll-view>
        <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==2}}">
          <IdCard></IdCard>
        </scroll-view>
        <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==3}}">
          <MobileHome></MobileHome>
        </scroll-view>
        <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==4}}">
          <Figure></Figure>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  import wepy from 'wepy';
  import ForexpressItem from '@/components/express/index';
  import IdCard from '@/components/querys/idCard';
  import Figure from '@/components/querys/figure';
  import MobileHome from '@/components/querys/mobileHome';
  import PeoPleCard from '@/components/querys/peoPleCard';
  import {
    formatTime
  } from '@/utils/util';
  export default class Forexpress extends wepy.page {
    config = {
      navigationBarTitleText: '快遞查詢'
    };
    components = {
      ForexpressItem,
      IdCard,
      Figure,
      MobileHome,
      PeoPleCard
    };
    data = {
      showMark: false,
      winHeight: '', //窗口高度
      currentTab: 0, //預設當前項的值
      scrollLeft: 0, //tab標題的滾動條位置,
      searchArr: ['快遞', '身份證', '銀行卡號', '手機號碼', '身材'],
      history: []
    };
    methods = {
      switchTab: function(e) {
        let title = `${this.searchArr[e.detail.current]}查詢`;
        wx.setNavigationBarTitle({
          title: title
        });
        this.currentTab = e.detail.current;
        this.$apply();
        this.methods.checkCor.call(this);
      },
      // 點擊標題切換當前頁時改變樣式
      swichNav: function(e) {
        let title = `${this.searchArr[e.detail.current]}查詢`;
        wx.setNavigationBarTitle({
          title: title
        });
        var cur = e.target.dataset.current;
        if (this.data.currentTaB == cur) {
          return false;
        } else {
          this.currentTab = cur;
        }
      },
      //判斷當前滾動超過一屏時，設置tab標題滾動條。
      checkCor: function() {
        if (this.data.currentTab > 3) {
          this.scrollLeft = 300;
        } else {
          this.scrollLeft = 0;
        }
      },
      onShareAppMessage() {
        return {
          title: '武侯的貓-打造最簡小工具',
          path: 'pages/forexpress',
          success(res) {
            console.log(res);
          },
          fail(res) {
            console.log(res);
          }
        };
      },
      onGotUserInfo(e) {
        if (e.detail.userInfo) {
          this.showMark = false;
          wx.setStorage({
            key: 'user',
            data: e.detail.userInfo
          });
        }
      }
    };
    onLoad() {
      let that = this;
      //動畫
      var animation = wx.createAnimation({
        duration: 1200,
        timingFunction: 'linear'
      });
      this.animation = animation;
      // animation.scale(2, 2).rotate(45).step()
      this.setData({
        animationData: animation.export()
      });
      try {
        var res = wx.getSystemInfoSync();
        //start
        var clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        var calc = (clientHeight - (1 / rpxR) * 80) * rpxR;
        console.log(calc);
        this.winHeight = calc;
        //end
      } catch (e) {
        console.log('獲取設備信息失敗' + e);
      }
    }
    onShow() {
      let self = this;
      try {
        var res = wx.getStorageSync('user');
        console.log(res);
        if (res) this.showMark = false;
        if (!res) this.showMark = true;
        self.$apply();
      } catch (e) {
        this.showMark = true;
      }
      //快遞歷史
      this.history = wx.getStorageSync('saveList');
      this.$apply();
    }
  }
</script>

<style lang="less" scoped>
  .save {
    position: fixed;
    top: 20rpx;
    left: 20rpx;
    border: 2rpx solid #43cd80;
    border-radius: 8rpx;
    font-size: 26rpx;
    text-align: center;
    line-height: 30rpx;
    padding: 8rpx;
    background-color: #43cd80;
    z-index: 9999;
    color: #fff;
    box-shadow: 2rpx 2rpx 1rpx 0 grey;
  }
  .animCat {
    height: 50px;
    width: 50px;
    image {
      height: 50px;
      width: 50px;
    }
  }
  .css-button {
    width: 150px;
    margin: 50% auto;
    background: #138cff;
    color: #fff;
  }
  .scan-code {
    margin-right: 20rpx;
    width: 80rpx;
    height: 80rpx;
    text-align: center;
    line-height: 55rpx;
    color: #138cff;
    font-size: 24px;
  }
  .iconfont {
    color: #4cc0e9;
  }
  page {
    background-color: #fff; //background-image: linear-gradient(#7FC06E, #fff, #fff);
  }
  .express-img-wrap {
    height: 200rpx; //   background-image: linear-gradient(#138cff, #fff);
  }
  .express-img {
    width: 100%; //   height: 200rpx;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
  }
  .express-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center; //margin-top: 210rpx;
    //background-image: linear-gradient(#7FC06E, #fff);
    height: 100rpx; //border-bottom: 4rpx solid #7FC06E;
    .express-input {
      width: 60%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 35rpx;
      padding: 0 40rpx; //padding-left: rpx;
      border: 3rpx solid #4cc0e9;
      border-radius: 10rpx;
      color: #666;
    }
  }
  .express-input-wrap::before {
    transform: translatex(40rpx); //line-height: 60rpx;
    color: #999;
  }
  .express-input-wrap .icon-saoma {
    height: 80rpx;
    position: relative;
    font-size: 80rpx;
    line-height: 80rpx;
    margin-left: 10rpx;
  }
  .del {
    animation: dl 1s forwards; //margin: 0;
  }
  @keyframes dl {
    0% {
      transform: translate(0, 0);
    }
    10% {
      transform: translate(-100rpx, 0);
    }
    100% {
      transform: translate(1000rpx, -50rpx);
      opacity: 0;
    }
  }
  .history {
    padding: 20rpx 10rpx;
    box-sizing: border-box; //background-color: #f00;
    //width: 100%;
    height: auto;
    margin: 0rpx 10rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    border: 1rpx solid #138cff;
    border-radius: 20rpx;
    box-shadow: 4rpx -2rpx 4rpx #ccc;
    background: rgba(255, 255, 255, 0.8);
    .info-wrap {
      display: flex;
      width: 180rpx;
      flex-direction: column;
      text-align: left;
      margin-right: 8rpx;
      .company {
        font-size: 30rpx;
      }
      .number {
        font-size: 24rpx;
      }
    }
    .last-info-wrap {
      font-size: 24rpx;
      color: #666;
    }
    .phone {
      font-size: 40rpx; //transform: translateY(-10rpx);
    }
    .delete {
      width: 40rpx;
      height: 40rpx;
      position: absolute;
      top: 5rpx;
      right: 20rpx;
      border: 1rpx solid #ccc;
      border-radius: 10rpx;
      padding: 5rpx 5rpx 5rpx 12rpx;
      background: #63b8ff;
      color: #cd5555;
      font-size: 16px;
    }
  }
  .time {
    padding: 8rpx 0 0;
  }
  .mark {
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    top: 0;
    z-index: 100;
    overflow: hidden;
  }
  // .container .icon-sousuo-copy {
  //   color: #138cff;
  // }
  //test-tab start
  .tab-h {
    height: 80rpx;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 80rpx;
    background: #f7f7f7;
    font-size: 16px;
    white-space: nowrap;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
  }
  .tab-item {
    margin: 0 36rpx;
    display: inline-block;
  }
  .tab-item.active {
    color: #4675f9;
    position: relative;
  }
  .tab-item.active:after {
    content: '';
    display: block;
    height: 8rpx;
    width: 100%;
    background: #4675f9;
    position: absolute;
    bottom: 0;
    left: 5rpx;
    border-radius: 16rpx;
  }
  .item-ans {
    width: 100%;
    display: flex;
    flex-grow: row no-wrap;
    justify-content: space-between;
    padding: 30rpx;
    box-sizing: border-box;
    height: 180rpx;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
  }
  .avatar {
    width: 100rpx;
    height: 100rpx;
    position: relative;
    padding-right: 30rpx;
  }
  .avatar .img {
    width: 100%;
    height: 100%;
  }
  .avatar .doyen {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    bottom: -2px;
    right: 20rpx;
  }
  .expertInfo {
    font-size: 12px;
    flex-grow: 2;
    color: #b0b0b0;
    line-height: 1.5em;
  }
  .expertInfo .name {
    font-size: 16px;
    color: #000;
    margin-bottom: 6px;
  }
  .askBtn {
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    font-size: 14px;
    border-radius: 60rpx;
    border: 1px solid #4675f9;
    color: #4675f9;
  }
  .tab-content {
    margin-top: 80rpx;
  }
  .scoll-h {
    height: 100%;
  }
</style>

?

頁面模板

<style>
</style><template><view>監聽值:{{num}}</view>
</template><script>
import wepy from 'wepy';let _page,_this;export default class ep extends wepy.page {data = {num: 1};// 新的,引入了例如監聽watch，還有組件通訊等新概念...watch = {num(newValue, oldValue) {console.log(`num value: ${oldValue} -> ${newValue}`);}};onLoad() {console.log('頁面加載');}onShow(){console.log('頁面顯示!');}onHide(){console.log('頁面隱藏');}onUnload(){console.log('頁面卸載');}
}
</script>

?

?

引入了組件化導入（相比小程序原生來說，強大很多） -> 源碼在上，演示如下

?

?

?

?