初识微信小程序

项目结构

微信小程序项目的目录结构

  • pages：用来存储所有的微信小程序页面
    • index：用来存储首页相关文件
      • index.js：首页业务代码文件
      • index.json：首页配置文件
      • index.wxml：首页结构代码文件
      • index.wxss：首页样式代码文件
    • logs：用来存储日志相关文件
  • utils：用来存储工具性质的模块
  • .eslintrc.js：ESLint相关配置
  • app.js：小程序项目入口文件
  • app.json：小程序项目全局配置文件
  • app.wxss：小程序项目全局样式文件
  • package-lock.json：包依赖配置文件
  • project.config.json：小程序项目个性化配置文件
  • sitemap.json：用来配置微信小程序及页面是否允许被微信索引

app.json 配置文件

json 是一种数据格式（key: value），总是以配置文件的形式存在

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{

 "pages":[

  "pages/index/index",

  "pages/logs/logs"

 ],

 "window":{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#fff",

  "navigationBarTitleText": "Weixin",

  "navigationBarTextStyle":"black"
 },

 "style": "v2",

 "sitemapLocation": "sitemap.json"

}
  • pages：用来配置小程序的页面路径，位于第一项的页面就是首页
  • windows：用来设置小程序所有页面的样式内容
  • style：用来配置小程序全局样式的版本
  • sitemapLocation：用来配置 sitemap.json 文件路径

在 pages 配置项中新增一个页面路径，微信小程序开发工具会自动生成这个页面文件夹，并且文件夹中自动生成对应的 js、json、wxml、wxss 文件

pages 文件夹下的页面文件夹中的 json 文件配置了与 app.json 相同的配置项，在这个页面中，以页面文件夹中的配置文件中的配置为准

WXML 文件

WXML 是微信小程序中的页面结构文件

WXML 与 HTML 的区别

  • 标签名不相同
    • HTMl (div、span、img、a)
    • WXMl (view、text、image、navigator)
  • 属性节点不同
    • HTML <a href="#">链接</a>
    • WXML <navigator url="#"></navigator>
  • 提供了类似于 Vue 中的模板语法
    • 数据绑定
    • 列表渲染
    • 条件渲染

WXSS 文件

WXSS 微信小程序中的样式文件

rpx

rpx 默认将屏幕分成750份，1rpx 等于一份

@import

1
@import "style.wxss"

WXSS 和 CSS 的区别

  • 新增了 rpx 单位：在不同大小的屏幕上，小程序会根据屏幕自动进行换算
  • WXSS 只支持常用的选择器
    • 类名选择器和 ID选择器
    • 标签名选择器
    • 后代选择器
    • 并集选择器
    • 伪类选择器
  • 提供了全局样式文件和局部样式文件