您现在的位置是:网站首页> 编程资料编程资料
微信小程序开发实例详解_其它综合_
2023-05-27 126人已围观
简介 微信小程序开发实例详解_其它综合_
“小程序”破解IDE + Demo:https://github.com/gavinkwoe/weapp-ide-crack.git
资源汇总:https://github.com/Aufree/awesome-wechat-weapp
官方简易教程·MINA:http://wxopen.notedown.cn/
Hello小程序 - 非官方:http://www.helloxcx.com
微信应用号开发教程:https://my.oschina.net/wwnick/blog/750055
资源来自网络,拿走不谢!
简单搞了一下,吼吼~:
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:创建布局
{{userInfo.name}} {{userInfo.desc}} {{motto}}
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演示截图
以上就是微信小程序的简单实例,希望能帮助开始学习微信开发的朋友,谢谢大家对本站的支持!
您可能感兴趣的文章:
点击排行
- TYSB手游公测版下载-TYSB官方唯一正版手游下载 _安卓网
- 青云传之琉璃梦手游下载-青云传之琉璃梦官方版下载 v5.7.0安卓版_安卓网
- 爆枪突击专用修改器下载-爆枪突击无限兑换码 v1.0.0.3辅助修改_安卓网
- 丛林动物宝宝发型沙龙游戏-丛林动物宝宝发型沙龙(休闲装扮)Baby Jungle Animal Hair Salon v1.0.10_安卓网
- 洗牌猫下载-洗牌猫(卡牌对战)Shuffle Cats v0.14.8_安卓网
- 终极奥特超人50周年版下载-终极奥特超人50周年版(奥特曼正版授权) v2.3_安卓网
- project h手机|project h安卓-project h手机版(虚拟空间女友)预约 v1.0_安卓网
- project h试玩版-project h手游试玩版预约 v1.0_安卓网