基本使用

• 基本结构
• 页面、组件
• 协同开发和发布

运行环境

• 微信环境 中不同与网页的浏览器环境
• API 无法调用浏览器的 DOM 和 BOM ， 使用微信小程序提供的

基本结构

• pages 文件夹用来存放所有小程序的页面 （以Page() 函数来启动）
• utils 文件夹用来存放工具性质的模块
• app.js 小程序项目的入口文件 （以app() 函数来启动）
• app.json 小程序项目的全局配置文件
• app.wxss 小程序项目的全局样式文件
• project.config.json 项目的配置文件
• sitemap.json 配置小程序及页面是否允许被微信索引

页面组成

小程序官方建议把所有小程序的页面，都存放再 pages 目录中，以 单独文件夹存在

• js 文件 （页面的脚本文件，存放页面的数据、时间处理函数等）
• json 文件 （页面的配置文件，配置窗口的外观、表现等）
• wxml 文件 （页面的模板结构文件）
• wxss 文件 （当前页面的样式表文件）

json配置文件

json 是一种数据格式，在小程序页面中是配置文件

app.json

全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部 tab等

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

• pages ： 用来记录当前小程序所有页面的路径
• window：全局定义小程序所有页面的背景色、文字颜色等
• style： 全局定义小程序组件所使用的样式版本
• sitemapLocation：用来指明 sitemap.json 的未知

在pages页面中的json可以覆盖 app.json 下的外观配置

project.config.json

• setting 保存了编译相关的配置
• projectname 项目的名称
• appid 小程序账号 ID

sitemap.json

小程序内的搜索 SEO

{
  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "disallow",
  "page": "*"
  }]
}

是否允许被检索

wxml

WXML(WeiXin Markup Language) 是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页中的 THML

属性名称不同

• WXML (view、 text 、image 、navigator)

属性节点不同

• <navigator url='/pages/home/home'></navigator>

提供了类似于 Vue 中的模板语法

• 数据绑定
• 列表渲染
• 条件渲染

wxss

WXSS(WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组织样式，类似于网页中的 CSS

rpx尺寸单位

• WXSS 在底层支持新的尺寸单位，在不同大小的屏幕上会自动换算

提供了全局的样式和局部样式

• app.wxss 全局样式
• page\xx.wxss 页面下的局部样式

支持部分 css 选择器

• .class 和 #id
• element
• 并集选择器 和 后代选择器
• ::after 和 ::before 等伪类选择器

基本操作

新建页面

在 app.json 中添加路径会自动生成页面结构

设置首页

调正app.json里的 pages 配置将第一项默认为首页