微信小程序

微信小程序

文件主要目录及文件作用

  • component 组件文件夹
    • navBar 底部组件
      • navBar.js 底部组件的 js 代码
      • navBar.json 底部组件的配置文件
      • navBar.wxml 底部组件的 html 代码
      • navBar.wxss 底部组件的 css 代码
  • pages 页面文件夹
    • index 首页
      • index.js 首页的 js 代码
      • index.json 首页的配置文件
      • index.wxml 首页的 html 代码
      • index.wxss 首页的 css 代码
  • 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 传递参数
  • 使用数据库传递数据

评论