微信小程序开发实例详解
作者:汗青man 时间:2022-11-07 19:55:48
“小程序”破解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:创建布局
<!--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演示截图
来源:http://www.jianshu.com/p/6faf5fec93dd
标签:微信,小程序
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Django实现单用户登录的方法示例
2021-12-21 03:26:41
![](https://img.aspxhome.com/file/2023/6/88896_0s.png)
python编写扎金花小程序的实例代码
2021-01-28 23:09:44
Python-typing: 类型标注与支持 Any类型详解
2023-10-15 19:40:43
怎么才能限制SQL Server只能让指定的机器连接
2010-07-30 13:30:00
通过python读取txt文件和绘制柱形图的实现代码
2023-11-23 11:24:43
![](https://img.aspxhome.com/file/2023/1/97331_0s.png)
python备份文件的脚本
2023-12-14 10:52:02
Ubuntu 16.04 LTS中源码安装Python 3.6.0的方法教程
2021-10-19 05:05:53
mysql 5.7.16 免安装版安装配置方法图文教程
2024-01-15 18:42:17
![](https://img.aspxhome.com/file/2023/3/107443_0s.jpg)
教程javascript的function(函数)
2007-09-30 13:38:00
![](https://img.aspxhome.com/file/UploadPic/20079/30/200793013468441s.gif)
Python处理mysql特殊字符的问题
2024-01-17 01:28:38
Mysql事务操作失败如何解决
2024-01-27 15:17:50
学习JavaScript设计模式之装饰者模式
2023-07-19 08:59:07
Python实现求解一元二次方程的方法示例
2023-09-15 03:29:41
Python csv文件的读写操作实例详解
2021-06-07 19:02:41
![](https://img.aspxhome.com/file/2023/2/101152_0s.jpg)
使用DataFrame删除行和列的实例讲解
2021-03-05 21:06:04
Python中PyQt5/PySide2的按钮控件使用实例
2023-03-04 16:27:44
![](https://img.aspxhome.com/file/2023/8/115508_0s.png)
Python中Django框架下的staticfiles使用简介
2022-08-18 14:04:40
使用:after清除浮动
2008-10-30 12:10:00
python通过opencv实现批量剪切图片
2021-05-12 12:50:14
tween.js缓动补间动画算法示例
2024-05-21 10:13:40