微信小程序代码 第1篇
[外链图片转存中…(img-m19Zmbtr-1719688172718)]
[外链图片转存中…(img-VD9wCo1b-1719688172719)]
[外链图片转存中…(img-v2QfPsw8-1719688172720)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你需要这些资料,⬅专栏获取
微信小程序代码 第2篇
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML
是用来描述当前这个页面的结构,CSS
用来描述页面的样子,JS
通常是用来处理这个页面和用户的交互。
同样道理,在小程序中也有同样的角色,其中 WXML
充当的就是类似 HTML
的角色。打开 pages/index/
,你会看到以下的内容:
和 HTML
非常相似,WXML
由标签、属性等等构成。但是也有很多不一样的地方,我们来一一阐述一下:
标签名字有点不一样
往往写 HTML 的时候,经常会用到的标签是 div
, p
, span
,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。换个思路,既然大家都需要这些组件,为什么我们不能把这些常用的组件包装起来,大大提高我们的开发效率。
从上边的例子可以看到,小程序的 WXML
用的标签是 view
, button
, text
等等,这些标签就是小程序给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力。
更多详细的组件讲述参考下个章节 小程序的能力
多了一些 wx:if
这样的属性以及 {{ }} 这样的表达式
小程序的框架也是用到了这个思路,如果你需要把一个 Hello World
的字符串显示在界面上。
WXML 是这么写 :
JS 只需要管理状态即可:
通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if
/else
, for
等控制能力,在小程序里边,这些控制能力都用 wx:
开头的属性来表达。
更详细的文档可以参考 WXML
微信小程序代码 第3篇
响应用户的操作就是这么简单,更详细的事件可以参考文档 WXML - 事件 。
此外你还可以在 JS 中调用小程序提供的丰富的 API,利用这些 API 可以很方便的调起微信提供的能力,例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中,在 pages/index/
就调用了 获取微信用户的头像和昵称,最后通过 setData
把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API 。
通过这个章节,你了解了小程序涉及到的文件类型以及对应的角色,在下个章节中,我们把这一章所涉及到的文件通过 “小程序的框架” 给 “串” 起来,让他们都工作起来。