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

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

关注公众号查看成果

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