1. 程式人生 > >wepy - 與原生有什麽不同(x.wpy)使用實例

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

shadow 分享 cloud ucc o-c cal .get hang index

技術分享圖片

源碼

技術分享圖片
  1 <template>
  2   <view class=‘mark‘ wx:if="{{showMark}}">
  3     <view animation="{{animationData}}" class="animCat">
  4       <image src="http://osk1hpe2y.bkt.clouddn.com/18-5-30/34559443.jpg"></image>
  5     </view>
  6     <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo" class="css-button">開始吧!</button>
  7
</view> 8 <!-- test-tab --> 9 <view> 10 <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}"> 11 <view class="tab-item {{currentTab==0?‘active‘:‘‘}}" data-current="0" bindtap="swichNav">快遞</view> 12 <view class="tab-item {{currentTab==1?‘active‘:‘‘}}" data-current="1" bindtap="swichNav">身份證</view> 13
<view class="tab-item {{currentTab==2?‘active‘:‘‘}}" data-current="2" bindtap="swichNav">銀行卡號</view> 14 <view class="tab-item {{currentTab==3?‘active‘:‘‘}}" data-current="3" bindtap="swichNav">手機號碼</view> 15 <view class="tab-item {{currentTab==4?‘active‘:‘‘}}" data-current="4" bindtap="swichNav">身材計算</view> 16
</scroll-view> 17 <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx"> 18 <!-- 快遞查詢 --> 19 <swiper-item wx:for="{{[0,1,2,3,4]}}" wx:key="*this"> 20 <scroll-view scroll-y="true" class="scoll-h" wx:if="{{index==0}}"> 21 <ForexpressItem :history.sync=‘history‘></ForexpressItem> 22 </scroll-view> 23 <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==1}}"> 24 <PeoPleCard></PeoPleCard> 25 </scroll-view> 26 <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==2}}"> 27 <IdCard></IdCard> 28 </scroll-view> 29 <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==3}}"> 30 <MobileHome></MobileHome> 31 </scroll-view> 32 <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==4}}"> 33 <Figure></Figure> 34 </scroll-view> 35 </swiper-item> 36 </swiper> 37 </view> 38 </template> 39 40 <script> 41 import wepy from ‘wepy‘; 42 import ForexpressItem from ‘@/components/express/index‘; 43 import IdCard from ‘@/components/querys/idCard‘; 44 import Figure from ‘@/components/querys/figure‘; 45 import MobileHome from ‘@/components/querys/mobileHome‘; 46 import PeoPleCard from ‘@/components/querys/peoPleCard‘; 47 import { 48 formatTime 49 } from ‘@/utils/util‘; 50 export default class Forexpress extends wepy.page { 51 config = { 52 navigationBarTitleText: ‘快遞查詢‘ 53 }; 54 components = { 55 ForexpressItem, 56 IdCard, 57 Figure, 58 MobileHome, 59 PeoPleCard 60 }; 61 data = { 62 showMark: false, 63 winHeight: ‘‘, //窗口高度 64 currentTab: 0, //預設當前項的值 65 scrollLeft: 0, //tab標題的滾動條位置, 66 searchArr: [‘快遞‘, ‘身份證‘, ‘銀行卡號‘, ‘手機號碼‘, ‘身材‘], 67 history: [] 68 }; 69 methods = { 70 switchTab: function(e) { 71 let title = `${this.searchArr[e.detail.current]}查詢`; 72 wx.setNavigationBarTitle({ 73 title: title 74 }); 75 this.currentTab = e.detail.current; 76 this.$apply(); 77 this.methods.checkCor.call(this); 78 }, 79 // 點擊標題切換當前頁時改變樣式 80 swichNav: function(e) { 81 let title = `${this.searchArr[e.detail.current]}查詢`; 82 wx.setNavigationBarTitle({ 83 title: title 84 }); 85 var cur = e.target.dataset.current; 86 if (this.data.currentTaB == cur) { 87 return false; 88 } else { 89 this.currentTab = cur; 90 } 91 }, 92 //判斷當前滾動超過一屏時,設置tab標題滾動條。 93 checkCor: function() { 94 if (this.data.currentTab > 3) { 95 this.scrollLeft = 300; 96 } else { 97 this.scrollLeft = 0; 98 } 99 }, 100 onShareAppMessage() { 101 return { 102 title: ‘武侯的貓-打造最簡小工具‘, 103 path: ‘pages/forexpress‘, 104 success(res) { 105 console.log(res); 106 }, 107 fail(res) { 108 console.log(res); 109 } 110 }; 111 }, 112 onGotUserInfo(e) { 113 if (e.detail.userInfo) { 114 this.showMark = false; 115 wx.setStorage({ 116 key: ‘user‘, 117 data: e.detail.userInfo 118 }); 119 } 120 } 121 }; 122 onLoad() { 123 let that = this; 124 //動畫 125 var animation = wx.createAnimation({ 126 duration: 1200, 127 timingFunction: ‘linear‘ 128 }); 129 this.animation = animation; 130 // animation.scale(2, 2).rotate(45).step() 131 this.setData({ 132 animationData: animation.export() 133 }); 134 try { 135 var res = wx.getSystemInfoSync(); 136 //start 137 var clientHeight = res.windowHeight, 138 clientWidth = res.windowWidth, 139 rpxR = 750 / clientWidth; 140 var calc = (clientHeight - (1 / rpxR) * 80) * rpxR; 141 console.log(calc); 142 this.winHeight = calc; 143 //end 144 } catch (e) { 145 console.log(‘獲取設備信息失敗‘ + e); 146 } 147 } 148 onShow() { 149 let self = this; 150 try { 151 var res = wx.getStorageSync(‘user‘); 152 console.log(res); 153 if (res) this.showMark = false; 154 if (!res) this.showMark = true; 155 self.$apply(); 156 } catch (e) { 157 this.showMark = true; 158 } 159 //快遞歷史 160 this.history = wx.getStorageSync(‘saveList‘); 161 this.$apply(); 162 } 163 } 164 </script> 165 166 <style lang="less" scoped> 167 .save { 168 position: fixed; 169 top: 20rpx; 170 left: 20rpx; 171 border: 2rpx solid #43cd80; 172 border-radius: 8rpx; 173 font-size: 26rpx; 174 text-align: center; 175 line-height: 30rpx; 176 padding: 8rpx; 177 background-color: #43cd80; 178 z-index: 9999; 179 color: #fff; 180 box-shadow: 2rpx 2rpx 1rpx 0 grey; 181 } 182 .animCat { 183 height: 50px; 184 width: 50px; 185 image { 186 height: 50px; 187 width: 50px; 188 } 189 } 190 .css-button { 191 width: 150px; 192 margin: 50% auto; 193 background: #138cff; 194 color: #fff; 195 } 196 .scan-code { 197 margin-right: 20rpx; 198 width: 80rpx; 199 height: 80rpx; 200 text-align: center; 201 line-height: 55rpx; 202 color: #138cff; 203 font-size: 24px; 204 } 205 .iconfont { 206 color: #4cc0e9; 207 } 208 page { 209 background-color: #fff; //background-image: linear-gradient(#7FC06E, #fff, #fff); 210 } 211 .express-img-wrap { 212 height: 200rpx; // background-image: linear-gradient(#138cff, #fff); 213 } 214 .express-img { 215 width: 100%; // height: 200rpx; 216 position: absolute; 217 top: 10%; 218 left: 50%; 219 transform: translateX(-50%); 220 } 221 .express-input-wrap { 222 position: relative; 223 display: flex; 224 align-items: center; 225 justify-content: center; //margin-top: 210rpx; 226 //background-image: linear-gradient(#7FC06E, #fff); 227 height: 100rpx; //border-bottom: 4rpx solid #7FC06E; 228 .express-input { 229 width: 60%; 230 height: 80rpx; 231 line-height: 80rpx; 232 font-size: 35rpx; 233 padding: 0 40rpx; //padding-left: rpx; 234 border: 3rpx solid #4cc0e9; 235 border-radius: 10rpx; 236 color: #666; 237 } 238 } 239 .express-input-wrap::before { 240 transform: translatex(40rpx); //line-height: 60rpx; 241 color: #999; 242 } 243 .express-input-wrap .icon-saoma { 244 height: 80rpx; 245 position: relative; 246 font-size: 80rpx; 247 line-height: 80rpx; 248 margin-left: 10rpx; 249 } 250 .del { 251 animation: dl 1s forwards; //margin: 0; 252 } 253 @keyframes dl { 254 0% { 255 transform: translate(0, 0); 256 } 257 10% { 258 transform: translate(-100rpx, 0); 259 } 260 100% { 261 transform: translate(1000rpx, -50rpx); 262 opacity: 0; 263 } 264 } 265 .history { 266 padding: 20rpx 10rpx; 267 box-sizing: border-box; //background-color: #f00; 268 //width: 100%; 269 height: auto; 270 margin: 0rpx 10rpx; 271 margin-bottom: 20rpx; 272 overflow: hidden; 273 position: relative; 274 display: flex; 275 align-items: center; 276 border: 1rpx solid #138cff; 277 border-radius: 20rpx; 278 box-shadow: 4rpx -2rpx 4rpx #ccc; 279 background: rgba(255, 255, 255, 0.8); 280 .info-wrap { 281 display: flex; 282 width: 180rpx; 283 flex-direction: column; 284 text-align: left; 285 margin-right: 8rpx; 286 .company { 287 font-size: 30rpx; 288 } 289 .number { 290 font-size: 24rpx; 291 } 292 } 293 .last-info-wrap { 294 font-size: 24rpx; 295 color: #666; 296 } 297 .phone { 298 font-size: 40rpx; //transform: translateY(-10rpx); 299 } 300 .delete { 301 width: 40rpx; 302 height: 40rpx; 303 position: absolute; 304 top: 5rpx; 305 right: 20rpx; 306 border: 1rpx solid #ccc; 307 border-radius: 10rpx; 308 padding: 5rpx 5rpx 5rpx 12rpx; 309 background: #63b8ff; 310 color: #cd5555; 311 font-size: 16px; 312 } 313 } 314 .time { 315 padding: 8rpx 0 0; 316 } 317 .mark { 318 width: 100%; 319 height: 100%; 320 position: fixed; 321 background: rgba(0, 0, 0, 0.8); 322 top: 0; 323 z-index: 100; 324 overflow: hidden; 325 } 326 // .container .icon-sousuo-copy { 327 // color: #138cff; 328 // } 329 //test-tab start 330 .tab-h { 331 height: 80rpx; 332 width: 100%; 333 box-sizing: border-box; 334 overflow: hidden; 335 line-height: 80rpx; 336 background: #f7f7f7; 337 font-size: 16px; 338 white-space: nowrap; 339 position: fixed; 340 top: 0; 341 left: 0; 342 z-index: 99; 343 } 344 .tab-item { 345 margin: 0 36rpx; 346 display: inline-block; 347 } 348 .tab-item.active { 349 color: #4675f9; 350 position: relative; 351 } 352 .tab-item.active:after { 353 content: ‘‘; 354 display: block; 355 height: 8rpx; 356 width: 100%; 357 background: #4675f9; 358 position: absolute; 359 bottom: 0; 360 left: 5rpx; 361 border-radius: 16rpx; 362 } 363 .item-ans { 364 width: 100%; 365 display: flex; 366 flex-grow: row no-wrap; 367 justify-content: space-between; 368 padding: 30rpx; 369 box-sizing: border-box; 370 height: 180rpx; 371 align-items: center; 372 border-bottom: 1px solid #f2f2f2; 373 } 374 .avatar { 375 width: 100rpx; 376 height: 100rpx; 377 position: relative; 378 padding-right: 30rpx; 379 } 380 .avatar .img { 381 width: 100%; 382 height: 100%; 383 } 384 .avatar .doyen { 385 width: 40rpx; 386 height: 40rpx; 387 position: absolute; 388 bottom: -2px; 389 right: 20rpx; 390 } 391 .expertInfo { 392 font-size: 12px; 393 flex-grow: 2; 394 color: #b0b0b0; 395 line-height: 1.5em; 396 } 397 .expertInfo .name { 398 font-size: 16px; 399 color: #000; 400 margin-bottom: 6px; 401 } 402 .askBtn { 403 width: 120rpx; 404 height: 60rpx; 405 line-height: 60rpx; 406 text-align: center; 407 font-size: 14px; 408 border-radius: 60rpx; 409 border: 1px solid #4675f9; 410 color: #4675f9; 411 } 412 .tab-content { 413 margin-top: 80rpx; 414 } 415 .scoll-h { 416 height: 100%; 417 } 418 </style>
View Code

頁面模板

<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>

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

技術分享圖片

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