-----小程序笔记
逻辑层 (js)
生命周期
app.js
- onLounch(只调用一次) -> onShow -> 依次注册好各个页面组件
page.js
- onLoad(首页加载) -> onShow -> onReady
setData更改data值
- 用例:
//异步操作
this.setData({
// 数组或者对象的属性, 必须字符串才生效, 要不然直接报错
'object.text': '新值',
'array[0].text': '新值'
}, () => [
// 更新完数据的回调
])
导航
-
navigateTo 只能导航到本页面的子组件内
-
例子的完整路径:
pages/home/tip/tip
-
声明式:
<navigator open-type="navigateTo" url='tip/tip'> 跳转页面 </navigator>
-
编程式:
wx.navigateTo({ url: 'tip/tip'})
-
类似的有:
-
页面重定向:
wx.redirectTo
和<navigator open-type="redirectTo"/>
页面会销毁 -
页面返回:
wx.navigateBack
和<navigator open-type="navigateBack">
页面会销毁 -
tab栏切换
wx.switchTab
和<navigator open-type="switchTab"/>
-
重启本页面
wx.reLaunch
和<navigator open-type="reLaunch"/>
页面会销毁 -
Tip
-
navigateTo, redirectTo 只能打开非 tabBar 页面
-
switchTab 只能打开 tabBar 页面
-
reLaunch 可以打开任意页面
模块化
-
getApp()
获取全局的数据, 全局的数据可以在APP()
中设置 -
commonjs规范
-
导出: module.exports.sayHi = sayHi / exports.sayHi = sayHi
-
导入: var sayHi = require('sayHi')
API
- 事件监听 API:
wx.onSocketOpen(Fn)
回调函数, 返回值为回调函数的参数
wx.onSocketOpen(function (res) {
console.log(res.direction)
})
-
同步 API:
wx.setStorageSync
返回值是return出来, 有错会抛出 -
异步 API:
wx.login
接受参数
wx.login({
success(res) {
console.log(res.code)
},
fail() {
}
})
视图层
WXML
并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。
- 一般放在列表循环渲染中
<view> {{message}} </view>
数据绑定: -
Mustache 语法
-
组件属性(需要在双引号之内), boolean 也需要
"{{true}}"
-
花括号和引号之间如果有空格,将最终被解析成为字符串
-
拓展运算符
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: { a: 1, b: 2 },
obj2: { c: 3, d: 4 }
}
})
// 最后是 {a: 1, b: 2, c: 3, d: 4, e: 5}
<view wx:for="{{array}}" wx:for-index="idx" wx:key="idx"> {{item}} </view>
列表渲染: -
默认直接用index 和 item
-
别名: wx:for-index='idx' 就是把index改成了idx
-
wx:for="array" 遍历一个字符串, 解析出来 a, r, r, a, y
-
花括号和引号之间如果有空格,将最终被解析成为字符串
wx:for="{{array}} "
=>wx:for="{{array + ''}}"
-
key值的
*this
代表item本身当key值
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
条件渲染: - wx:if 和 wx:hidden 就相当于 v-if 和 v-show
模板
-
模板定义代码片段, 然后需要的地方引用, name属性代表模板
-
声明:
<template name="msgItem"><view>{{item}}</view></view></template>
-
引用: 使用is关键字data为数据:
<template is="msgItem" data="{{...item}}"/>
<view bindtap="add"> {{count}} </view>
事件: -
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡(catch事件单单只触发本身)
-
捕获
-
事件对象:
dataset: 里面可以以data-开头,多个单词由连字符-链接,不能有大写, 传递数据
引用
-
WXML 提供两种文件引用方式import和include 1. import
-
<import src="a.wxml"/>
-
import的作用域: 只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的 template
-
2. include
1. include 可以将目标文件除了 `<template/>` `<wxs/>` 外的整个代码引入,相当于是拷贝到 include 位置
WXSS
- rpx(responsive pixel): 可以根据屏幕宽度进行自适应, 如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素
iphone6 上才是二倍的换算
-
样式导入: @import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径
-
适配思路: rpx和px的抉择: font-size(px)
-
全局样式: 在app.wxss中定义, 组件有部分样式是不能继承全局样式: 比如font, color可以被继承, 其他不能9
`page{font-size: 24rpx}`, 因为小程序自动在每一页加page为最外层标签
WXS
- 例子
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view> {{m1.message}} </view>
-
概念: 编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内
-
wxml中引用: 引用.wxs的文件的相对路径
<wxs src="./../tools.wxs" module="tools" />
, 使用<view>{{tools.msg}}</view>
-
wxs中引用: 使用 require 函数
组件
内置组件
自定义组件
声明自定义组件
-
自定义组件放在components文件夹下 -> 创建的时候是创建的components而不是page -> 区别就是app.json中是找不到路径的 -> 否则引用组件时候是找不到的
-
wxss: 在组件wxss中
不应使用``ID选择器
、属性选择器
和标签名选择器
-
js:
-
Component构造器: 相当于页面的Page({})
-
properties => 相当于Vue的props => 调用
this.properties.xxx
-
-
wxml:
-
json:
"component": true
// 表示是组件
使用自定义组件的组件
- 在json文件中声明
{
"usingComponents": {
"你自定义的组件名": "组件的位置, 可以绝对路径也可以相对路径",
"component-tag-name": "path/to/the/custom/component"
}
}
- 使用: 直接使用json中命名的名称
组件的slot用法(多个slot看文档)
- 自定义组件
<view class="wrapper">
// 会把组件的子节点自动的填充在此地
<slot></slot>
</view>
- 引用组件的page
<w-navi>
<view>
我是子节点
</view>
</w-navi>
项目
父子组件通信(page监听component组件的事件)
-
父 -> 子 properties
-
子 -> 父: 通过事件
-
流程
子组件的点击 -> 知道喜欢或者不喜欢的状态 -> 再通过
this.triggerEvent('自定义事件名(like)', {需要传递的状态(like/cancel)}, {event冒泡捕获等})
-> 在父组件中bind:like="onLike"
-> 根据event对象里面的detail作为参数再去请求 -
意义: 子组件只负责视图渲染, 然后告诉父组件是喜欢还是取消喜欢
-
知识点: 自定义事件 和
this.triggerEvent('', {}, {})
激活自定义事件
组件间的通信(平级传值)
Component的 behavior
-
意义: 组件间需要复用的代码, 抽取到
behavior.js
文件中进行复用, 面向对象的继承, 多继承(组件可以继承多个) -
定义: 与Component的js定义完全一致(需要把Component -> Behavior)
<!-- behavior.js -->
let behavior = Behavior({
properties: {
},
data: {
},
methods: {
}
})
export { behavior }
- 引用:
<!-- Component.js -->
import { behavior } from 'behavior.js'
Component({
// 直接加behaviors, 就相当于继承了
behaviors: [behavior]
properties: {
},
})
- 覆盖规则: Component会覆盖behavior里面定义的相同
属性
, 而生命周期
会依次的执行, component最后执行
本地存储功能
-
存储: 同步
wx.setStorageSync('key', value)
, 异步wx.setStorage('key', value)
-
获取: 同步
wx.getStorageSync('key')
, 异步wx.getStorage('key')
小程序的缓存
-
根据期刊的不同生成不同key -> 点击下一期的时候, 判断是否有这个key -> 有就直接
wx.getStorageSync('key')
-> 没有就wx.setStorageSync('key', value)
-
导致的问题: 点赞数变化 -> 取到的还是
strorage
存储的数据 -> 把点赞抽取成为新的接口
wx:if 和 wx:hidden
-
wx:if: 惰性渲染
-
wx:hidden: 直接在组件标签上使用是没用的, 小程序默认hidden属性是你自身的定义的属性, 而不是小程序定义的hidden
-
解决: 页面中:
<组件 hidden="{{true}}" />
==>组件的Component中:
组件的Component中({ properties: hidde})
==>组件的wxml中:
<view hidde="{{hidden}}"></view>
-
播放音乐的Api
-
老版(一个一个api, 有bug)
-
新版(背景音乐播放管理)
-
let mMgr = wx.getBackgroundAudioManager()
返回对象 -
mMgr.pause()
, 直接会暂停 -
mMgr.src = src
, 更改src就会重新播放 -
mMgr.paused
, Boolean, 暂停是true
// 播放
mMgr.onPlay(() => {
this._recoverMusic()
})
// 暂停
mMgr.onPause(() => {
this._recoverMusic()
})
// 关闭
mMgr.onStop(() => {
this._recoverMusic()
})
// 播放完毕
mMgr.onEnded(() => {
this._recoverMusic()
})
页面跳转(点击 -> 书籍详情)
-
方案一: 组件中 组件内部
wx.navigateTo
实现页面跳转 -
方案二: page触发自定义事件,
<w-book bind:triggerEvent="onClick()">
-> 实现传值, 再调用wx.navigateTo
实现页面跳转