微信小程序开发-基本教程

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()获取当前时间对象（可传入时间戳）