微信小程序啓動頁的實現

加班偷着懶沒作一堆九月份迭代的工做，實現了一下小程序的啓動頁。效果是這樣的：

app.json

將啓動頁路徑放在pages數組的第一項，tabBar中list正常放置。

start.wxml

先寫一個容器顯示背景圖片，image標籤上使用bindload方法，動態計算屏幕寬高，以適應不一樣手機端的尺寸，讓背景圖更佳顯示。

由於是雲開發，圖片刻意使用了雲存儲中圖片資源，具體操做可回顧以前發佈的  視 頻 教 程 。

<view wx:for='{{testList}}' wx:for-item="item" wx:key="item"> <image src="{{item.fileID}}" bindload="autoImage" style="width:{{imgWidth}};height:{{ imgHeight }}" /></view>

用戶信息展現，總體用容器包起來，作成絕對定位。open-data 標籤能夠免權限直接拿到用戶的暱稱頭像等信息，只須要指定相應的type便可。

<view class="userinfo"> <view class="userinfo-avatar"> <open-data type="userAvatarUrl"></open-data> </view> <view class="userinfo-name"> <text>{{msg}}</text> <open-data type="userNickName"></open-data> </view> <button hover-class="btn_red" class="btn" bindtap="goToIndex">進入店鋪</button> </view>

start.wxss

進入店鋪按鈕有一個懸停效果，使用hover-class定義一個目標效果的class。

start.js

autoImage 方法以下，歡迎白嫖。

autoImage(e) { var that = this; var originalWidth = e.detail.width; var originalHeight = e.detail.height; var imageWidth = 0; var imageHeight = 0; wx.getSystemInfo({ complete: (res) => { var winWidth = res.windowWidth; if (originalWidth > winWidth) { var autoWidth = winWidth; var autoHeight = (autoWidth * originalHeight) / originalWidth; imageWidth = autoWidth + 'px'; imageHeight = autoHeight + 'px'; } else { imageWidth = originalWidth + 'px'; imageHeight = originalHeight + 'px'; } that.setData({ imgWidth: imageWidth, imgHeight: imageHeight }); } })},

進入店鋪按鈕上綁定的事件，直接調用微信api，tab頁跳轉。

goToIndex() { wx.switchTab({ url: '/pages/index/index', });},

---

Over ~ 下班走家

本文分享自微信公衆號 - 前端一塊兒學（gh_3ba18d51f982）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。