微信小程序+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标签

<navigator url="../detail/detail?id=666">带参数去detail</navigator>

跳转到指定界面之后，可以在该页面的onLoad方法中的options参数（本身是个对 象）拿到路由跳转的参数。

onLoad(options) {

console.log(options);

}

（2）若要传递标签中的数据参数，可以自定义属性，在对应事件中通过e来获取该参数，再拼接到事件跳转的路径中

wxml中：

<button bindtap="navigateTo" data-num="10">wx.navigateTo</button>

js中：

navigateTo(e){

console.log(e.target.dataset.num);

wx.navigateTo({

url: '/pages/detail/detail?id=999&num='+e.target.dataset.num,

})

}

8. 小程序中如何进行组件间传参？

小程序中父传子：

 在父页面中：<son msg=’hello’></son><son></son>子组件接收：properties:{msg:{type:[String,Number],value:’hello world’,}}子组件：<view>{{msg}}</view>

打印结果：

hello

小程序中子传父：

父页面：<son bind:fromson=’fromson’></son>子组件：<button bindtap=’tofather’>子传父</button>子组件中触发：methods：{
tofather(){this.triggerEvent(‘fromson’,’111’)}}父组件接收子组件参数：
fromson(res){console.log(res.detail)this.setData({“fromson”:res.detail})}

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.数据