这篇文章主要介绍了微信小程序开发实例详解的相关资料,需要的朋友可以参考下
简单搞了一下，吼吼~：
js：业务处理
//index.js //获取应用实例 var app = getapp() page({ data: { motto: 'hello world', userinfo: {name:'汗青', desc:"前端的春天来了！\n 前端要烂大街了！！", avatarurl:"http://img2.3lian.com/2014/gif/10/9/25.jpg"} }, //事件处理函数 bindviewtap: function() { wx.navigateto({ url: '../logs/logs' }) }, onload: function () { console.log('onload') var that = this //调用应用实例的方法获取全局数据 app.getuserinfo(function(userinfo){ //更新数据 that.setdata({ userinfo:userinfo }) that.update() }) } })
wxml：创建布局
<!--index.wxml--> <view class="container"> <view bindtap="bindviewtap" class="userinfo"> <image class="userinfo-avatar" src="{{userinfo.avatarurl}}" background-size="cover"></image> <text class="userinfo-name">{{userinfo.name}}</text> <text class="userinfo-desc">{{userinfo.desc}}</text> </view> <view class="usermotto"> <text class="user-motto">{{motto}}</text> </view> </view>
wxss：设置样式
/**index.wxss**/ .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-name { color: #aaa; font-size: 30rpx; margin: 30rpx; } .userinfo-desc { color: #f00; font-size: 50rpx; line-height: 70rpx; } .usermotto { margin-top: 200px; }
演示截图
小程序组件demo演示截图
以上就是微信小程序快速开发简单入门教程的详细内容。