本笔记是小程序学习笔记,主要记录小程序の基础知识
说明
- 本笔记为观看慕课网微信小程序入门与实战-全新版、尚硅谷2021版微信小程序开发（零基础小程序开发入门到精通）这两个教学视频、并参照 官方的微信开放文档 记录整理而成
- 两个教学视频主要就是是
面向初学者的教学视频,用的原生js进行讲解,门槛很低,所以该笔记会将基础部分也记录的较为详细,但有基础的朋友也可以同时当作梳理基础知识,学习过程肯定也会更清晰、同时也会有自己不一样的理解。对于笔记内容有疑问的欢迎提出讨论,望求同存异共同进步- 需要预备知识点-->[
HTML+CSS+JS基础]- 本笔记应是
小程序详细学习笔记,主要记录小程序基础知识- 部分知识点在官方文档很详细(如
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、什么是微信小程序
Ⅰ-小程序历史
- 2017 年度百度百科十大热词之一
- 微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用 (
张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小,下载速度很快,用户感觉不到下载的过程)- 小程序刚发布的时候要求压缩包的体积不能大于 1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；
- 2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。
Ⅱ-小程序的优势
- 微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾；
- 推⼴app 或公众号的成本太⾼。
- 开发适配成本低。
- 容易⼩规模试错，然后快速迭代。
- 跨平台。
2、小程序准备
Ⅰ-环境准备
- 安装微信小程序开发工具,建议安装稳定版进行开发
- 注册小程序账号
- 使用注册的appid进行使用，如果是测试号会限制很多功能
在官网登录成功后可以看到下面的界面，然后复制你的APPID,悄悄的保存起来，不要给别⼈看到标签：微信,程序,笔记,事件,完结,组件,页面,data,wx From： https://blog.51cto.com/echohye/6942306