小程序
入门 qqq m18303051935@163.com qqqqqq
WePY腾讯团队推出的小程序组件化开发框架
mpvue框架
微信开发者工具:
其中app.js/app.json/app.wxss是必不可少的,是小程序生成的依赖文件
app.js监听并控制整个程序的生命周期,也是全局变量声明的地方,
apx是尺寸单位,跟px类似。
rem:规定屏幕宽度为20rem;
1rem=(750/20)rpx
<view></view>可看做为<div></div>
index.js文件
getApp():获取应用实例,
Page:声明页面
data:定义数据
bingViewTap:为在view中绑定的是tap事件定义操作方法
wx.navigateTo:导航到响应页面
onLoad:定义页面加载事件
快捷键:
+p 跳转文件
+e 最近文件
app.json
Pages 页面
Windows 设置导航条、状态栏、标题、窗口背景色
navigationBarBackgroundColor: 背景色
navigationBarTitleText: 标题
navigationBarTextStylke 标题颜色:只能白色和黑色
navigationStyle: 自定义导航条:default/custom
backgroundTextStyle:dark/light 下拉loading样式
backgroundColor: 背景色、需下拉刷新
enablePullDownRefresh:true 下拉刷新
tabBar 选项卡
wxml 骨架/页面:内置组件
组件两大类:
内置组件如、view,image
自定义组件、epsoide-cmp,like-cmp,img-btn-cmp,movie-cmp
代码规范:驼峰
flex布局
块级元素都是独占一行、如同div
.chunk{
/* 行内元素 */
/* display: inline-block; */
width:100px;
height:100px;
}
/* flex flexible box 弹性盒子 */
/* flex container 弹性容器
flex item 弹性容器子元素 */
.containe{ //把r去掉了。因不起作用
display: flex;
/* row column row-reverse column-reverse */
flex-direction: row;
height: 200px;
/* justify-content对齐方向 flex-start flex-end center space-between space-around 家思踢fi康疼他*/
justify-content:center;
/* 主轴justify-content和交叉轴align-items 啊立体爱他姆斯*/
align-items:baseline;
/* 屏幕宽度450px */
flex-wrap:wrap;
}
组件开发:创建组件-定义组件-引入组件
相对路径和绝对路径
flex rpx自适应
只有很少的全局样式,才能被组件继承
pages下页面是可以继承全局样式
组件最好不要留有空白间距
组件自适应宽度
组件事件:点击bing:tap="onLike",js中写
bind不会阻止冒泡事件向上冒泡,catch会阻止冒泡事件向上冒泡
数据来源的三种路径:wxml,js,服务器、js
数据绑定
三元表达式与图片切换
data可以{{}}显示,properties属性也可以{{}}:涉及到数据的封闭性和开放性:图片封闭,数字开放.
let含块级作用域、而var不是
调用RestAPI拿数据
pages->xxx.js:页面的声明周期函数
200 请求成功
201 创建成功
202 更新成功
204 删除成功
301 永久重定向
400 请求包含不支持参数
401 未授权
403 被禁止访问
404 请求资源不存在
413 上传的File体积太大
500 (服务)内部错误
wx.request(传Object):小程序只有异步加载,不可设置同步
url 开发者服务器地址
data 请求的参数
header 设置请求的header,header中不能设置Referer
method (需大写)OPTIONS/TRACE/CONNECT/GET/PUT/POST/DELETE
dataType 如果设为json,会对返回的数据做一次JSON.parse
responseType 设置响应的数据类型,合法值:text,arraybuffer
success 收到开发者服务成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数(成功或失败都会执行)
(项目设置大√设置不效验)上线后还是,必须在后台账号中添加小程序访问的域名
请求没添加Appkey,
funtion(){}和箭头函数的区别:箭头函数不会影响this传值、而 function(){}会影响
Promise解决的问题:异步嵌套、可以让我们使用return (点击事件切换心形、获取数据、config.js、http.js)(config->http.js->pages->xxx.js)
import和export只能用相对路径,而组件两者都支持
res.statusCode.toString()
9-6
models中继承了http->pages-xxx.js
/*app.js注意:有时新增组件或文件夹是这边会多出,有影响*/
谈论梦想的人很多,可为此默默付出的却是少数
attached:function(){}//声明周期函数
observer:function(){}//改变属性值时会触发
不要在observer中修改自身属性,在data中定义,!wxs是最适合的解决方式
组件里边css不允许使用#id选择器
小程序中继承组件机制:Behavior组件(属性或数据或方法)共用(复用js),//多继承,继承时子组件会覆盖父,(多个子继承时,选最后一个子覆盖父)
let classicBeh = Behavior({
属性
数据
方法
声明周期函数
...都有
})
export {classicBeh}
wx.setStorageSync("key","value")存入缓存
wx.getStorageSync()读取缓存
哪些内容是可以缓存的,哪些不应该缓存
单独获取点赞信息
1.console.log('${a}456')//模板字符串
//classic:res
2....res//扩展运算符
小程序中条件渲染是用在wxml,并不是用在js中
wx:if="{{}}"
hidden="{{}}"//标签的显示隐藏,默认自定义组件不起作用,需设置!
wxss=>@import="../common.wxss";共用(复用css)
wxml=>template模板 共用(复用html)
新版API,背景音频播放管理
wx.getBackgroundAudioManager()
属性
paused 播放状态
src 控制音乐播放,默认是空字符串,设置新src时会自动播放,
title 标题
方法
play 播放
pause 暂停
stop 停止
事件监听函数
onPlay 背景音频播放事件
onPause 背景音频暂停事件
onStop 背景音频停止事件
onEnded 背景音频自然播放结束事件
父子组件的通信,
1.wxml数据绑定:父组件向子组件的指定属性设置数据,
2.事件:子组件向父组件传递数据
组件与组件的通信
虽不能直接传递数据
能间接的传递数据,用pages作为父组件转发,在通过绑定到子组件
切换时,组件隐藏时暂停音乐。
hidden不会触发组件的detached//声明周期函数:切换时触发
wx:if和hidden的区别
hidden:只是简单的显示和隐藏。
wx:if:(切换)渲染条件时会执行完整声明周期
557581284纸短情长
287018 开始懂了
421423198谎话情歌
like.js=>like.wxml pages index.js=>index.wxml
http://music.163.com/song/media/outer/url?id=287018.mp3爬取歌曲
小程序要求上线时:服务器端提供的API都是Https的接口
加入缓存后对点赞心有影响,解决思路,哪些应该缓存
models->like.js/pages/index.js/index.wxml改过,未成功,注释了
-----
promise优点:多个异步等待合并
wx.getSystemInfo()//获取系统信息
promise.then()调用成功或失败的结果
request({url,data={},method='GET'})//解构
wx:key="id"
wx.navigateTo()//跳转页面 到书籍详情页
<slot>插槽:使组件更灵活,如tag中的标签/和搜索标签使可已体现出来。如果是空的不显示,
和属性properties相似:从外部向组件传递数据或标签
wxs:让wxml具备调用js