微信小程序开发实例详解

网友投稿 366 2023-11-07

“小程序”破解IDE + Demo：https://github.com/gavinkwoe/weapp-ide-crack.git

微信小程序开发实例详解

资源汇总：https://github.com/Aufree/awesome-wechat-weapp

官方简易教程·MINA：http://wxopen.notedown-/

Hello小程序 - 非官方：http://www.helloxcx.com

微信应用号开发教程：https://my.oschina-/wwnick/blog/750055

资源来自网络，拿走不谢！

简单搞了一下，吼吼~：

js：业务处理

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//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：创建布局

?
1
2
3
4
5
6
7
8
9
10
11
12
<!--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：设置样式

演示截图

小程序组件Demo演示截图

以上就是微信小程序的简单实例，希望能帮助开始学习微信开发的朋友，谢谢大家对本站的支持！

您可能感兴趣的文章:微信小程序（应用号）开发新闻客户端实例微信小程序 开发指南详解微信小程序版的知乎日报开发实例微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换微信小程序 开发工具快捷键整理微信小程序应用号开发教程详解微信小程序应用号开发体验微信小程序 欢迎界面开发的实例详解微信小程序开发实战教程之手势解锁微信小程序开发探究

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 实例 小程序 js
上一篇:小程序点赞新功能
下一篇:微信小程序申请流程以及注意事项
相关文章

 发表评论

暂时没有评论，来抢沙发吧~