- 项目介绍
- 一.什么是微信小程序
- 二.小程序环境搭建与开发工具介绍
- 三.从一个简单的”欢迎”页面开始小程序之旅
- 四.第二个页面:新闻阅读列表
- 4-1 第四章课程简介 (04:52)
- 4-2 使用Swiper组件构建轮播图 (19:53)
- 4-3 Swiper组件属性设置 (11:31)
- 4-4 全局配置与页面配置 (11:48)
- 4-5 构建新闻列表（上） (13:55)
- 4-6 构建新闻列表（下） (24:01)
- 4-7 JS与小程序Page页面生命周期 (16:52)
- 4-8 数据绑定概念和基础 (13:09)(核心)
- 4-9 setData方法绑定数据 (06:39)
- 4-10 数据绑定的扩展用法 (12:08)
- 4-11 条件渲染与列表渲染 (26:34)
- 4-12 小程序的事件机制——捕捉与回调 (17:09)
- 4-13 小程序的事件机制——catch与bind (09:01)
- 五.小程序的模板化与模块化
- 六.构建新闻详情页面
- 6-1 从文章列表跳转到新闻详情页面（组件自定义属性及获取属性） (22:30)
- 6-2 先静后动，构建新闻详情页面样式 (22:53)
- 6-3 配置全局导航栏颜色 (07:11)
- 6-4 使用数据填充新闻详情页面 (19:14)
- 6-5 缓存Storage的基本用法 (12:32)
- 6-6 文章缓存出错修复方案 (03:09)
- 6-7 使用缓存实现文章收藏功能 (21:39)
- 6-8 交互反馈 wx.showToast (11:04)
- 6-9 操作反馈wx.showModal (17:31)
- 6-10 交互反馈wx.showActionSheet (11:48)
- 6-11 同步异步方法对比 (12:31)
- 6-12 playBackgroundAudio-音乐播放基本实现 (23:36)
- 6-13 加入不同的音乐，个性化音乐播放 (08:03)
- 6-14 修复音乐播放闪退的问题 (02:13)
- 6-15 监听播放事件完善音乐播放 (10:27)
- 6-16 应用程序生命周期 (12:57)
- 6-17 继续完善音乐播放 (06:48)
- 6-18 音乐播放最终章 (11:55)
- 6-19 真机如何清除缓存与template内路径问题 (09:10)
- 七.开始制作电影资讯页面
- 7-1 重要补充说明（关于API调用403） (09:00)
- 7-2 Banner轮播图跳转文章详情 (20:13)
- 7-3 三种主要的路由API (02:22)
- 7-4 给项目加入tab选项卡 (10:52)
- 7-5 完善tab选项卡 (08:50)
- 7-6 电影页面嵌套template分析 (11:21)
- 7-7 3个嵌套template标签的实现 (22:48)
- 7-8 stars template的样式实现 (14:55)
- 7-9 movie template的样式实现 (04:09)
- 7-10 movie-list template的样式实现 (17:14)
- 7-11 RESTful API简介及调用豆瓣API (25:42)
- 7-12 获取正在热映、即将上映和Top250的数据 (15:45)
- 7-13 电影页面数据绑定（上） (20:29)
- 7-14 电影页面数据绑定（下） (13:04)
- 7-15 星星评分组件的实现 (17:45)
- 7-16 更换电影分类标题 (05:38)
- 八.更多电影及电影搜索页面的实现
- 九.构建电影详情页面
- 十.Form表单类组件与Map地图组件
- 十一.扩展内容ES6在小程序的使用与微信小程序后台账号配置
- 十二.0.15.152900版本重要API、功能讲解
- 十三.《纯正商业应用-微信小程序实战》进阶教程多章节试看1
- 十四.《纯正商业应用-微信小程序实战》进阶教程多章节试看1
微信小程序入门与实战 常用组件API开发技巧项目实战
项目介绍
- 项目名称:电影小程序
- 成果:新闻阅读列表,新闻详情页,电影资讯,更多电影及电影搜索,form表单组件,map地图组件
- 开发周期:2019/10/24-2019/10/30
- 收获:学会了小程序目录结构,项目编写流程
一.什么是微信小程序
1-1 序：十几个小时的课程就这节最重要 (05:47)
1-2 升级重录说明（重要） (08:06)
- 微信小游戏是特殊的小程序(API不一样)
- Component自定义组件
- npm的支持:安装包和插件
1-3 开篇及课程特色介绍 (17:16)
1-4 直观感受一下微信小程序 (13:47)
- 特别小,感觉不到安装过程
- 用完即走
- 无处不在
- 流程简单
- 跨平台
1-5 小程序适合做什么样的应用 (11:40)
- 业务逻辑简单
- 使用频率低
- 性能要求不高
1-6 对开发者的影响 (04:34)
- JavaScript
- 没有dom
- 不可以用js组件库
1-7 学习基础 (02:32)
- JS(ES6)
- CSS(flex布局)
1-8 新版开发工具UI说明 (01:50)
1-9 新版小程序务必勾选“不校验TLS、HTTPS” (02:07)
- 勾选不校验合法域名
二.小程序环境搭建与开发工具介绍
2-1 小程序进阶——新课程指南 (07:52)
2-2 申请appid (04:05)
2-3 下载并安装微信开发者工具 (13:51)
2-4 微信开发工具UI简介与小程序调试方法 (18:14)
- TypeScript兼容性更好,更适合维护和管理
- page = js + json + wxml + wxss
- 在代码区域按
F1查看快捷键 - 调试
(1)加注释,console.log()打印调试
(2)断点调试:打开调试器->Sources->app.js?[sm]->选中一行在开头左键代码执行到这行就停了->鼠标悬停 - 调试器
(1)Network是用来监听小程序发向外部的http请求的
(2)Storage是用来观察小程序的缓存情况的
(3)Appdata和Wxml
三.从一个简单的”欢迎”页面开始小程序之旅
3-1 本章内容简介 (01:38)
3-2 官方种子项目与小程序页面 (10:24)
- pages:存放页面
- wxml(html/htm):骨架
- wxss(css):样式
- js:逻辑
- json:配置(可没有)
3-3 应用程序级别文件 (08:46)
- 就近原则:页面级别比应用程序级别高
- project.config.json:项目配置文件,自动生成,不重要,也别改,你在某一台电脑上对项目的一些设置想放到其他电脑上去可以把它拷过去
3-4 小程序的页面层级结构 (08:12)
- logs页面是index页面的子页面
- 小程序页面最多十层,最好不要超过5层
- 整个小程序所有分包不超过8M,单个分包/主包大小不能超过8M
3-5 新建welcome欢迎页面 (06:24)
- 新建page自动建4个页面,报错时新建page无效
3-6 我的第一个页面 (13:13)
3-7 认识小程序的rpx (17:40)
view->div容器 分隔文档- 文本放到
<text></text>组件中 - 按钮不建议用
<button></button>,最好外面用一层<view></view>里面一层<text></text> image图片不设置样式,默认是width:300px;height:225px;- 小程序中除了文本节点以外其他节点都无法长按选中
- 小程序规定了全新的尺寸单位”rpx”,其原理是无视设备原先的尺寸,统一规定屏幕宽度为750rpx
3-8 使用flex（弹性盒子）快速布局 (13:35)
3-9 制作项目启动页之小程序app.json基础配置 (09:43)
- 全局样式放到外层的app.wxss里
- 会flex优先用flex布局
- 顶部导航栏颜色在
app.json里的window对应的值里配置navigationBarBackgroundColor text组件里\n是换行符
3-10 章节扩展（可选观看1）移动端分辨率精讲 (16:44)
- pt:逻辑分辨率,长度和视觉单位,只和屏幕尺寸有关系
- px:物理分辨率,像素点,和屏幕尺寸无关
- Reader=px/pt,比越高越好
- PPI(DPI)=(长px * 高px)的平方开根号/屏幕尺寸
- 屏幕尺寸指的是对角线
3-11 章节扩展（可选观看2）小程序的自适应单位RPX精讲 (15:27)
- iPhone6: 1px = 1rpx = 0.5pt
- 以iPhone6的物理像素750X1334为视觉稿进行设计,而在小程序中使用rpx为单位
- 使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会
- 不是所有的单位都适合用rpx
四.第二个页面:新闻阅读列表
4-1 第四章课程简介 (04:52)
4-2 使用Swiper组件构建轮播图 (19:53)
- 外面一层
<swiper></swiper>,里面3个<swiper-item></swiper-item> - 快捷键:在小程序中按
F1 - 子容器设置高度要先在父容器(swiper)中设置(在swiper-item中设置无效,它宽高自动100%)
- 滑动效果优先考虑使用swiper组件
4-3 Swiper组件属性设置 (11:31)
- 看文档swiper,看不懂就试
- 没有什么特殊需求,一般不用改变默认值
4-4 全局配置与页面配置 (11:48)
- 几个页面颜色不同,把颜色多的设置到全局中(window的子属性),其他的单独页面设置json文件(直接写,页面配置只能配置全局配置中的window的部分属性)
- 对导航栏进行配置是在页面json文件里的window属性里
4-5 构建新闻列表（上） (13:55)
- 不要看到什么写什么,要从整体上思考
- 多个元素用view包裹起来
- 绝对路径是从根目录往下找,相对路径是以当前位置为起点
- import导入一个模块不能用绝对路径,只能用相对路径,否则报错
4-6 构建新闻列表（下） (24:01)
- 垂直居中
(1)vertical-align: middle;(不好用)
(2)弹性盒子(推荐)
display: flex;
flex-direction: row;
align-items: center; - 希望在任何机型上运行效果一样用px,不一样用rpx
- 做水平间距一般用rpx,不用px(否则如果机型差太多容易出现换行),垂直间距一般用px
- 通常标题黑色都用
#333,正文黑色用#666 - 行内元素不设置自动一行
4-7 JS与小程序Page页面生命周期 (16:52)
- js从服务器获取数据
- js文件里的Page是个函数,()里参数,{}里包裹了一个JavaScript对象作为Page函数的参数传递到函数中去
- data存放页面的初始数据
- onLoad监听页面加载的(页面初始化的时候执行)
- onReady监听页面初次渲染完成
- onShow监听页面显示
- onHide监听页面隐藏
- onUnload监听页面卸载
- 生命周期函数是放在Page函数里,描述页面的生命周期onload -> onshow -> onready
- onPullDownRefresh页面相关事件处理函数:监听用户下拉动作
- onReachBottom页面上拉触底事件的处理函数
- onShareAppMessage用户点击右上角分享
4-8 数据绑定概念和基础 (13:09)(核心)
- 如何把posts.js文件中的数据传递到wxml文件中(网页dom优先)
(1)声明一个变量
(2)获取页面的节点document.getElementById()
(3)通过dom节点.text=变量把数据从js中传递到页面中 - 小程序不能操作dom要通过数据绑定(数据优先)
(1)在js文件里的data中写入数据即可
(2)用{ {变量名} }调用 - 单向数据绑定:js里的数据可以传递到wxml里边,但是改变wxml里面的值,js里不会
自动更新(更简单,小程序只能做单向数据绑定) - 双向数据绑定:改变页面里的值js里也跟着改变(更方便,性能差)
4-9 setData方法绑定数据 (06:39)
- 从服务器加载数据的代码一般卸载onLoad函数里
- 只有在data里的数据才能进行数据绑定,可以用
this.setData()方法把从服务器中加载来的数据拷贝到data中
4-10 数据绑定的扩展用法 (12:08)
vertical='false'轮播垂直播放,vertical='{ {false} }'轮播水平播放,直接写false表示非空字符串,是true- onLoad中的数据如果是多层的,绑定的时候用{ {外层变量名.内层变量名} }
- { {} }里还可以运算
4-11 条件渲染与列表渲染 (26:34)
- wx:if=”{ {text_condition} }”条件渲染指令
(1)控制元素的显示和隐藏
(2)text_condition值为true或false - wx:for列表渲染指令(相同元素又不知道几个)
(1)在onLoad中以数组的形式写数据
(2)在wxml中要循环的内容外层加个<block wx:for="{ {posts_key} }" wx:for-item="item"></block>
(3)调用的时候用item.变量名
(4)定义一个JavaScript对象为this.setData({posts_key:posts_content}),posts_key是data中的键,posts_content对应的数组作为data中的值
(5)setData()括号里面一定得是个JavaScript对象
(6)ES6中可以写this.setData({posts_content})(相当于{posts_content:posts_content}),for后面也对应改成posts_content
(7)wx:for-index=”“引号里面默认是index,对应的序号是0
(8)使用wx:for会提醒注意,不是报错,加一个wx:key="1"就好了
4-12 小程序的事件机制——捕捉与回调 (17:09)
- 处理用户的交互,会用到事件机制:小程序产生一种用户交互的事件,小程序里捕捉这个事件(回调函数名),捕捉到这个事件后处理这个事件
bind:tap="回调函数"(冒号可省略)- 一般回调函数都以on开头加单词首字母大写,如onTap
- 回调函数写在js文件的Page里
- 跳转页面
(1)wx.navigateTo({url:'相对路径'})有返回按钮,执行的是onHide
(2)wx.redirectTo({url:'相对路径'})没有返回按钮,执行的是onUnload - 以
wx.开头的都是小程序内置好的api - 小程序主要就是学组件和api
- success,fail和complete回调函数很常用
4-13 小程序的事件机制——catch与bind (09:01)
- 捕捉事件可以用bind和catch
- 在wxml文件中定义回调函数,js文件中必须要有同名的函数
- 点击子元素,父元素也会监听到从而产生响应就叫冒泡(bind)
- catch(不冒泡)(很少用)
五.小程序的模板化与模块化
5-1 将业务中的数据分离到单独的数据文件中 (11:58)
alt+shift+F格式化代码(只格式化脚本文件)- 新建个文件夹叫data,新建一个post-data.js文件,把post.js文件中的data内容复制到单独的文件中去,改名为local_database(这些数据其实都应该是从服务器中获取到的,这就是假装是个本地的数据库)
5-2 使用require方法加载js模块儿文件 (06:56)
- 给post-data.js这个脚本文件定义一个出口
module.exports = {
postList: Local_database
}
可以让这个文件中的数据可以输送到别的脚本文件中去 - 在其他的脚本文件中引入数据文件
(1)在post.js文件中定义一个变量接收var postDate = require('../../data/posts-data.js')(引入脚本文件只能用相对路径)
(2)修改this.setData({posts_key:postData.postsList})
(3)把data大括号里的内容删除
5-3 template模板的使用 (16:48)(最能体现编程的复用思想)
- wx:for只能循环单个页面里的一段内容,若想跨几个页面都使用这样一段内容需要使用template这个模板化的技术
- 在posts文件夹下新建一个post-item文件夹,建一个post-item-template.wxml文件和一个post-item-template.wxss作为模板
- 凡是模板文件建议在文件名后面带一个template以便区分
- 小程序的template只提供模板化的技术,没有提供模块化技术,在这里加js文件不执行(脚本文件无效)
- 模板文件的标签是
<template></template> - 在post.wxml文件中导入模板文件
<import src="post-item/post-item-template.wxml" />(引入模板也可以用绝对路径,但推荐相对路径) - 把wx:for里面的代码剪切到模板文件中
- 在wx:for里面引入方法传入数据
<template is="postitem" data="{ {item} }"/> - 把模板相关的样式剪切到模板.wxss文件中,在post.wxss文件中导入模板样式
@import "post-item/post-item-template.wxss"; - 由于template模板不支持脚本文件,所以有关模板的js代码只能放到引用文件的脚本文件(post.js)中
5-4 关于新版自定义组件的说明 (04:11)
- 自定义组件就是小程序给出的模块化编程的方案(复用js)
- 入门者用template模板,有模块化思维页面复杂用自定义组件
六.构建新闻详情页面
6-1 从文章列表跳转到新闻详情页面（组件自定义属性及获取属性） (22:30)
- 把post-item-template.wxml文件中用于绑定数据的item去掉，在post.wxml文件中传入数据时的item前加上
... - 之前一段数据是一个对象,遍历里面的数据需要用
数据对象.变量名,加上...就相当于把数据对象平铺出来的,调用的时候就不用item.了 - 在组件的属性列表里写
data-自定义单词的属性称为自定义属性 - 自定义属性:必须以data开头,由若干个
-连接若干个自定义单词(一般小写) - 获取postid:在post.js里的onPostTap里写
var postid = event.currentTarget.dataset.postid; - event是事件给你的事件对象,currentTarget表示当前鼠标点击的组件(view),dataset是所有自定义数据的集合
- 自定义属性中的data和连字符会被去掉,自动转换成驼峰命名法,如:
data-post-name-id会转换成postNameId - 自定义属性中只有连字符的第一个字母可以大写,否则会自动转为小写,如:
data-postId转为postid - 页面跳转用相对路径更简洁
- 报错
app.json中未配置当前页面:每加一个页面就要在app.json里配置路径(就像配置环境变量似的) - 报错
Expecting 'STRING','NUMBER','NULL','TRUE','FALSE','{','[',got EOF | ^:在post-detail.json里加一对空的大括号 - 报错
出现脚本错误或未正确调用Page():post-detail.js文件里没写Page({ })
6-2 先静后动，构建新闻详情页面样式 (22:53)
- 前端编码原则:先静后动,先样式后数据
- 页面字体大小一般24rpx
6-3 配置全局导航栏颜色 (07:11)
6-4 使用数据填充新闻详情页面 (19:14)
- 传递参数
url:"post-detail/post-detail?id=" + postId - 在post-detail.js里接收参数
Page({ onLoad:function(option){ var postId = option.id; } }) - 引入数据文件
var postsData = require('../../../data/posts-data.js') - 数据绑定
this.data.postData = postData; - 调试代码:在APPData里记录所有数据绑定相关的东西
- 如果在onLoad方法中,不是异步的去执行一个数据绑定,则不需要使用this.data赋值即可实现数据绑定
- 以后涉及到数据绑定的都用setData方法:
this.setData({ postData:postData })
6-5 缓存Storage的基本用法 (12:32)
- setStorageSync(‘键’,Object/String)同步的方法,setStorage异步的方法
- 用户不主动清缓存,缓存就一直在
- 好习惯:即使不用框架格式里的event参数,但是凡是在时间响应函数里面都加上event参数
- 涉及缓存的一般用同步
- 缓存的上限最大不能超过10MB