微信小程序开发基础篇

一、初识微信小程序

1、什么是微信小程序

Ⅰ-小程序历史

Ⅱ-小程序的优势

2、小程序准备

Ⅰ-环境准备

Ⅱ-新建小程序流程

Ⅲ-微信开发者工具介绍

1）开发工具界面图解

2）开发工具的一些基本配置

Ⅳ-微信小程序名称或者原始id该如何找回？

二、小程序的基本目录结构与文件作用剖析

1、小程序文件结构和传统web对比

2、基本的项目目录

Ⅰ-项目目录解释

3、小程序配置文件

Ⅰ-全局配置app.json

Ⅱ-页面配置page.json

Ⅲ-sitemap 配置-了解即可

4、小程序框架接口

Ⅰ-App(Object object)

AppObject getApp(Object object)

三、小程序的基础知识储备

1、Flex 布局

Ⅰ-基本知识点概念

Ⅱ-解决flex布局中 space-between方法的排版问题

2、移动端相关知识点

Ⅰ-物理像素

Ⅱ-设备独立像素 、 css 像素

Ⅲ-dpr比 、DPI 、PPI

3、移动端适配方案

Ⅰ-viewport 适配

Ⅱ- rem 适配

四、视图层详解

1、WXSS样式文件详解

Ⅰ-尺寸单位

Ⅱ-样式导⼊

Ⅲ-内联样式

2、WXML语法详解

Ⅰ-数据绑定与写法规则

1) 单向简单数据绑定

2) 运算

3) 组合

4) 自定义属性data-*的命名与使用

Ⅱ-列表渲染

1) wx:for

2) block wx:for

3) wx:key

① wx:key 的值以两种形式提供

②使用 wx:key 的意义

4) 列表渲染注意点

① 当 wx:for 的值为字符串时，会将字符串解析成字符串数组

② 花括号和引号之间如果有空格，将最终被解析成为字符串

Ⅲ-条件渲染

1) wx:if

2) block wx:if

3) wx:if vs hidden

Ⅳ-模板

1) 定义模板

2) 使用模板

Ⅴ-引用

1) import

① 使用示例

② import 的作用域

2) include

3、双向绑定

Ⅰ-双向绑定语法

1) 简单使用

2) 常见的 setData 操作错误

① 频繁的去 setData

② 每次 setData 都传递大量新数据

③ 后台态页面进行 setData

4、事件系统

Ⅰ-什么是事件?

Ⅱ-事件分类

Ⅲ-事件的绑定方式

1) 普通事件绑定-bind 绑定

2) 绑定并阻止事件冒泡-catch 绑定:

3) 互斥事件绑定

Ⅳ-事件的捕获阶段

Ⅴ-事件对象

1) BaseEvent 基础事件对象属性列表

2) TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

3) CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

五、逻辑层详解

1、页面路由

Ⅰ-页面栈与路由方式

Ⅱ-Tips

2、模块化

六、组件与组件库

1、官方组件

Ⅰ-view

Ⅱ-text

Ⅲ-image

Ⅳ-swiper

Ⅴ-scroll-view

2、LinUi组件库

Ⅰ-安装与使用

Ⅱ-avatar头像

Ⅲ-icon

七、小程序API

1、数据缓存

2、交互

Ⅰ-wx.showToast与wx.showModal

3、媒体

Ⅰ-媒体音乐播放

Ⅱ-图片

1) wx.previewImage(Object object)

4、界面

Ⅰ-Tab Bar

八、小程序生命周期

1、应用生命周期

2、页面生命周期

3、组件生命周期-不算在小程序生命周期中

九、自定义组件

1、组件模板和样式

Ⅰ-组件样式

Ⅱ-外部样式类

2、组件间通信与事件

Ⅰ-组件间通信

Ⅱ-触发事件

杂记

1、微信开发者工具使用技巧

Ⅰ-新建页面的技巧与规则:

Ⅱ-指定初始页面

Ⅲ-ctrl+滚轮缩放工具界面

2、微信开发常见编程方法与细节

Ⅰ-相对路径规则:

Ⅱ-npm引入第三方库后需进行构建

3、初学阶段遇到的问题与解决

Ⅰ-设置整个page的背景色

Ⅱ-小程序中使用less

Ⅲ-报错: TypeError: wx.getMenuButtonBoundingClientRect is not a function

Ⅳ-警告:无效的page.json

Ⅴ-报错:typeError: Cannot read property 'mark' of undefined

Ⅵ-微信小程序中使用箭头函数导致this指向错误的问题

Ⅶ-警告: Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors

Ⅷ-解决flex布局中 space-between方法的排版问题