微信小程序啟動頁的實現

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

關注公眾號查看效果

 

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',
    });
}