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>

引入了组件化导入（相比小程序原生来说，强大很多） -> 源码在上，演示如下