小程序笔记

‘一、跟普通开发不同点

1. 运行环境不同：网页浏览器，小程序微信环境

2. API：运行环境不同，所以无法调用DOM和BOM得API，但是小程序可以调用微信环境API,如地理位置，扫码，支付

3. 开发模式不同：

   • 网页：浏览器和代码编辑器
   • 小程序：申请小程序账号，安装小程序开发者工具，创建配置小程序项目
   • 后台：https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=1444414227

二、小程序代码构成

目录结构

小程序页面在pages目录中以单独文件夹存在

JSON 配置文件

1. JSON配置文件作用

2. app.json 文件

3. project.config.json 文件

4. sitemap.json 文件

5. 页面的 .json 配置文件

WXML模板

1. 什么是WXML

2. WXML和HTML的区别

3. WXSS和CSS的区别

JS逻辑交互

1. 小程序中的.js代码

2. 小程序中.js文件分类

三、宿主环境

宿主环境简介

1. 什么是宿主环境

2. 小程序宿主环境

手机微信是小程序宿主环境，小程序借助宿主环境提供的功能，可以完成许多网页无法完成的功能，如微信扫码，微信支付，微信登录，地理定位，ect…

3. 小程序宿主环境提供的支持

• 通信模型
• 运行机制
• 组件
• API

通信模型

1. 通信主体

2. 小程序通信模型

运行机制

1. 小程序启动过程

2. 页面渲染过程

三、组件

1. 小程序中组件分类

视图容器；基础内容；表单组件；导航组件；媒体组件；map地图组件；canvas画布组件；开放能力；无障碍访问

2. 常用的视图容器类组件

• scroll-view 组件属性

属性	说明
scroll-y	允许y轴滚动
scroll-x	允许x轴滚动

<scroll-view scroll-y><scroll-view />

• swiper 组件属性

<swiper  autoplay>
    //里面必须标签
<swiper-item>1</swiper-item>
<swiper-item>2</swiper-item>
<swiper/>

3. 常用的基础内容组件

• text 组件属性

<text selectable>1874454<text> //selectable 手机端长按复制

• rick-text组件属性

<rich-text nodes="<h1 style='color:red'>123</ h1>"></rich-text>  

4. 其他常用组件

• button按钮组件属性

• image 组件的mode属性

<image src='/images/1.png' mode='aspectFit'><image>

四、API

1. 小程序API概述

2. 小程序API的3大分类

五、协同工作权限

1. 不同项目成员对应权限

2. 开发者权限说明

六、小程序版本

1. 软件开发过程中不同版本

2. 小程序版本

七、发布上线

1. 小程序发布上线步骤

2. 上传代码

3. 后台查看上传的版本

4. 提交审核

5. 发布

6. 基于小程序码进行推广

7. 查看小程序运营数据

八、数据绑定

1. 数据绑定基本原则

2**.在data中定义数据结构**

3. Mustache语法格式

4.Mustache语法应用场景

• 动态绑定属性

九、事件绑定

1. 小程序常用事件

2. 事件对象属性列表

触摸点就是几个手指在屏幕上

3. target 和 currentTarget 的区别

4. bindtap语法

5. 在事件函数中为data中数据赋值

6. 事件传参

data-info用胡子语法是数组，引号传过去就是字符串

7. bindinput 的语法格式

8. 文本框和input之间数据绑定

十、条件渲染

1. wx:if

2. hidden

3. wx:if与hidden对比

十一、列表循环渲染

1. wx:for循环渲染

2. wx:key使用

十二、WXSS样式模板

1. WXSS 和CSS 关系

2. rpx的实现原理

3. rpx和px之间换算

4. @import 的语法格式

十三、全局配置

1. 全局配置文件及常用配置项

2. window配置

• 程序小窗口组成部分

• 常用的 window 节点配置项
  

• 模拟器问题说明

  当下拉刷新页面颜色可能会自东改变，自动合上，真机不会改变颜色，不会自动合上。

tabBar配置

• 什么是tabBar

• tabBar 6个组成部门

• tabBar 节点的配置项

• list里面每个配置项包含

tabBar标签对应页面必须放在数组最上面，否则无法显示

十四、单个页面配置

1. 页面配置和全局配置关系

2. 页面配置中常用的配置项

十五、数据请求

1. 小程序中网络请求的限制

2. 配置request合法域名

3. 发起post和get请求

4. 在页面刚加载请求数据

onLoad:function(options){
  postinfo(){
    ...
  }
}

5. 跳过 request 合法域名请求

6. 关于跨域和Ajax的说明

十六、页面导航

1. 小程序页面导航2种方式

声明式导航

2. 声明式导航-跳转tabBar页面

3. 声明式导航-跳转非tabBar页面

不写open-type属性，就是跳转非tabBar页面

4. 声明式导航-后退导航

5. 传参

编程式导航

1. 导航到 tabBar页面

示例代码如下：

2. 跳转非tabBar页面

3. 后退导航

4. 传参

接收导航参数

十七、下拉刷新

1. 启用下拉刷新

2. 监听页面下拉刷新事件，停止下拉刷新效果

十八、上拉触底

1. 监听页面的上拉触底事件

2. 添加loading效果

3. 上拉触底进行节流处理

十九、小程序生命周期

1. 小程序生命周期分类

2. 应用生命周期函数

3. 页面生命周期函数

二十、WXS脚本过滤器

1. wxs 的应用场景

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kPweYK1F-1644226550891)(小程序笔记.assets/image-20220202144942793.png)]

2. wxs 和 js 的关系

3. 内嵌 wxs脚本

4. 定义外联 wxs 脚本

5. 使用外联wxs脚本

二十一、自定义组件

组件创建与引用

1. 创建组件

2. 组件引用方式

3. 局部引用组件

4. 全局引用组件

5. 组件和页面组件区别

样式

1. 组件样式隔离

2. 组件样式隔离注意点

3. 修改组件的样式隔离选项

stylesolation 的可选值

数据、方法和属性

1. methods方法

3. properties 属性接收外部数据

4. data 和properties 区别

5. 使用setData 修改properties数据

数据监听器

1. 什么是数据监听器

2. 监听器基本使用

3. 监听器对象属性变化

4. 监听对象所有属性变化

纯数据字段

1. 什么是纯数据字段

作用：可以提升性能，只适用组件

2. 使用规则

组件生命周期

1. 组件全部生命周期函数

注意：初始化调用一次

2. 组件主要的生命周期函数

3. 生命周期函数定义方式

4. 组件所在页面生命周期

5. 定义方法

组件插槽

1. 单个插槽

2. 启用多个插槽

3. 定义和使用多个插槽

父子组件通信

1. 父子组件通信3种方式

2. 属性绑定

3. 事件绑定子传父

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TBLte4zs-1644226550905)(小程序笔记.assets/image-20220202230025551.png)]

4. 获取子组件实例访问子组件方法属性

behaviors代码共享

1. 什么是behaviors

2. 工作方式

3. 创建behaviors

4. 导入并使用

5. behavior可用的节点

6. 同名字段覆盖规则

二十二、npm和组件库

1. 小程序对npm的限制

Vant Weapp 组件库

官方文档：https://youzan.github.io/vant-weapp/#/home

安装 Vant 组件库

首先创建npm init -y 命令创建组件管理文件

API Promise化

1. 实现API Promise化

小程序装完一个包必须重新构建

小程序入口文件中（app.js）配置,只需调用一次 promisifyAll() 方法

import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p={}
promisifyAll(wx,wxp)

请求发送方式

二十三、全局数据共享

1. 什么是全局数据共享

2. 小程序全局数据共享

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uergFGEQ-1644226550911)(小程序笔记.assets/image-20220201124229720.png)]

3.创建store实例对象store=>store.js

import {observable,action} from 'mobx-miniprogram'

export const store = observable({
  // 数据字段
  numA:1,
  numB:2,
  // 计算属性
  get sum(){
    return this.numA+this.numB
  },
  // actions 函数，专门修改store中数据函数
  updateNum1:action(function(step){
    this.numB+=step
  }),
    updateNum2:action(function(step){
    this.numA+=step
  })
})

4. 将store绑定页面上

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store'
Page({
  onLoad:function(){ //生命周期函数，监听页面加载
    this.storeBindings=createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },
  onUnload:function(){  //生命周期函数监听页面卸载
    this.storeBindings.desrroyStoreBindings() //卸载方法
  }
}）

5. 将Store 中成员绑定组件中

二十四、分包

基础概念

1. 什么是分包

2. 分包的好处

3. 分包前项目构成

4. 分包后项目构成

5. 分包的加载规则

6. 分包体积限制

使用分包

1. 配置方法

2. 打包原则

3. 引用原则

独立分包

1. 什么是独立分包

2. 独立分包和普通分包区别

3. 独立分包应用场景

4. 独立分包配置方法

5. 引用原则

分包预下载

1. 什么是分包预下载

2. 配置分包预下载

3. 分包预下载限制

g-n6cc7HZX-1644226550913)]

5. 分包的加载规则

[外链图片转存中…(img-RGpxbjeI-1644226550913)]

6. 分包体积限制

[外链图片转存中…(img-cjrCfuZj-1644226550913)]

使用分包

1. 配置方法

[外链图片转存中…(img-Iix0JKK5-1644226550914)]

2. 打包原则

[外链图片转存中…(img-mRN4jNQ1-1644226550914)]

3. 引用原则

[外链图片转存中…(img-zJIthrTO-1644226550914)]

独立分包

1. 什么是独立分包

[外链图片转存中…(img-KjPDxHv4-1644226550915)]

2. 独立分包和普通分包区别

[外链图片转存中…(img-m2Mk2IH8-1644226550915)]

3. 独立分包应用场景

[外链图片转存中…(img-3HMqdbGm-1644226550915)]

4. 独立分包配置方法

[外链图片转存中…(img-w3WkK744-1644226550916)]

5. 引用原则

[外链图片转存中…(img-yCVJx3BU-1644226550916)]

分包预下载

1. 什么是分包预下载

[外链图片转存中…(img-IfPYo2yL-1644226550917)]

2. 配置分包预下载

[外链图片转存中…(img-mmJ3gf7V-1644226550917)]

3. 分包预下载限制

[外链图片转存中…(img-Kob1CdWc-1644226550917)]