微信小程序知识点合集

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）标签式跳转：

<navigator url=”页面地址” target=“self // 当前页面小程序的 || miniProgram  // 其他 页面小程序”><navigator>

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