一、微信开发者初识
# 编辑器
## 一级工具
1. 项目--->退出当前项目
2. 格式化代码--->shift+alt+f
3. 工具---> 构建npm
4. 详情--->本地设置：【使用npm模块，不校验合法域名】
二、项目结构
# 项目结构
## docs：笔记
## pages：视图组件(页面)
### 由四个文件组成一个页面
- js文件：写逻辑的
- json：当前页面的配置文件
- wxml：页面，标签，dom片段
- wxss：当前页面的样式
## utils：全局工具
自定义的一些纯js工具，比如时间格式化插件等。
## app.js：全局入口文件
等价于vue里的main.js，拥有自己的生命周期。
## app.json：全局配置文件
配置项目的整体控制，比如说全局的样式，底部的导航等。
## app.wxss：全局样式
微信对css的封装，有很多样式，比如选择器微信支持程度不高。
## project.config.json：项目配置文件
该文件就是版本管理中的本地配置，用来配置项目的。
## sitemap.json：爬虫名单
给微信平台里的爬虫看的，告诉微信平台项目里哪些内容是公开的，可以被别人搜到的。
三、全局配置
# 全局配置
## app.json
### entryPagePath:主页面
### pages:页面路由
如果没有设置entryPagePath，那么现实的第一个页面取自于第一个路径。
### window:窗口设置
### tabBar:底部的tab导航
list是核心的设置，是一个数组，最多五个导航，最少两个；
list里的pagePath路径必须先在pages里定义，定以后才能使用；
四、页面配置
# 页面配置
`pages/path/index.json`
## 配置项
### window
重写，覆盖全局的window配置，让当前页面拥有自己的窗口样式。
### usingComponents
引入子组件的时候，用于挂载的；
相当于vue里的components；
五、小程序Api
# 小程序Api
## App
全局入口，整个小程序项目中，只允许有一个App入口函数。
### 全局数据
- globalData:写在全局的js里
- 使用`this.globalData.data`
### 私有的生命周期【全局的生命周期】
- onLaunch:初始化函数
- onShow:启动或切换前台
- onHide:小程序后台运行
## Page
### 私有的生命周期【页面的生命周期】
- onLoad:页面加载
- onShow:页面显示
- onHide:页面隐藏
- onReady:页面初始化渲染完成
- onUnload:页面卸载--销毁
## Component
1. 构建自定义组件的，需要在json组件中声明：`"component":true`之后才可以在page文件中使用。
2. 使用组件：在page页面的json里引入
```sh
"usingComponents":{
"wk-header":"/components/header/header"
}
```
### 生命周期
- created:创建组件的生命周期
六、小程序语法
# 小程序语法
## 渲染数据
1. 在文档内使用插值的写法`{{}}`
2. 在标签上属性内使用也需要`{{}}`
3. 修改数据使用`this.setData({data:newValue})`
## 条件渲染
`wx:if`,'wx:else if','wx:else'
## 循环渲染
`wx:for="{{data}}"`
默认在for语法内注入了item变量和index变量；
如果需要修改名字，在元素上使用`wx:for-item="别名"`.
## 事件绑定
`bind:eventType='callback'`
移动端没用click事件，对应的是tap事件
## 内置的网络请求
`wx:request({})`写法和jq.ajax几乎一样
七、引入第三方依赖
# 使用第三方依赖
## wx-axios-promise
如果直接引入模块同时还使用`useExtendedLib`引入了依赖，那么就会冲突，此时就需要构建npm了。
import axios from "wx-axios-promise";
const Axios = axios();
Axios.get("http://baidu.com").then((res) => {
console.log(res);
});用来执行请求的，并且不用再构建npm，直接使用es6的import就可以引入使用。
## WeUI
- alert 弹窗在操作反馈里
- 因为是官方的，也算是内置的，所以不用安装。小程序自己的ui库，基于小程序基础组件封装的。
- 安装：在app.json文件里写入
"useExtendedLib":{
"weui":true
}- 使用：看官网，需要在 page.json 写入
"usingComponents":{
"mp-siwper":"weui/siwer"
}
