微信小程序相关

平台：WXML主要用于微信小程序开发，是微信小程序的一部分；HTML主要用于Web开发，用于构建网页
标签和属性：WXML是针对微信小程序，如`<view>`、`<text>`等标签，wx:if、wx:for等属性；HTML包含用于构建网页的通用标签和属性，如`<div>`、`<span>`、`<p>`等
小程序没有DOM树和window对象
标签名字不一样，且小程序标签更少，单一标签更多

二、WXSS和CSS的异同

WXSS（微信小程序样式表）和CSS（层叠样式表）

同：

样式定义：都定义页面元素的样式，包括字体、颜色、大小、布局
选择器：都使用选择器，例如标签选择器、类选择器、ID选择器等
属性和值：都使用类似的属性和值。如，`color`属性用于定义文本颜色，`font-size`属性用于定义字体大小等

异：

平台：WXSS主要用于微信小程序开发；CSS主要用于Web开发
单位：WXSS支持rpx；CSS使用px、em、rem。rpx是微信小程序中专门为适配不同屏幕尺寸而设计的单位，比px更加灵活
WXSS仅支持部分CSS选择器，如，不支持::after伪元素
WXSS提供全局样式与局部样式

三、微信小程序主要目录和文件的作用

1. app.json：全局配置文件，包括页面路径、窗口样式、导航栏样式、网络超时时间等。它定义了小程序的整体结构和行为

2. app.js：全局逻辑文件，如小程序的生命周期函数、全局数据等。可以定义App()函数，用于注册小程序的生命周期函数和全局数据

3. app.wxss：全局样式文件

4. pages目录：存放各个页面。每个页面通常包括一个.wxml文件（页面结构）、一个.js文件（页面逻辑）、一个.wxss文件（页面样式）和一个.json文件（页面配置）

5. utils目录：存放工具函数和公共代码。可以存放一些常用的函数、网络请求封装等

6. images目录：存放图片资源。

7. app.acss：对于使用了支付宝小程序的开发者，该文件用于定义小程序的全局样式，与app.wxss功能类似，但是针对支付宝小程序。

四、小程序的双向绑定和vue的异同

同：

1. 都是实现数据的双向绑定，即数据的改变可以自动更新到视图，视图的改变也可以自动更新到数据

2. 简化开发：简化开发流程，减少手动操作DOM的需求，提高开发效率

异：

1. 实现方式：在小程序通常需要手动监听数据变化，手动更新视图；Vue双向绑定是框架内置的特性，无需手动处理，框架会自动进行数据监听和更新视图

2. 响应式系统：小程序需要通过setData()方法手动更新数据；Vue通过数据劫持和依赖追踪实现数据的监听和更新

3. 语法：小程序 value="{{data}}" bindinput="setData"；Vue是v-model="data"

4. 生命周期：小程序页面手动编写，手动调用；Vue由框架自动调用

5. 跨平台：小程序主要用于微信平台；Vue用于Web开发、移动端开发等多种平台。

五、微信小程序有哪些传值(传递数据)方法

1. URL 参数传递：在页面路径后面添加参数进行传值，例如：/pages/index/index?id=1&name=abc，在目标页面的 onLoad 生命周期中可以通过 options 参数获取传递的值

2. Storage 存储：使用 wx.setStorageSync 或 wx.setStorage 方法将数据存储到本地缓存中，在目标页面中使用 wx.getStorageSync 或 wx.getStorage 方法获取数据

3. 全局数据传递：数据存储在 App 实例中的 globalData 属性中，在目标页面中使用 getApp().globalData 获取数据

4. 事件传递：通过触发事件来传递数据，例如在子组件中触发一个自定义事件，并通过事件对象传递数据，在父组件中监听该事件并获取传递的数据

5. 页面栈传递：使用小程序提供的页面栈来传递数据，通过 getCurrentPages 方法获取页面栈的实例，使用 data 属性存储数据，在目标页面中使用 options 获取数据

在跳转的时候，还可以通过传递参数来实现数据的传递，一般有以下两种方式：

1. Query 参数传递：适用于传递简单的参数，如页面之间的关联 ID、状态等。

在通过wx.navigateTo()或wx.redirectTo()等方法跳转页面时，可以在目标页面的路径后面附加查询参数，如：

wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=test'
})

目标页面可以通过onLoad生命周期函数的 options 参数获取到传递的查询参数，如：

onLoad: function(options) {
  console.log(options.id); // 输出 123
  console.log(options.name); // 输出 test
}

2. 页面栈传递：适用于传递复杂的数据对象或者在页面关闭后需要回传数据的情况

在跳转时，通过 wx.navigateTo({ url: 'pages/detail/detail', query: { id: 123 } }) 将参数传递到目标页面，然后在目标页面中，通过 getCurrentPages()[getCurrentPages().length - 1].options 获取参数，如 var id = getCurrentPages()[getCurrentPages().length - 1].options.id。

六、小程序的生命周期函数

APP生命周期

onLaunch(options)：小程序初始化时调用，可以获取打开小程序的场景值、query参数等
onShow(options)：小程序启动或从后台进入前台时调用，可以获取打开小程序的场景值、query参数等

Page生命周期

Component生命周期

onLoad(options)：页面加载时调用，可以获取上个页面传递的参数等
onShow()：页面显示时调用
onReady()：页面初次渲染完成时调用
onHide()：页面隐藏时调用
onUnload()：页面卸载时调用
created()：组件实例刚刚被创建时调用，可以在这个函数中定义组件的数据和方法等
attached()：组件被添加到页面中时调用
ready()：组件初次渲染完成时调用
moved()：组件被移动到另外一个节点时调用
detached()：组件被从页面中移除时调用

七、小程序的原理

1. 运行环境：是微信客户端内置的一个轻量级的JavaScript引擎，用于解析和执行小程序的代码。这个JavaScript引擎提供了一系列的API，使得小程序能够与微信客户端进行交互

2. 开发工具：提供了专门的开发工具

3. 框架支持：类似于前端框架的开发模式，类似于HTML、CSS和JavaScript的语法和组件系统

4. 渲染机制：类似于Web开发的渲染方式，使用了类似于HTML的WXML（微信小程序标记语言）来描述页面的结构，使用了类似于CSS的WXSS（微信小程序样式表）来定义页面的样式，使用了类似于JavaScript的逻辑语法来实现页面的逻辑功能

5. 数据通信：可以通过网络请求和微信客户端进行数据通信。开发者可以使用微信提供的API来发送HTTP请求，获取和上传数据。同时，微信小程序还提供了一些特定的API，如获取用户信息、支付等，方便开发者与微信平台进行交互。

6. 安全机制：如，代码会经过微信平台的审核；网络请求受到跨域和HTTPS的限制；用户身份验证和权限管理。

八、小程序的特点和优势

快速启动、低内存、无需安装、跨平台支持、强大的生态系统

九、小程序与H5的区别

1. 开发语言和框架：WXML和WXSS，微信开发者工具；HTML、CSS和JavaScript，使用网页浏览器进行开发和调试。

2. 执行环境和性能：微信客户端，可以直接使用微信客户端提供的能力，如地理位置、支付等；在浏览器中运行，受限于浏览器的性能和能力

3. 可访问性：只能在微信客户端中访问；通过浏览器访问

4.可扩展性：微信小程序功能和扩展性受到限制。必须符合微信小程序的规范和限制，经过微信审核才能发布；H5则更加灵活，可以随意扩展和定制，没有限制

5. 开发成本不同：H5需要兼容不同的浏览器

十、小程序和Vue写法的区别

开发模式：小程序需要使用微信开发者工具进行开发和调试；Vue可以在浏览器中使用webpack等工具进行开发和调试。
语法：小程序使用WXML和WXSS语言；Vue使用HTML、CSS和JavaScript
组件化：都支持组件化的开发方式。小程序的组件化主要是通过Component方法进行定义和注册；Vue通过Vue.component方法进行定义和注册。在使用组件时，小程序需要使用组件的名称进行调用；Vue通过组件的标签名称进行调用
状态管理：小程序使用的是原生的数据绑定方式，即通过setData方法进行数据的修改和更新；Vue使用的是Vue.js提供的响应式数据绑定和Vuex状态管理机制

如：

遍历：小程序wx:for="list"；Vue是v-for="item in list"

调用data模型（赋值）的时候：

小程序：this.data.item // 调用，this.setDate({item:1})//赋值

Vue：this.item //调用，this.item=1 //赋值

十一、哪些方法可以提高小程序的应用速度

提高页面的加载速度：预加载页面或组件，分包加载
减少网络请求和数据传输：减少默认的data的大小
优化代码逻辑和性能：节流和防抖，异步编程和Promise，避免复杂计算
优化渲染性能：减少页面层级和组件数量

十二、小程序与原生App对比

小程序的优点：

基于微信平台开发，享受微信自带的流量，这个优点最大
无需安装，不占手机内存，体验好
开发周期段，一般最多一个月就可以上线完成
开发所需的资金少，是开发原生APP的一半不到
小程序名称是唯一的，在微信的搜索里权重很高
容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题
基本不需要考虑兼容性问题
发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布
开发文档完善，社区活跃
支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用

缺点：

局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能
不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制
后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦
前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致
js引用只能使用绝对路径，不能操作DOM

原生App优点：

响应速度快
调用系统硬件的功能（摄像头，拨号，短信蓝牙..）
在弱网，无网络，离线操作情况下体验好

原生App缺点：

开发周期长
开发成本高
需要下载

十三、常用API

1. 页面跳转：

- `wx.navigateTo()`：保留当前页面，跳转到应用内的某个页面
- `wx.redirectTo()`：关闭当前页面，跳转到应用内的某个页面
- `wx.switchTab()`：跳转到应用内的某个 TabBar 页面，并关闭其他所有非 TabBar 页面
- `wx.navigateBack()`：关闭当前页面，返回上一页面或多级页面
- `wx.reLaunch()`：关闭所有页面，打开到应用内的某个页面

2. 网络请求：

- `wx.request()`：发起网络请求
- `wx.uploadFile()`：上传文件
- `wx.downloadFile()`：下载文件
- `wx.connectSocket()`：创建一个 WebSocket 连接

这些API都是异步操作，需要传入一个 Object 类型的参数，其中包括请求的 URL、请求的参数、请求的方法、请求的头部信息等，如

wx.request({
  url: 'https://www.example.com/api',
  method: 'GET',
  data: {
    key1: value1,
    key2: value2
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  },
  fail(res) {
    console.log('请求失败', res)
  }
})

3. 用户信息：

- `wx.getUserInfo()`：获取用户信息
- `wx.login()`：登录
- `wx.checkSession()`：检查登录态是否过期

4. 设备信息：

- `wx.getSystemInfo()`：获取系统信息
- `wx.getNetworkType()`：获取网络类型
- `wx.getLocation()`：获取地理位置信息

5. 界面交互：

- `wx.showToast()`：显示消息提示框
- `wx.showModal()`：显示模态对话框
- `wx.showLoading()`：显示 loading 提示框
- `wx.showActionSheet()`：显示操作菜单

6. 媒体文件：

- `wx.chooseImage()`：从相册选择图片或拍照
- `wx.previewImage()`：预览图片
- `wx.saveImageToPhotosAlbum()`：保存图片到系统相册

7. 支付：

- `wx.requestPayment()`：发起微信支付请求

8. 缓存：

- `wx.setStorageSync()`：将数据存储在本地缓存中（同步）
- `wx.getStorageSync()`：从本地缓存中获取数据（同步）

详细的 API 文档可以参考微信小程序官方文档

十四、小程序的发布流程（开发流程）

参考：https://www.cnblogs.com/ssrstm/p/6855572.html

注册微信小程序账号
获取微信小程序的AppID
下载微信小程序开发者工具
创建demo项目
去微信公众号配置域名
手机浏览
代码上传
提交审核
小程序发布

常见问题

bindtap不会阻止事件冒泡，catchatap会阻止，事件不会在父元素上继续传递
rpx：小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率屏幕
本地资源无法通过wxss获取：background-image：可以使用网络图片，或者base64，或者使用标签
wx.navigateTo无法打开页面：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
tabBar设置不显示：1.tabBar的数量少于2项或超过5项都不会显示。2.tabBar写法错误导致不会显示。3.tabBar没有写pagePath字段（程序启动后显示的第一个页面）