- 新建小程序页面
- app,json的“pages”中增加路径“pages/list/list”
- 小程序默认把app,json的“pages”中,排在第一位的页面当做项目首页进行渲染
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/list/list"
]
如index就是此项目的首页渲染
- WXML模板(WeiXin Markup Language)
- WXML是小程序框架设计的一套标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的HTML。
- WXML和HTML的区别
- 标签名称不同
HTML (div, span,img, a)
WXML (view, text,image, navigator)- 属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>- 提供了类似于Vue中的模板语法
数据绑定
列表渲染
条件渲染
- WXSS样式(Weixin Style Sheet)
- WXSS是一套样式语言,描述WXML组件,类似于CSS。
- WXSS和 CSS 的区别
- 新增了rpx尺寸单位
CSS中需要手动进行像素单位换算,例如rem
WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换- 提供了全局的样式和局部样式
项目根目录中的app.wxss 会作用于所有小程序页面
局部页面的.wxss样式仅对当前页面生效- WXSS仅支持部分CSS选择器
.class 和 #id
element
并集选择器、后代选择器
::after和::before 等伪类选择器
- JS逻辑交互
JS三类文件
- app.js:整个项目的入口文件,调用APP()函数启动整个项目
- 页面的.js文件:调用Page()函数创建并运行页面
- 普通.js文件:普通功能模块文件,封装公共的函数或属性供页面使用,如util中的util.js
- 宿主环境(host environment)
- 指程序运行所必须的依赖环境,手机微信是小程序的宿主环境
- 小程序宿主环境内容含:通信模型、运行机制、组件、API
- 通信模型:【通信主体渲染层(WXML、WXSS)+ 逻辑层(JS脚本)】
- 渲染层和逻辑层间的通信(微信客户端转发)
- 逻辑层和第三方服务器间的通信(微信客户端转发)
- 运行机制
- 代码包下载到本地
- 解析app.json全局配置文件
- 执行app.js入口文件,调用App()创实例
- 渲染首页
- 加载解析页面的.json配置文件
- 加载页面.wxml模板、.wxss样式
- 执行页面.js文件,调用Page()创页面实例
- 页面渲染完成
5. 启动完成
微信小程序学习笔记-2
最新推荐文章于 2023-11-29 08:54:33 发布