[移动开发]微信小程序的基础语法（必看）

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

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

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

优势：

1. 无需下载，通过搜索和扫一扫就可以打开

2. 良好的用户体验：打开速度快

3. 开发成本比App要低

4. 安卓上可以添加到桌面，与原生App差不多

5. 为用户提供良好的安全保障。

劣势：

1. 限制较多。

2. 样式单一。

3. 推广面窄，不能分享朋友圈，

4. 依托于微信，无法开发后台管理功能

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

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

1.WXML可以构建出页面的结构
2.WXSS 是一套样式语言，用于描述 WXML 的组件样式
3.js逻辑处理，网络请求
4.json小程序配置文件
5.app.json作为配置文件入口，整个小程序的全局配置。
6.app.js必须要有这个文件，没有也是会报错
7.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的区别

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

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

• 属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

• 事件绑定：用于子组件向父组件传递数据，可以传递任意数据

• 获取组件实例：父组件还可以通过this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法

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

1. 1.概念 减少首屏加载时间，用户在使用时按需进行加载
   2.使用
       1. 在app.json中配置项目分包结构
       2. 配置`subpackages`属性
           subpackages: {
    ? ? ? ? ?  "root": "分包的根目录",
    ? ? ? ? ?  "pages": [""] // 需要按需加载的包所在路径
    ? ? ?  }

12. 小程序中如何自定义组件

1. 在根目录新建一个components文件夹，然后在这个文件夹下放置自定义的组件

2. 需要用到某个自定义组件时，就在它里面的json文件中配置 "component": true

3. 在父组件的json文件中的usingComponents中导入这个组件

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

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

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

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

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

4. 编写tabBar代码

14. ?程序WXSS与CSS 的区别

wxss 背景图?只能引?外链，不能使?本地图?

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

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

15. ?程序的双向绑定和Vue哪?不?样?

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

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

1. 下载模块@wepy/use-promisify

   npm i @wepy/use-promisify

2. 在app.wpy中引入该模块

   import promisify from '@wepy/use-promisify'

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

   wepy.use(promisify)

4. 使用

   wepy.wx.request('url地址')

17. ?程序怎么实现下拉刷新

两种?案

?案 ? ：

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

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

?案?：

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

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

1. 下载项目模板

   npm i standard 项目名(mypro)

2. 进入到项目目录

   cd mypro

3. 下载依赖

   npm i

4. 运行项目

   npm run dev

19. bindtap和catchtap区别

相同点： 都是点击事件

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

20. ?程序怎么跟随事件传值

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

<button bindtap="get" data-name="测试"> 拿到传值</button> 
?
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({
 ? ? ? ?url: host + url, //请求地址 
 ? ? ? ?method: method, //请求?法 
 ? ? ? ?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：微信小程序