微信小程序知识总结

一、微信开发者初识

# 编辑器

## 一级工具

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"
  }