1.新建页面
- 右键pages -> 新建目录 new-page
- 右键 new-page -> 新建 Page > new-page
- 编辑页面
- 添加编译模式
- 填入页面路径
- 确定 查看页面
2.创建模板
- pages下创建目录 template
- 选中template右键 -》 新建WXML -》 my-template
- 使用template标签, 设置模板名称name
- 页面 import引用, is属性指定模板名称
- 页面传递参数给模板
- 多个参数,逗号隔开
3.创建组件
-
使用意义,组件可以说是模板的扩展,可以包含自身行为
-
选中pages,右键 -》创建目录 comp
-
选中comp, 右键 -》 新建 Component 》 comp-test
-
编写组件代码
- 页面引用 1. json文件声明 2. 页面使用声明标签
- 若使用多个slot,组件设置options设置,否则name不生效
- 组件发布事件,通知父页面
- 组件内部触发事件
- 父页面 接收事件
- 父页面 声明处理方法
- 父页面 获取 事件数据
- 父页面 打印 组件事件 数据
4.设置tabBar
- 使用目的,底部tab导航切换,页面不刷新
- 创建首页需要切换的页面
- app.json中配置tabBar
- 切换到普通编译模式
- 设置图标 iconPath,selectedIconPath
- 自定义tabBar,下载custom-tab-bar目录,导入根路径下即可
地址:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
5.登录
- 创建登录按钮,声明处理方法
- 点击按钮获取数据
- 通过style设置样式,class无效
6.全局变量
- getApp().globalData是固定写法
7.文件引用
- 引用js
- 文件引用
- 方法调用
- 方法声明
- 引用wxss文件
8.{{}}中使用自定义方法
-
问题:小程序的{{}}中,无法直接调用方法,导致格式化数据不方便,只能在渲染前完成
-
创建自定义方法文件WXS文件 fn.wxs
注意,不是WXSS
- 方法导出
- 页面引入(WXML引入)
- 页面使用
- WXS文件无法使用new Date(), let
- 通过getDate()获取当前时间对象(可传入时间戳)