说明

1. 本笔记为观看慕课网微信小程序入门与实战-全新版、尚硅谷2021版微信小程序开发（零基础小程序开发入门到精通）这两个教学视频、并参照 官方的微信开放文档 记录整理而成
2. 两个教学视频主要就是是面向初学者的教学视频,用的原生js进行讲解,门槛很低,所以该笔记会将基础部分也记录的较为详细,但有基础的朋友也可以同时当作梳理基础知识,学习过程肯定也会更清晰、同时也会有自己不一样的理解。对于笔记内容有疑问的欢迎提出讨论,望求同存异共同进步
3. 需要预备知识点-->[HTML+CSS+JS基础]
4. 本笔记应是小程序详细学习笔记,主要记录小程序基础知识
5. 部分知识点在官方文档很详细(如api部分),最好还是先看官方文档,本笔记主要就是记录 学习过程中出现的、需要增加的注解、文档中没有的细节、各种知识点的实际用法示例、遇到的问题解决记录等等等........

目录

目录

• 说明
• 目录
• 一、初识微信小程序
  • 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、双向绑定
    • Ⅰ-双向绑定语法
    • Ⅱ- setData-->数据更新
      • 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方法的排版问题

一、初识微信小程序

1、什么是微信小程序

Ⅰ-小程序历史

1. 2017 年度百度百科十大热词之一
2. 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小,下载速度很快,用户感觉不到下载的过程 )
3. 小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；
4. 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

Ⅱ-小程序的优势

1. 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
2. 推⼴app 或公众号的成本太⾼。
3. 开发适配成本低。
4. 容易⼩规模试错，然后快速迭代。
5. 跨平台。

2、小程序准备

Ⅰ-环境准备

1. 安装微信小程序开发工具,建议安装稳定版进行开发

2. 注册小程序账号

3. 使用注册的appid进行使用，如果是测试号会限制很多功能

在官网登录成功后可以看到下面的界面，然后复制你的APPID,悄悄的保存起来，不要给别⼈看到