微信小程序+uni-app知识点总结
微信小程序知识点合集
1. 小程序的优势和劣势有哪些？
优势：
（1）容易推广。在微信中，小程序拥有众多入口，例如附近的小程序、小程序码、分享、 发现-小程序等五十多个的入口，这些都有助于推广小程序；
（2）使用便捷。用户在使用小程序时，只需要轻轻点一下就可以使用；
（3）体验良好。小程序不会像H5页面一样经常出现卡顿、延时、加载慢、权限不足问题；
（4）成本更低，从开发成本到运营推广成本，小程序的花费仅为APP的十分之一。
劣势：
（1）单个包大小限制为2M，这导致无法开发大型的应用，采用分包最大是20M；
（2）需要像app一样审核上架，这点相对于H5的发布要麻烦一些；
（3）处处受微信限制。例如不能直接分享到朋友圈，涉及到积分，或者虚拟交易的时候，小程序也是不允许的。
2. 小程序中的生命周期函数有哪些？(需要把app，page和component三个构造器的声明周期函数写出来
app.js的生命周期
onLaunch: 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
onShow：当小程序启动，或从后台进入前台显示，会触发 onShow
onHide：当小程序从前台进入后台，会触发 onHide
onError：当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息。
page中的生命周期
onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady
onReady：生命周期函数--监听页面初次渲染完成
onShow：生命周期函数--监听页面显示，触发事件早于onReady
onHide：生命周期函数--监听页面隐藏
onUnload：生命周期函数--监听页面卸载
pa组件中的生命周期
created 监听页面加载
attached 监听页面显示
ready 监听页面初次渲染完成
moved 监听页面隐藏
detached 监听页面卸载
error 每当组件方法抛出错误时执行
3. 小程序中如何修改data上的数据？
在js文件中，this.data.变量修改，只可以修改逻辑层的数据，渲染层不会改变
用app实例的this.setData()方法修改data数据逻辑层和渲染层的数据都会更新
4. 提高微信小程序速度的方法
控制代码包的大小：
（1）代码包的体积压缩可以通过勾选开发者工具中“上传代码时，压缩代码”选项
（2）及时清理无用的代码和资源文件
（3）减少资源包中的图片等资源的数量和大小
分包加载,预加载：
将用户访问率高的页面放在主包里，将访问率低的页面放入子包里，按需加载；采用子包预加载技术，并不需要等到用户点击到子包页面后在下载子包
预请求：
请求可以在页面onLoad就加载，不需要等页面ready后在异步请求数据；尽量减少不必要的https请求，可使用 getStorageSync() 及 setStorageSync() 方法将数据存储在本地
避免不当的使用setData：
不要过于频繁调用setData，应考虑将多次setData合并成一次setData调用
使用自定义组件：
对于一些独立的模块我们尽可能抽离出来，这是因为自定义组件的更新并不会影响页面上其他元素的更新；各个组件也将具有各自独立的逻辑空间。每个组件都分别拥有自己的独立的数据、setData调用
5. 简述一下小程序中常见的界面跳转的方式，以及区别？
（1）标签式跳转：
（2）声明式跳转
wx.navigateTo
保留当前页面，只能打开非 tabBar 页面，返回时返回该页面
wx.redirectTo
关闭卸载当前页面，只能打开非 tabBar 页面
wx.switchTab
关闭所有非tabbar页面， 只能打开 tabBar 页面
wx.reLaunch
关闭卸载所有页面，可以打开任意页面
wx.navigateBack
返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返 回不去
navigator标签
navigator标签中加的url地址可以跳转到非tabBar页面
若要跳转到tabBar页面可以增加一个open-type='switchTab'则可以跳转到tabBar页 面，实质相当于wx.switchTab函数
6. 小程序中如何进行本地存储？
同步：
（1）存储：wx.setStorageSync('list', {age:5})
（2）获取：wx.getStorageSync('list')
异步：
（1）存储：wx.setStorage({
key:"key",
data:'value'
})
（2）获取：wx.getStorage({'key'})
7. 小程序中界面跳转如何传递参数？如何获取这些参数？
（1）路由跳转传参：路由跳转传参可以通过？的方式拼接参数。
wx.switchTab({
url: '../todolist/todolist?id=789',
})
//或者navigator标签
跳转到指定界面之后，可以在该页面的onLoad方法中的options参数（本身是个对 象）拿到路由跳转的参数。
onLoad(options) {
console.log(options);
}
（2）若要传递标签中的数据参数，可以自定义属性，在对应事件中通过e来获取该参数，再拼接到事件跳转的路径中
wxml中：
js中：
navigateTo(e){
console.log(e.target.dataset.num);
wx.navigateTo({
url: '/pages/detail/detail?id=999&num='+e.target.dataset.num,
})
}
8. 小程序中如何进行组件间传参？
小程序中父传子：
在父页面中：
{{msg}} 打印结果：
hello
小程序中子传父：
父页面：
9. 小程序中如何进行接口请求？会不会跨域，为什么？
wx.request
不会跨域
因为不是浏览器，没有同源策略
10. 怎么封装小程序的数据请求？
目的：
为了给所有的接口请求添加统一的配置，避免每次请求的时候指定配置
可以添加统一的请求拦截器和响应拦截器，在调用接口的时候做一些通用的处理
具体代码：
function request(options) {
// 请求拦截器
// ...
// 1. 加一些统一的参数，或者配置
if (!options.url.startsWith("https://") && !options.url.startsWith("http://")) {
options.url = "https://showme.myhope365.com" + options.url
}
// 默认的请求头
let header = {
"content-type": "application/x-www-form-urlencoded",
};
if (options.header) {
header = {
...header,
...options.header
}
}
return new Promise((reslove, reject) => {
// 调用接口
wx.request({
// 默认的配置
// 加载传入的配置
...options,
header,
success(res) {
// 响应拦截器，所有接口获取数据之前，都会先执行这里
// 1. 统一的错误处理
if (res.statusCode != 200) {
wx.showToast({
title: '服务器异常，请联系管理员',
})
}
reslove(res)
},
fail(err) {
reject(err)
}
})
})
}
export function get(url, options = {}) {
return request({
url,
...options
})
}
export function post(url, data, options = {}) {
return request({
url,
data,
method: "POST",
...options
})
}11. 怎么解决微信小程序的异步请求问题？
使用promise封装异步请求，统一化管理
直接在异步请求的回调函数中调用执行函数
多个异步请求可以使用$nextTick（）来判断是否执行完毕
12. 微信小程序常见的开放能力API有哪些
wx.request http请求
wx.getNetworkType 获取网络状态
wx.downloadFile 从网络上下载pdf文档
wx.openDocument 下载成功之后进行预览文档
wx.scanCode 扫码能力
wx.getUserInfo 用户头像，昵称
13. 谈谈对Behaviors的了解
behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 “mixins” 或 “traits”。每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior。
uni-app知识点合集
1. uniapp优缺点
优点：多端开发，一套代码可以生成ios、安卓、微信小程序、支付宝小程序等；
学习成本低，uniapp封装的组件与微信小程序相似，并且基于vue.js，上手快；
结合HBuilder开发速度快；
缺点：完善性较差，uni-app问世的时间还比较短，坑多。如果想要一个更稳定、坑更 少的开发环境，建议选择其他平台。
2. uni-app事件总线
事件总线可以作为组件沟通的桥梁，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件;
在uni中可以通过uni.$emit(eventName,OBJECT)来触发全局的自定事件;
通过uni.$on(eventName,callback)监听全局的自定义事件;
通过uni.$off([eventName, callback])移除全局自定义事件监听器。
注意事项：如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器；
提供的回调必须跟$on的回调为同一个才能移除这个回调的监听器；
3. uni-app中的本地存储数据和接收数据是什么
同步储存和读取
存储：
uni.setStorageSync('name','LZJAPYX,ZDL'); // name为键名 LZJAPYX,ZDL为键值
获取：
uni.getStorageSync('name') // 以健名取键值
删除：
uni.removeStorageSync('name') // 删除该键名的数据
异步存储和读取
存储：
uni.setStorage({
key: "name", // 键名
data: "LZJAPYX,ZDL" // 键值
});
获取：
uni.getStorage({
key: "name", // 键名
success(res){
console.log.(res.data) // LZJAPYX,ZDL
}
});
删除：
uni.reomveStorage({
key: "name", // 键名
success(res){
console.log.(res) // reomveStorage:ok
}
});
4. uni-app 路由与页面跳转
uni.navigateTo({url: "/路径?参数=参数值"});
uni.redirectTo({url: "/路径?参数=参数值"});
uni.reLaunch({url: "/路径?参数=参数值"});
uni.switchTab({url: "/路径?参数=参数值"});
uni.navigateBack({delta: 2});
uni.preloadPage({url: "/路径?参数=参数值"});
5. uni-app跨端适配—条件编译
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾
6. uni-app全局变量怎么定义，怎么获取
在app.js中设置globalData设置，在需要的地方的js文件let app=getApp() app.globalData.数据