WeChat Mini Program - Background Image
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">Life is just a real dream that only happens once. </view>
<view style="text-align: center;padding-top:30rpx;color:white"> In the new sunshine, Camphor cried,</view>
<view style="text-align: center;padding-top:30rpx;padding-bottom:100rpx;color:white">Those sadness turned into morning fog and evaporated. </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>
The effect is as shown in the figure:
