① 能够知道如何安装和配置 vant-weapp 组件库 参考 Vant 的官方文档
② 能够知道如何使用 MobX 实现全局数据共享 安装包、创建 Store 、参考官方文档进行使用 ③ 能够知道如何对小程序的 API 进行 Promise 化 安装包、在 app.js 中进行配置
④能够知道如何实现自定义 tabBar 的效果 Vant 组件库 + 自定义组件 + 全局数据共享
① 能够知道如何实现页面之间的导航跳转 声明式导航、编程式导航
② 能够知道如何实现下拉刷新效果 enablePullDownRefresh 、 onPullDownRefresh
③ 能够知道如何实现上拉加载更多效果 onReachBottomDistance 、 onReachBottom
④ 能够知道小程序中常用的生命周期函数 应用生命周期函数： onLaunch , onShow , onHide 页面生命周期函数： onLoad , onShow , onReady , onHide , onUnloa
① 能够创建并引用组件: 全局引用、局部引用、 usingComponents
② 能够知道如何修改组件的样式隔离选项:
options -> styleIsolation （ isolated , apply-shared , shared ）
③ 能够知道如何定义和使用数据监听器: observers
④ 能够知道如何定义和使用纯数据字段: options -> pureDataPattern
⑤ 能够知道实现组件父子通信有哪3种方式:
属性绑定、事件绑定、 this.selectComponent (' id 或 class 选择器')
⑥ 能够知道如何定义和使用 behaviors:
调用 Behavior () 构造器方法
跨段兼容
在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。
条件编译
-
#ifdef：if defined 仅在某平台存在
-
#ifndef：if not defined 除了某平台均存在
-
%PLATFORM%：平台名称
-
条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用
// 注释、css 使用/* 注释 */、vue/nvue 模板里使用<!-- 注释 -->；
支付流程
调用 uni.requestPayment()发起支付
单例模式
登录流程
第三方SDK 腾讯云TIM即时通讯
小程序API
时间监听API 以on开头, 监听某些事件触发 wx.onWindowResize 监听窗口尺寸变化
同步API 以Sync结尾, 可以通过函数返回值直接获取, 执行出错会抛异常 , wx.setStorageSync 向本地存储中读写内容
异步API 请求函数, 通过success, fail, complete, wx.request发起网络数据请求, 通过success回调函数接收数据
编程式导航, 声明式导航
导航传参
url地址中携带查询参数, 在onLoad()事件中, 通过options 形参接收
修改数据this.setData({})
下拉刷新,上拉加载更多
组件生命周期
页面生命周期
onLoad
监听页面加载，
onShow
监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady
监听页面初次渲染完成。
onHide
监听页面隐藏
onResize
监听窗口尺寸变化
onPullDownRefresh
监听用户下拉动作，一般用于下拉刷新，
onReachBottom
页面滚动到底部的事件
onShareTimeline
监听用户点击右上角转发到朋友圈
应用生命周期
onLaunch
当uni-app 初始化完成时触发（全局只触发一次）
onShow
当 uni-app 启动，或从后台进入前台显示
onHide
当 uni-app 从前台进入后台
onError
当 uni-app 报错时触发
onUniNViewMessage
对 nvue 页面发送的数据进行监听，可参考 [nvue 向 vue 通讯
](uniapp.dcloud.io/tutorial/nv…)
onUnhandledRejection
对未处理的 Promise 拒绝事件监听函数（2.8.1+）
onPageNotFound
页面不存在监听函数
onThemeChange
监听系统主题变化
自定义组件
局部注册, 全局注册
组件样式隔离 尽量使用 class 选择器, 不要使用 id , 属性 ,标签属性
options配置
正则表达式, 指定所有_开头的数据字段为 pureDataPattern: /^_/,
纯数据字段 : 不用于界面渲染的data字段, 既不会展示到界面,也不会传递给其他组件 , 有助于提升页面更新的性能
在组件定义时的选项中启用多 slot支持 multipleSlots:true
组件插槽
组件通信 , 小程序组件中 properties 用来接收外界传递到组件中的数据 bind:自定义事件名
获取组件实例 , const child = this.selectComponent('id') 或者类名
自定义组件, behaviors 用于实现组件间代码共享, 可以包含一组属性,数据,生命周期函数, 和方法, 租金引用它时, 它的属性, 数据和方法都会合并到组件中
module.exports = Behavior({
// 属性节点 properties:{},
// 私有数据 data:{
beNumber:12,
obj:{name:'Behavior1'}
},
methods:{
addbeNumber(){
this.setData({
beNumber:this.data.beNumber +1
})
}
},
lifetimes:{}
})
const myBehavior = require('../../behaviors/my-behaviors')
Component({
behaviors:[myBehavior],
})
同名字段的覆盖和组合规则 : 组件和它引用的bahaviors 可以包含同名字段, 对象会进行合并,
组件 > 父behaviors > 子 behaviors
组件中的数据 data是更倾向于存储组件的私有数据, properties更倾向存储外界传递到组件中的数据, 他们都是可读可写的 ,指向同一个对象, 都可以用于页面渲染, 通过 this.setData({})为属性重新赋值
组件数据监听器 observers: // 监听对象的属性, 1.直接为对象赋值, 2. 为属性赋值 // 通配符方式, 监听对象中所有属性的变化
组件的生命周期 lifetimes 字段内声明, 推荐的方式, 优先级最高 , 新方式会覆盖旧方式
组件所在页面的生命周期 pageLifetimes 可以在组件内监听页面的事件
WX脚本
wxs 有自己的数据类型 number 数值类型、 string 字符串类型、 boolean 布尔类型、 object 对象类型、 function 函数类型、 array 数组类型、 date 日期类型、 regexp 正则
② wxs 不支持类似于 ES6 及以上的语法形式 不支持： let 、 const 、解构赋值、展开运算符、箭头函数、对象属性简写、etc... 支持： var 定义变量、普通 function 函数等类似于 ES5 的语法
③ wxs 遵循 CommonJS 规范 module 对象 require() 函数 module.exports 对象
wxs 典型的应用场景就是“过滤器”，经常配合 Mustache 语法进行使用，在 wxs 中定义的函数不能作为组件的事件回调函数。
隔离性: ① wxs 不能调用 js 中定义的函数 ② wxs 不能调用小程序提供的 API
性能: 在 iOS 设备上，小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍 在 Android 设备上，二者的运行效率无差异
1. 内嵌 wxs 脚本
<view>{{ m1.toUpper(username) }}</view>
<wxs module="m1">
module.exports.toUpper = function(str) {
return str.toUpperCase()
}
</wxs>
2.外联的 wxs 脚本
function toLower(str) {
return str.toLowerCase()
}
// 2.暴露成员
module.exports = {
toLower: toLower
}
!-- 1.使用外联式引入外部的wxs文件 -->
<wxs module="m2" src="../../utils/tools.wxs">
<view>{{ m2.toLower(country) }}
