小程序

Posted 2021-01-12 Bk小凯笔记

 入门 qqq   [email protected]  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