第一章:什么是微信小程序
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}}
<image class="post-author" src="{{author_img}}"></image>
<text class="post-date">{{date}}</text>
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包裹代码,提交时获取所有的表单元素的值。
<form catchsubmit="formSubmit" catchreset="formReset">
<view class="btn-area"><button formType="submit"></button><button formType="reset"></button></view>
</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