微信小程序 - 背景图片

微信小程序 - 背景图片

 

 

Page({
    data: {
        width: 0,
        height: 0,
        src: '../../../dist/images/image-background.jpg'
    },
    onLoad: function onLoad(options) {
        var _this = this;
        wx.getSystemInfo({
            success: function success(res) {
                _this.setData({
                    width: res.windowWidth,
                    height: res.windowHeight
                });
            }
        });
    },
    login: function login() {
        wx.navigateTo({
            url: '../login/login'
        });
    },
    register: function register() {
        wx.navigateTo({
            url: '../register/register'
        });
    }
});

 

<view style="width: {{width}}px; height: {{height}}px; background-image: url({{src}})">
    <view>
        <view style="text-align: center;padding-top:300rpx;color:white">生命，只是一场唯有一次的真实梦境。</view>
        <view style="text-align: center;padding-top:30rpx;color:white"> 新的阳光里，香樟哭了，</view>
        <view style="text-align: center;padding-top:30rpx;padding-bottom:100rpx;color:white">那些忧伤化作清晨的雾被蒸干了。 </view>
    </view>
 
    <view style="margin:20px;">
        <button type="warn" bindtap="register">注册</button>
    </view>
 
    <view style="margin:20px">
        <button type="primary" bindtap="login">登录</button>
    </view>
</view>

  

效果如图：