关于前端:微信小程序启动页的实现

加班偷着懒没做一堆九月份迭代的工作，实现了一下小程序的启动页。成果是这样的：

关注公众号查看成果

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