【笔记-微信小程序】imooc-微信小程序入门与实践

第一章：什么是微信小程序

1-1 开篇及课程特色介绍

1、老师id:小楼昨夜又秋风：https://zhuanlan.zhihu.com/oldtimes ，
知乎id：七月在夏天。
2、实践式学习小程序开发：官方api文档

1-2 直观感受一下微信小程序

1、小程序的特点：
（1）小程序适合做简单的，用完即走的应用。
（2）小程序适合低频的引用。
（3）小程序适合性能要求不高的应用。
2、哪些类型的应用适合小程序：
（1）知乎-社区型应用，不适合用小程序。知乎会有消息推送，小程序不支持。
阅读类的，网页加载不适用小程序。
（2）斗鱼-不适用。小程序性能不够，小程序直接寄托于app，而不是原生系统。
（3）手游，阴阳师-不适用。小程序可以用休闲式游戏，不适合专业游戏。
（4）饿了么-适用。
（5）猫眼电影-适用。
（6）滴滴打车-适用。
（7）豆瓣-对于这种大型app，可以将部分功能移到小程序。
（8）美团。
（9）招商银行。
3、微信小程序不支持webview。

1-3 小程序适合做什么样的应用

1、什么是微信小程序：
（1）不需要下载安装及可使用。下载安装包-安装软件-使用。小程序允许的体积很小，安装速度很快，所以大家感觉不出来安装了，实际上是有安装过程的。
（2）用户“用完即走”，不用关心是否安装太多应用。
（3）应用将无处不在，随时可用。

1-4 对开发者的影响

1、小程序不可以使用现在已经存在的javascript组件库。小程序是数据优先的。
2、开发环境和开发逻辑及其简单，非常适合新手。

第2章 小程序环境大件与开发工具介绍

1、源文件树状管理器

2、debugger
断点调试F10: F10单步执行,不进入调用的其它函数, F11调试,单步执行,进入调用的其它函数
跳到下一个断点F8(没有的话,直接运行到结束)
3、清除数据缓存，清除的是appdata
清除文件缓存，清除的是文件的缓存。

第3章 从一个简单的“欢迎”页面开始小程序之旅

3-1、3-2 本章内容简介、官方种子项目介绍及小程序的文件结构

1、编写第一个小程序页面
（1）小程序文件类型与目录结构
（2）注册小程序页面，view、image、text等组件的基本用法。
（3）flex弹性盒子模型
（4）移动端分辨率及小程序自适应单位rpx

3-3、3-4 新建我们自己的项目：readerMovie、开始制作项目启动页

1、只有才能在小程序中长按选中
2、微信小程序的逻辑分辨率：px，物理分辨率：rpx

3-7、3-8 制作项目启动页（下）之小程序app.json基础配置

1、移动设备的分辨率与rpx
学习一定要掌握基础原理性的东西。
2、移动设备的分辨率与rpx

ppi=（320的平方+480的平方），开分号，除以3.5
逻辑分辨率pt，物理分辨率px。

3-9

1、pt也称为逻辑分辨率。
2、pt的大小和屏幕尺寸有关系，简单可以理解为长度和视觉单位。
3、px指物理分辨率，和屏幕尺寸没有关系。有几个物理点，但是不能说点有多长。
4、1个pt可以有1个px构成，也可以有2个，还可以是3个甚至更多。
5、iphone6下2个px才构成一个pt。
6、如何做不同分辨率设备的自适应。
（1）以iphone6的物理像素750*1334为视觉稿进行设计。
（2）iphone6以下1px=1rpx=0.5pt
（3）使用rpx，小程序会自动在不同的分辨率下进行转换，而使用px为单位不会。
7、iphone6下1px=1rpx;
iphone6plus下1px=0.6rpx

第4章 第二个页面：新闻阅读列表

4-1、4-2 第四章课程简介及小程序开发者后台简介

1、编写新闻阅读列表
（1）数据绑定（核心知识）
（2）数据绑定的运算及逻辑
（3）appData区域介绍
（4）事件与事件对象
（5）缓存
（6）列表渲染（核心知识）
（7）template模板的使用（核心知识）

4-5 构建新闻列表（下）

1、如果是控制元素水平方向上的间距，建议用rpx，如果是竖直方向上的间距，建议用px。具体情况具体分析。

4-6、4-7、4-8 js文件结构与page页面的声明周期（数据绑定）基础、（数据绑定）扩展

1、微信小程序：单向数据绑定，数据向wxml传递时，可以在js直接赋值，通过{{}}将数值传递到wxml。wxml数据改变时，js不会自动改变。

4-9 使用列表渲染wx-for改写新闻列表

1、文本绑定不需要加引号，属性绑定需要加引号
如下,src属性用“”，及“{{author_img}}”,text里的文本绑定不需要加引号，{{date}}

        {{date}}

4-10、4-11 小程序的事件机制（冒泡与非冒泡）（上）、小程序的事件机制（冒泡与非冒泡）（下）

1、wx.navigatorTo() 页面之间父级跳到子级
wx.redirectTo() 页面之间平行跳转
2、当页面被关闭和卸载的时候执行，onUnload()，当页面被隐藏的时候，执行onHide()
3、bindtap:冒泡事件，catchtap:捕获事件

第5章 小程序的模板化与模块化

5-01、5-02、5-03 将业务中的数据分离到单独的数据文件中、使用require方法加载js模块文件、template模块的使用

1、格式化代码样式快捷键：alt + shift + f。
2、小程序总是会读取data对象来做数据绑定，这个动作我们称为动作A，而这个动作A的执行，是在onload事件执行之后发生的。在onload里进行了异步操作，需要用this.setData（{postList:postsData.postList}）,而不能是直接写this.data.postList=postsData.postList.
3、template是一个模板，view，text叫组件。
如果以一个模板方式引入的话，脚本文件是无效的。

第06章 构建新闻详情页面

6-01、6-02、6-03 从文章列表跳转到新闻详情页面、先静后动，构建新闻详情页面样式、配置全局导航栏颜色

1、data={…item}相当于直接对数组对象进行平铺和展开，template在引用是可以不用{{item.title}}，而是直接用{{title}}。
2、只有连字符的第一个字母会是大写，其他的都是小写，data-postId-num，会变成postidNum，取值的时候dataset.postidNum，而不是postIdNum
3、前端开发，先静后动，先样式再数据。

6-04、6-05、6-06 使用数据填充新闻详情页面，缓存storage的基本用法，使用缓存实现文章收藏功能

1、微信小程序缓存的上限最大不能超过10M
2、缓存
（1）缓存的设置

//异步
 wx.setStorage({
	key: '',
 	data: '',
 });
 //同步
wx.setStorageSync('key', '头脑风暴');
wx.setStorageSync('key', {
	game: "风暴英雄",
	developer: "暴雪"
});

（2）缓存的取值，分同步异步

var game = wx.getStorageSync('key');

（3）缓存的清除，同样有同步和异步

wx.removeStorageSync('key');
wx.clearStorageSync();//清除所有缓存

6-07、6-08、6-09 交互反馈，操作反馈，交互反馈

1、showToast():自动消失
showModal()：不会自动消失
2、this指的是函数调用的上下文环境
3、收藏是一件成本较低的事件，不需要用wx.showModal()，可以用showToast;
4、小程序不具有媒体性质，现在无法实现分享功能。(后来版本更新，可以分享了)
5、微信开发者工具放大字体：鼠标滚轮，不能用键盘放大。

6-10、6-11、6-12 同步异步方法对比、playBackgroundAudio音乐播放基本实现、加入不同的音乐，个性化音乐播放

6-13、6-14 监听播放事件完善音乐播放、应用程序生命周期*

1.由框架调用自己的代码，在node.js中大量使用。
事件驱动思想。
node.js、angular.js
（1）angularJs两个模块之间的参数传递：①services。②事件驱动的方式传参，比较提倡。a模块发送一个事件，b模块接收。
2、数据绑定利于单元测试，jquery不利于单元测试。jquery对ui的限制比较高。
3、学的东西不再多而在于精。

6-15、6-16、6-17 继续完善音乐播放、音乐播放最终章、真机如何清楚缓存与template内路问题*

1、template里的相对路径要改成绝对路径，以适用于不同路径的页面。

第7章 开始制作电影资讯页面

7-01 banner轮播图跳转文章详情*

1、target指的是当前点击的组件，currentTarget指的是事件捕获的组件
2、练习：①banner用template实现。②自己的查看数view用缓存写，查看一次数值+1。

7-02、7-03 补充内容：tab选项卡课前准备，给项目加入tab选项卡

1、把页面放到app.json的list下面，才会有tabbar

7-04、7-05、7-06 完善tab选项卡、补充：为什么redirectTo不出现选项卡、电影页面嵌套template分析

1、如果有tabbar，则点击事件不能是跳到tabbar的某一个。即如果能通过tabbar跳过去的页面，就不通过navigateTo()跳转。
2、小程序新建文件：4个配套的wxml,wxss,js,json，在app.json中写好路径，就会自动建立相应的文件。

7-07 3个嵌套template标签实现

1、快速搜索豆瓣的电影信息：
百度搜索“豆瓣api”，下拉选择“电影api”，点击进去后选择电影条目信息，“Required Scope”是“movie_basic_r”的是能用的，如果是“movie_advance_r”就是不能用的。

7-08 stars template的样式实现

1、movie里引用movie-list，可以直接引用movie-list，而不需要去关注movie-list的细节，所以movie-list引用moive,movie引用stars，而不是movie直接引用movie-list,movie,stars。
2、完成一个项目，和写好一个项目还是有很大区别的。最重要的是思路。

7-09、7-10 movie template的样式实现、movie-list template的样式实现

1、如果用了display:flex，则vertical-align:middle；就不起作用了。

7-11、RESTful api简介及调用豆瓣api

1、RESTful api:
（1）微博开放平台：http://open.weibo.com/wiki/首页
①可以用RESTful api获取数据，也可以获取html，可以获取很多种数据类型的数据。
②RESTful 的特点：接口的url可以自描述，不需要接口说明文档。
（3）github
2、（1）返回400，请求已经成功，返回了object，走的是success。返回400，是因为没有写header。
400表示参数错误。
（2）网断了，请求超时了，会走fail函数。
3、（1）学习的方法：多试。
（2）不要放过一些细节，这样才能构建自己的知识树。

7-12 获取正在热映，即将上映和top250的数据

1、快捷键
（1）command+shift+f：全局搜索
（2）command+p：①面板中是打开指定文件。②控制台输入也是打开指定文件。
2、java是强语言类型，在编译阶段就能指出错误。
3、异步，返回的数据不一定是页面方法执行的顺序。正在热映，top250等获取到的先后顺序不一定。

7-13 电影页面数据绑定（上）*

1、编写template时自下而上，数据传递时自上而下。

7-15 星星评分组件的实现

1、如果movies.js不写

data: {
 inTheaters: {},
 comingSoon: {},
 top250: {}
 },

而数据加载是异步的，不写就会{{inTheaters}}取值取不到，会报错。

第08章 更多电影及电影搜索页面的实现

8-01 更多电影页面的编写思路

1、页面之间传值方式：
①url（推荐）：more-movie/more-movie？category=category
②全局
③缓存：sessionStorage
④类似于angularJs的发射事件，接收事件方式

8-02 动态设置导航栏标题

1、onLoad:生命周期函数–监听页面加载(页面初始化，页面还没有生成)
2、onReady:生命周期函数–监听页面初次渲染完成
3、onShow:生命周期函数–监听页面显示
显示onLoad，然后是onShow，再是onReady.
4、

wx.setNavigationBarTitle({
			title: '',
			success: function (res) {

			}
		})

这句需要放在onReady或onReady后的函数中执行

8-04 实现movie-grid template

1、flex布局对scroll-view标签是无效的

8-05 实现上滑加载更多数据

1、api文档是供大家来查阅的，不是供大家来学习的。

8-06、8-07 设置loading状态，实现下拉刷新数据

1、方法越小越灵活，可以减少很多重复代码。
2、scroll-view不支持下拉刷新，需要更改代码。

8-08 backgroundColor

1、winodow的backgroundColor是下拉刷新后的背景色。
2、基于java的搜索框架：分布式搜索引擎 ElasticSearch
官网：http://www.elasticsearch.org/
ElasticSearch就是一款基于Lucene框架的分布式搜索引擎，并且也是一款为数不多的基于JSON进行索引的搜索引擎。ElasticSearch特别适合在云计算平台上使用。
3、vsCode编辑器和微信小程序编辑器很像，可以用vsCode编写小程序代码（都可以将小程序代码部署到自己的程序）

第9章 构建电影详情页面

9-01、9-02 电影搜索页面构建（上），电影搜索页面构建（下）

1、122100版本开始，新增bindconfirm事件，专门用来响应键盘的“完成”按键，建议此处使用“onconfirm”.
2、如果是一个好的前端，是会非常注重细节的，1px，bindChange，bindBlur等的区别，这些都会影响到代码的bug。

9-03、9-04、9-05 tabbar的图片路径不要使用绝对路径、修复音乐播放完成后图标状态、编写电影详情页面（上）

1、app.json里的list里的图片路径不要用绝对路径，将最前面的“/”去掉就行了。早期版本如果是绝对路径，发布预览时会出现错误：缺少文件：错误信息：error:iconPath=/images/tab/yuedu,file not found，我在写项目时发现绝对路径也能预览了。
2、bindconfirm不能写成“bindConfirm",这样写会使事件失效。
3、小程序电影播放，停止时图标未停止。如果小程序突然发现bug，先看官网是否有可以解决的api。

9-07 图片的缩放与裁剪

1、只有定高或定宽，裁剪才是有意义的。

9-08、9-09 新版本更新后的补充章节、编写电影详情页面骨架

1、纵使秋风起，人生不言弃。
2、编程是一件很有创造力的事情。

9-10 完成电影详情页面（上）

1、vsCode支持wxss，能够高亮显示步骤：
①找到vsCode安装目录。②resources-app-extensions-css-package.json-extinsions，加上wxss。
2、实现模糊效果时，要尽量颜色少一点，所以取图片的一部分，保持较为单一的颜色，然后进行模糊。
3、图片裁剪或者缩放，只能使用一种。
4、webstorm中，选中代码，按住command+shift+l，直接跳转到safari进行搜索。

第10章 form表单类组件与map地图组件*

10-01 form之switch组件

1、switch的开关：checked="{{false}}"
取值：event.detail.value;

10-02、10-03、10-04、10-05 form之slider组件、form之radio组件、form之checkbox组件、form表单提交*

1、slider的min,max,step。
2、checkbox选中的值得到的是个数组（event.detail.value）
3、表单一次性获取所有的值，
4、传统html的值的传输
（1）js/jquery获取dom节点的value的值，然后拼成js对象
（2）form表单
5、小程序
form包裹代码，提交时获取所有的表单元素的值。

6、提高效率最重要。
7、能解决问题，就是一个好的技术。

10-06 map组件

1、pc模拟机上很多功能都看不了，要在真机上看。
2、wx.openLocation({})能打开微信的内置地图。
3、地图框架（开源框架）推荐看一下：openlayers，将javascript的面向对象做到了极致。openlayers1推荐看，完全没有使用其他库，不依赖其他框架，全都是纯javascript。

第11章 小程序常见问题与es6

11-01 小程序常见问题

1、养成自己发现问题，解决问题的习惯。
2、wx.switchTab只能跳转到带tab的页面。
3、下拉加载，上滑加载更多。不用scroll-view，用view，就能用下拉刷新，利用微信提供的onReachBottom事件来实现上滑加载更多。

11-02 小程序中的es6 class

1、es6中重要的部分：class, module , promise, =>（箭头函数）

11-03 使用Module和class提取封装一个Movie对象

1、class类命名：java,c#强调一个文件放一个类。函数式脚本语言:python，js，的class类是作为一个module（模块）出现的。

11-04 箭头函数、致谢与再见

1、this的调用与函数的上下文环境相关。
2、箭头函数=>让this的环境为当前定义函数的环境，而不是调用方的环境。
3、C#、Python、Java：lambda