微信小程序
微信小程序
文件主要目录及文件作用
- component 组件文件夹
- navBar 底部组件
- navBar.js 底部组件的 js 代码
- navBar.json 底部组件的配置文件
- navBar.wxml 底部组件的 html 代码
- navBar.wxss 底部组件的 css 代码
- navBar 底部组件
- pages 页面文件夹
- index 首页
- index.js 首页的 js 代码
- index.json 首页的配置文件
- index.wxml 首页的 html 代码
- index.wxss 首页的 css 代码
- index 首页
- public 图片文件夹
- utils 工具文件夹
- api.js 控制 api 的文件
- md5.js 工具:MD5 加密文件
- timestamp.js 工具:事件戳文件
- app.json 设置全局的基础数据等
- app.wxss 公共样式,可通过 import 导入更多
- project.config.json 项目配置文件
微信小程序生命周期
- onLoad(): 页面加载时触发,一个页面只会调用一次,可以在 onLoad 中获取打开当前页面
所调用的 query 参数。 - onShow(): 页面显示/切入前台时触发,每次打开页面都会调用一次。
- onReady(): 页面初次渲染完成时触发,一个页面只会调用一次。
- onHide(): 页面隐藏/切入后台时触发,当 navigateTo 或底部 tab 切换时调用。
- onUnload(): 页面卸载时触发。
app.json 是对当前小程序的全局配置,讲述三个配置各个项的含义?
- pages 字段:用于描述当前小程序所有页面路径,为了让微信客户端知道当前小程序页面
定义在那个目录。 - window 字段:小程序所有页面的顶部背景颜色,文字颜色定义等。
- tab 字段:小程序全局顶部 tab 或底部 tab。
小程序的 wxss 和 css 有哪些不一样的地方?
- 新像素单位 rpx
- 样式可直接使用 import 导入
小程序 wxml 和标准的 html 的异同?
都是用来描述页面的结构,都是由标签、属性等构成。
- 标签名字不一样,且小程序标签更少,单一标签更多。
- 多了一些 wx:if 这样的属性和双大括号这样的表达式。
- wxml 只能在微信小程序开发者工具中预览,html 可以在浏览器内预览。
- 组件封装不同,wxml 对组件进行了重新封装。
- 小程序运行在 JS Core 内,没有 DOM 树和 window 对象,小程序无法使用 window 对象和 document
对象。
小程序 wxss 和 css 的异同?
都是用来描述页面的样子
- wxss 具有 css 大部分的特性,也做了一些扩充和修改。
- wxss 新增了尺寸单位,wxss 在底层支持新的尺寸单位 rpx。
- wxss 仅支持部分 css 选择器。
- wxss 提供全局样式和局部样式。
小程序页面间有哪些传递数据的方法?
- 使用全局变量实现数据传递
- 页面跳转或重定向时,使用 url 带参数传递数据
- 使用组件模板 template 传递参数
- 使用数据库传递数据