微信小程序 复习笔记_微信小程序复习

项目结构

1. pages文件夹: 路由组件
2. 新建components文件夹: 一般组件
3. app.js: 入口js文件 把里面的代码全删了 然后生成一个App的模板代码即可
4. app.wxss: 全局的css文件, 全局的css只在路由组件里面生效 一般组件是用不了的
5. app.json: 全局的配置文件

• pages: 配置路由 写的是绝对路径 那个路径写在第一个 谁就是首页
• window: 全局导航栏配置
  • navigationBarBackgroundColor： 导航栏背景颜色
  • navigationBarTitleText: 导航栏文字
  • navigationBarTextStyle:文字样式 只有white和black
• tabBar: 底部导航栏(最少2个,最多5个)
  • color: 文字未选中时的颜色
  • selectedColor: 文字选中时的颜色
  • list: 单独导航的配置项
  • pagePath: 绝对路径 写文件的路径
  • text: 文字
  • iconPath: 未选中时的图标
  • selectedIconPath: 选中时的图标

组件结构

1. wxml: html文件

• div => view
• span => text
• img => image

2. wxss: css文件

• 背景图片: 不能是本地图片 只能是网络图片

3. js: js文件

• 只要在html里面使用了变量 必须用{{}}包起来
• 使用数据 先定义在data当中 然后用插值表达式{{}}
• wx:for: {{数据名}} 默认的每一项叫item 下标叫index
• wx:for-item: 改变item的名字 wx:for-index:改变index的名字
• wx:if
• 绑定事件
• 点击事件: bindtap
• 长按事件: bindlongtap
• 所有的事件都把@换成bind: bindchange bindinput bindblur…

4. json: 组件配置文件

• 配置和app.json配置一样