微信小程序笔记

一、概述

1、简述微信小程序的运行机制

热启动：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。
冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。

2、分析一下小程序的优劣势

优势：

无需下载，通过搜索和扫一扫就可以打开
良好的用户体验：打开速度快
开发成本比 App 要低
安卓上可以添加到桌面，与原生 App 差不多
为用户提供良好的安全保障。

劣势：

限制较多。
样式单一。
推广面窄，不能分享朋友圈，
依托于微信，无法开发后台管理功能

3、简单描述下微信小程序的相关文件类型

微信小程序项目结构主要有四个文件类型,如下：

WXML 可以构建出页面的结构
WXSS 是一套样式语言，用于描述 WXML 的组件样式
js 逻辑处理，网络请求
json 小程序配置文件
app.json 作为配置文件入口，整个小程序的全局配置。
app.js 必须要有这个文件，没有也是会报错
app.wxss 全局页面样式设置，在 app.wxss 中设置的样式可以在小程序的所有页面生效

4、请谈谈小程序的生命周期函数

onLoad()：页面加载时触发

onShow()：页面显示/切入前台时触发

onReady()：页面初次渲染完成时触发

onHide()：页面隐藏/切入后台时触发

onUnload()：页面卸载时触发

onPullDownRefresh()：下拉刷新的钩子函数

onReachBottom()：上翻到底的钩子函数

5、请谈谈小程序的组件生命周期函数

created()：组件实例刚刚被创建好时触发。

attached()：在组件完全初始化完毕、进入页面节点树后触发。

detached() 组件离开页面节点树后触发。

6、微信小程序中的路由及其区别

// wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

// wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

// wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

// wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

// wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

7、说出小程序当中常用的 UI 组件

视图容器组件：view、swiper、swiper-item

基础内容组件：text、icon、rich-text

表单组件：button、form checkbox、input

导航组件：navigator

媒体组件：image

8、谈一谈你对 wxs 的理解

概念：

wxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构

特点：

没有兼容性
与 JavaScript 不同
隔离性
不能作为事件回调
ios 设备上比 javascript 运行快
wxs 遵循 CommonJs 模块化规范

支持的数据类型：

number：数值类型
string：字符串类型
boolean：布尔类型
object：对象类型
function：函数类型
array：数组类型
date：日期类型
regexp：正则

9. 简述一下 wx:if 和 hidden 的区别

wx:if动态创建或销毁对应的 UI 结构
wx:if条件为 false，什么也不做;为 true 时，才开始局部渲染
hidden简单的控制组件的显示与隐藏
wx:if有更高的切换消耗而 hidden有更高的初始渲染消耗。频繁切换的情况下，用 hidden更好，运行时条件不大可能改变则 wx:if 较好。

10、说出小程序中父子组件通信的三种方式

属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据
事件绑定：用于子组件向父组件传递数据，可以传递任意数据
获取组件实例：父组件还可以通过 this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法

11、什么是分包加载，如何使用分包加载

1.概念

减少首屏加载时间，用户在使用时按需进行加载

2.使用

在 app.json 中配置项目分包结构
配置subpackages属性

app.json

subpackages: {
  "root": "分包的根目录",
  "pages": [""] // 需要按需加载的包所在路径
}

小程序中如何自定义组件

在根目录新建一个 components 文件夹，然后在这个文件夹下放置自定义的组件
需要用到某个自定义组件时，就在它里面的 json 文件中配置 “component”: true
在父组件的 json 文件中的 usingComponents 中导入这个组件

1
2
3

usingComponents: {
  "自定义组件名": "自定义组件所在路径"
}

13、小程序中如何自定义 tabBar

在 app.json 中的 tabBar 项指定 custom 字段

在所有 tab 页的 json 里声明 usingComponents 项，或者在 app.json 中全局开启

在代码根目录下创建 custom-tab-bar 文件夹，里面放自定义的 tabBar 文件

编写 tabBar 代码

14、⼩程序 WXSS 与 CSS 的区别

wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚

⼩程序样式使⽤ @import 引⼊外联样式⽂件，地址为相对路径。

尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。

15、⼩程序的双向绑定和 Vue 哪⾥不⼀样?

⼩程序直接使⽤ this.data.key = value 是不能更新到视图当中的。必须使⽤ this.setData({ key ：value }) 来更新值

16、在 wepy 中如何将异步 API promise 化

下载模块@wepy/use-promisify

1	npm i @wepy/use-promisify

在 app.wpy 中引入该模块

1	import promisify from "@wepy/use-promisify";

在 app.wpy 中，将 promisify 方法挂载到 wepy 上

1	wepy.use(promisify)

使用

1	wepy.wx.request("url 地址");

17、⼩程序怎么实现下拉刷新

两种⽅案

⽅案⼀：

通过在 app.json 中，将 “enablePullDownRefresh”: true, 开启全局下拉刷新。

或者通过在组件 .json ，将 “enablePullDownRefresh”: true, 单组件下拉刷新。

⽅案⼆：

scroll-view ：使⽤该滚动组件⾃定义刷新，通过 bindscrolltoupper 属性，当滚动到顶部/左边，会触发 scrolltoupper 事件，所以我们可以利⽤这个属性，来实现下拉刷新功能。

18、使用 wepy 框架初始化项目的步骤

下载项目模板

1	npm i standard 项目名(mypro)

cd mypro

下载依赖

npm i

运行项目

1	npm run dev

19. bindtap 和 catchtap 区别

相同点：都是点击事件

不同点： bindtap 不会阻⽌冒泡， catchtap 可以阻⽌冒泡。

20、⼩程序怎么跟随事件传值

在⻚⾯标签上通过绑定 dataset-key = value ，然后绑定点击通过 e.currentTarget.dataset.key 来获取标签上绑定的值

1	<button bindtap="get" data-name="测试">拿到传值</button>

1	get(e){ console.log(e.currentTarget.dataset.name) },

21、uni-app 的配置文件、入口文件、主组件、页面管理部分

pages.json 配置文件
main.js 入口文件
App.vue 主组件
pages 页面管理部分

22、如何封装⼩程序请求

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调， fail 失败回调 ) , 封装常⽤⽅法 POST , GET , DELETE , PUT …. 最后导出这些⽅法然后新建⼀个 api.js ⽂件，导⼊封装好的⽅法，然后调取相应的⽅法，传递数据。

封装：

var app = getApp(); //获取⼩程序全局唯⼀ app 实例
var host = "******************"; //接⼝地址

//POST 请求
function post(url, data, success, fail) {
  request(url, postData, "POST", doSuccess, doFail);
}
//GET 请求
function get(url, data, success, fail) {
  request(url, postData, "GET", doSuccess, doFail);
}
function request(url, data, method, success, fail) {
  wx.showLoading({ title: "正在加载中..." });
  wx.request({
    method: method, //请求⽅法
    url: host + url, //请求地址
    header: {
      //请求头
      "Content-Type": "application/json;charset=UTF-8",
    },
    data: data, //请求参数
    dataType: "json", //返回数据格式
    responseType: "text", //响应的数据类型
    success: function (res) {
      //成功执⾏⽅法，参数值为 res.data,直接将返回的数据传⼊
      wx.hideLoading();
      success(res.data);
    },
    fail: function () {
      //失败执⾏⽅法 fail(); },
    },
  });
}
module.exports = { postRequest: post, getRequest: get };

组件使⽤封装好的请求：

var http = require("../../utils/request.js"); //相对路径
var params = {
  //请求参数
  id: this.data.userId,
};
http.postRequest(
  "user/delUser",
  params,
  function (res) {
    console.log("修改成功！");
  },
  function (res) {
    console.log("修改失败！！！");
  }
);

总结：

在 src 目录中新建一个 utils 目录，在目录中新建一个 request.js,在 request.js 中首先获取整个小程序的实例来保证能调用 wx 所有方法，定义 get 和 post 等请求的方法，然后在 get 或者 post 请求的方法中设置 wx.showToast()，然后通过 wx.request 来实现 get 或者 post 请求，在 success 中，关闭 loading，然后通过回调的形式返回拿到的数据

调用：

首先要导入包

var http=require(“../utils/request.js”)

在方法中通过 http.get 方法（参数，回调）来调用

23. uniapp 获取地理位置的 API 是什么？

uni.getLocation()

24. ⼩程序有哪些传递数据的⽅法 1.使⽤全局变量

在 app.js 中的 this.globalData = { } 中放⼊要存储的数据。在组件.js 中，头部引⼊ const app = getApp(); 获取到全局变量直接使⽤ app.globalData.key 来进⾏赋值和获取值。

使⽤路由 wx.navigateTo 和 wx.redirectTo 时，可以通过在 url 后拼接 + 变量，然后在⽬标⻚⾯通过在 onLoad 周期中，通过参数来获取传递过来的值。

使用本地存储

25. 分别说出 vue、小程序、uni-app 中的本地存储数据和接受数据是什么

vue：

存储：localstorage.setItem

接收：localstorage.getItem

微信小程序：

存储：wx.setStorage/wx.setStorageSync

接收：wx.getStorage/wx.getStorageSync

uni-app：

存储：uni.setStorage

接收：uni.getStorage

26. app.json 全局配置⽂件描述

pages : ⽤于存放当前⼩程序的所有⻚⾯路径

window : ⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊配置。

tabBar : ⼩程序底部的 Tab ,最多 5 个，最少 2 个。

27. uni-app 如何监听页面滚动

使用 onPageScroll 监听

28. 如何让图片宽度不变，高度自动变化，保持原图片宽高比不变

给 image 标签添加 mode=’widthFix’

29. ⼩程序什么时候会主动销毁？

⼩程序在进⼊后台之后，客户端会帮我们在⼀定时间内维持我们的⼀个状态，超过五分钟后，会被微信主动销毁.官⽅也没有明确说明什么时候销毁，在不同机型表现也不⼀样，2019 年开发时：时间官⽅⽂档没有说明，但是经过询问⼀般指 5 分钟内 2020 年开发时：时间官⽅⽂档没有说明，实测安卓没有固定时间，内存⾜够情况下，有时候⼀天了还在，有时候⼏分钟就没了

30. uniapp 进行条件编译的两种方法？小程序端和 H5 的代表值是什么？

条件编译的两种方法

#ifdef

#ifndef

小程序端和 H5 的代表值

H5：H5

MP-WEIXIN：微信小程序

原文链接