1.请谈谈wxml与标准的html的异同?
以下是 wxml 与标准的 HTML 的异同:
相同点:
不同点:
2.谈谈wxss和css的异同?
wxss是微信小程序的样式表语言
相同点:
不同点 :
3.谈谈微信小程序主要目录和文件的作用
主要目录和文件包括:
4.谈谈小程序的双向绑定和vue异同
相同点:
不同点:
实现方式不同:小程序的双向绑定是基于数据绑定和事件绑定实现的,而vue的双向绑定基于数据劫持和发布/订阅模式实现的
语法不同:小程序双向绑定使用的语法是value=“{{data}}”,bindinput="setData",而vue双向绑定使用的是v-model语法
性能不同:vue双向绑定通过数据劫持实现,可以精确地追踪数据的变化并更新视图,而小程序双向绑定需要通过事件绑定和数据绑定实现(效率相对低一些)
5.简单描述下微信小程序的相关文件类型
wxml:微信小程序的模板文件,类似于html,用于定义小程序的页面结构和内容
wxss:微信小程序的样式文件,类似于css,用于定义小程序的页面样式和结构
json:微信小程序的配置文件,用于定义小程序的全局配置,页面路径等
js:微信小程序的脚本文件,用于编写小程序的逻辑代码,包括页面逻辑,组件逻辑,网络请求等
wxs:微信小程序的脚本文件,类似于js文件,但是编写时需要注意一些特殊的语法和限制
6.微信小程序有那些传值(传递数据)方法
url传参:/pages/index/index?id=1&name=abc,在目标页面onLoad生命周期中可以通过options参数获取传递的值
Storage存储:可以用wx.setStorageSync
或 wx.setStorage方法将数据存储到本地缓存中,在目标页面中使用wx.getStorageSync和wx.getStorage方法获取数据
全局数据传递:可以将数据存储在APP实例中globalData属性中,在目标页面中使用getApp().gloabalData获取数据
事件传递:可以通过触发事件来传递数据,例如在子组件中触发一个自定义事件,并通过事件对象传递数据,在父组件中监听该数据获取传递的数据
页面栈传递:可以使用小程序提供的页面栈来传递数据,通过getCurrentPages
方法获取页面栈的实例,使用data属性存储数据,在目标页面中使用options数据
7.bindtap和catchtap的区别?
在微信小程序中,bindtap
和 catchtap
都是用来绑定点击事件的属性,主要区别在于事件冒泡和阻止冒泡的处理方式
bindtap 用于绑定点击事件处理函数,当点击事件发生时,该处理函数会被触发执行。如果在事件处理函数中调用 event.stopPropagation() 方法来阻止事件冒泡,事件不会向父级元素传递。
catchtap 用于绑定一个点击事件处理函数,与 bindtap 不同的是,当点击事件发生时,该处理函数先于父级元素的事件处理函数执行,如果在事件处理函数中调用 event.stopPropagation() 方法来阻止事件冒泡,事件不会向父级元素传递。
因此,bindtap
和 catchtap
的主要区别在于事件冒泡和阻止冒泡的处理方式,如果希望点击事件能够向上冒泡并被父级元素捕获处理,则应使用 bindtap
,如果希望阻止点击事件冒泡,则应该使用 catchtap
8.wx.navigateTo()和wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()区别
wx.navigateTo():保留当前页面,跳转到应用内的某个页面,新页面可以通过 wx.navigateBack() 方法返回到原页面。这种方式适用于需要在新页面中进行操作并返回原页面的情况,如填写表单、查看详情等。
wx.redirectTo():关闭当前页面,跳转到应用内的某个页面,新页面不能通过 wx.navigateBack() 方法返回到原页面,而是重新打开一个页面栈。这种方式适用于不需要返回原页面,而是需要直接进入目标页面的情况,如登录页、欢迎页等。
wx.switchTab():跳转到应用内的某个 TabBar 页面,并关闭其他所有非 TabBar 页面。这种方式适用于 TabBar 导航场景,如底部导航、顶部标签等。
wx.navigateBack():关闭当前页面,返回上一个页面。如果当前页面是通过 wx.navigateTo() 或 wx.redirectTo() 打开的,则返回到打开该页面的原页面,如果当前页面是 TabBar 页面,则返回到上一个 TabBar 页面。这种方式适用于返回上一个页面的情况。
wx.reLaunch():关闭所有页面,跳转到应用内的某个页面。这种方式相当于关闭所有页面,重新打开一个页面栈。这种方式适用于需要完全重启应用并打开某个页面的情况,如退出登录后重新登录。
9.微信小程序与H5的区别?
开发语言和框架:微信小程序使用的是基于JavaScript的WXML和WXSS语言,使用微信开发者工具进行开发和调试。而H5使用的是HTML、CSS和JavaScript等技术,并使用网页浏览器进行开发和调试。
执行环境和性能:微信小程序的执行环境是微信客户端,可以获得更好的性能表现和用户体验,因为它可以直接使用微信客户端提供的能力,如地理位置、支付等。而H5则需要在浏览器中运行,受限于浏览器的性能和能力。
可访问性:微信小程序只能在微信客户端中访问,需要用户下载并安装微信客户端,而H5则可以通过任何支持浏览器的设备访问,包括电脑、手机、平板等。
可扩展性:微信小程序相对于H5来说,其功能和扩展性受到限制。小程序必须符合微信小程序的规范和限制,并且必须经过微信审核才能发布。而H5则更加灵活,可以随意扩展和定制,没有限制。
总的来说,微信小程序是一种轻量级应用,其主要优势在于用户体验和性能方面,适用于需要更加稳定和高效的应用场景。而H5则更加灵活和可扩展,适用于需要自由发挥的应用场景。
10.小程序与vue写法的区别
开发模式:小程序需要使用微信开发者工具进行开发和调试,而Vue可以在浏览器中使用webpack等工具进行开发和调试。
语法:小程序使用WXML和WXSS语言,而Vue使用HTML、CSS和JavaScript等技术。小程序的WXML和WXSS语言是为了方便小程序的开发而设计的,它们与HTML、CSS等语言有一些区别,比如标签和属性的命名、样式的定义方式等。
组件化:小程序和Vue都支持组件化的开发方式,但两者的组件化方式有所不同。小程序的组件化主要是通过Component方法进行定义和注册,而Vue则是通过Vue.component方法进行定义和注册。在使用组件时,小程序需要使用组件的名称进行调用,而Vue则是通过组件的标签名称进行调用。
状态管理:在状态管理方面,小程序使用的是原生的数据绑定方式,即通过setData方法进行数据的修改和更新。而Vue使用的是Vue.js提供的响应式数据绑定和Vuex状态管理机制。
总的来说,小程序和Vue在开发模式、语法、组件化等方面有一定的区别,开发者需要根据不同的需求选择合适的技术方案
11.rpx的理解?
rpx是微信小程序中的一种尺寸单位,相对于CSS中的px和rem等单位,它具有更好的适配性和跨平台性。
它是微信小程序中的一种相对单位,代表屏幕宽度的百分之一。在小程序中,设计师可以使用rpx来设置尺寸,而不用考虑不同设备的像素密度和分辨率。比如,在iPhone 6和iPhone X等设备上,1rpx分别等于0.5px和0.42px。
使用rpx可以实现小程序的自适应布局,在不同尺寸的设备上能够保持相同的视觉效果,提高用户体验。同时,由于rpx是相对单位,可以跨平台适配,无论是在iOS还是Android平台上都可以保持相同的效果。
总的来说,rpx是一种非常实用的尺寸单位,在小程序开发中非常常用,能够帮助开发者实现跨平台适配和自适应布局。
12.微信小程序可以进行DOM操作吗?
微信小程序中的WXML语言与HTML语言类似,但并不是真正的HTML语言。WXML是一种轻量级的标记语言,它只能用于描述小程序页面的结构,不能进行像HTML一样的DOM操作。
微信小程序的视图层和逻辑层是分离的,WXML负责视图层的渲染,而逻辑层使用JavaScript来处理数据和业务逻辑。逻辑层可以通过setData方法修改视图层中的数据,从而实现动态渲染页面。但是,不能通过JavaScript直接操作DOM元素,因为微信小程序的视图层并没有提供像Web中的document、window等对象,无法直接操作DOM元素。
微信小程序为了避免操作DOM引起性能问题,提供了一套自己的组件系统,可以通过组件的属性、方法等来操作组件的状态和属性,而不用直接操作DOM元素。此外,小程序提供了一些基础组件和API,如按钮、输入框、swiper等,这些组件可以直接在WXML中使用,并提供了一些属性、事件等用于控制组件的状态和行为。开发者也可以自定义组件,实现一些复杂的交互和动画效果。
因此,虽然微信小程序不能进行像HTML一样的DOM操作,但它提供了一套完整的组件和API体系,能够满足大部分的页面需求,并且有利于提高小程序的性能和可维护性。
13.微信小程序自定义tabbar的理解?
微信小程序自定义 TabBar 是指开发者可以自己定义底部的 TabBar,而不是使用微信小程序原生的 TabBar。自定义 TabBar 可以让小程序的底部导航更加灵活多样化,同时也可以更好地满足用户的需求。
自定义 TabBar 的实现方法是在小程序的 app.json 文件中定义一个 tabBar 字段,通过设置 tabBar.custom 属性为 true,告诉小程序使用自定义 TabBar。同时,还需要在 tabBar.list 字段中设置自定义 TabBar 的样式和图片等信息。开发者还需要在自定义 TabBar 的每个选项页面中添加一个自定义 TabBar 组件,以便在页面中展示自定义 TabBar。
自定义 TabBar 的实现过程中,需要注意以下几点:
自定义 TabBar 的样式和图片等资源需要开发者自行准备和管理。
自定义 TabBar 只能使用微信小程序支持的组件和API,不能使用第三方库。
自定义 TabBar 的选项数量需要和 tabBar.list 中的选项数量一致,否则会出现页面跳转错误。
自定义 TabBar 在页面之间切换时,需要手动控制页面栈,使用 wx.switchTab() 方法切换页面时,会关闭所有非 tabBar 页面,并重置所有 tabBar 页面的状态。
总的来说,自定义 TabBar 可以让小程序的底部导航更加灵活多样化,但需要开发者花费一定的时间和精力进行开发和维护
14.微信小程序怎么缓存数据?
微信小程序提供了一些数据缓存的API,可以将数据存储在客户端本地,以便在下次访问时快速获取,从而提高应用的性能和用户体验。下面介绍微信小程序中常用的数据缓存API:
wx.setStorageSync(key, data):将数据同步存储在本地缓存中,key 为数据的键名,data 为数据的内容,注意数据大小不能超过 10MB。
wx.setStorage(key, data):将数据异步存储在本地缓存中,key 为数据的键名,data 为数据的内容,注意数据大小不能超过 10MB。
wx.getStorageSync(key):同步获取本地缓存中指定 key 的数据。
wx.getStorage(key):异步获取本地缓存中指定 key 的数据。
wx.removeStorageSync(key):同步移除本地缓存中指定 key 的数据。
wx.removeStorage(key):异步移除本地缓存中指定 key 的数据。
除了上述 API,微信小程序还提供了一些全局的缓存机制,如全局缓存、页面缓存、数据缓存等,可以通过设置 app.json 文件中的 window 和 page 属性来控制。
需要注意的是,小程序的缓存数据是有时效性的,过期的数据需要重新从服务器获取,因此在使用缓存数据时需要判断数据是否过期,并及时更新数据。此外,缓存数据不能用于敏感信息和重要业务逻辑,需要注意数据安全
15.微信小程序怎么进行网络请求?
微信小程序提供了一些API来进行网络请求,常用的API包括:
wx.request(Object object):发起 HTTPS 网络请求。
wx.uploadFile(Object object):上传文件到服务器。
wx.downloadFile(Object object):下载文件到本地。
这些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)
}
})
在请求成功后,服务器返回的数据可以通过 success 回调函数中的 res 参数获取。在请求失败时,可以通过 fail 回调函数中的 res 参数获取失败原因。
需要注意的是,微信小程序的网络请求只能发起 HTTPS 请求,而不能发起 HTTP 请求,同时,也需要遵守微信小程序的开发规范和网络安全要求,如不允许发起跨域请求等。
16.微信小程序路由跳转以及传参如何实现?
微信小程序的路由跳转可以使用以下几个 API:
wx.navigateTo(Object object):保留当前页面,跳转到应用内的某个页面,可以通过getCurrentPages()函数获取当前页面栈的信息。
wx.redirectTo(Object object):关闭当前页面,跳转到应用内的某个页面。
wx.switchTab(Object object):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
wx.reLaunch(Object object):关闭所有页面,打开到应用内的某个页面。
在跳转的时候,还可以通过传递参数来实现数据的传递,一般有以下两种方式:
query 参数传递:在跳转时,将参数以字符串形式追加到 URL 后面,如 wx.navigateTo({ url: 'pages/detail/detail?id=123' }),然后在跳转后的页面中,通过 options.query 获取参数,如 var id = options.query.id。
页面栈传递:在跳转时,通过 wx.navigateTo({ url: 'pages/detail/detail', query: { id: 123 } }) 将参数传递到目标页面,然后在目标页面中,通过 getCurrentPages()[getCurrentPages().length - 1].options 获取参数,如 var id = getCurrentPages()[getCurrentPages().length - 1].options.id。
需要注意的是,以上两种方式都可以实现数据的传递,但是 query 参数传递方式对于参数较多或较复杂的情况可能会不太方便,而页面栈传递方式则需要使用 getCurrentPages() 函数来获取当前页面栈的信息,如果页面较多或层级较深时,可能会导致性能问题。
17.微信小程序生命周期的理解?
微信小程序的生命周期包括App、Page和Component三个部分,分别对应着小程序、页面和组件的生命周期。
App生命周期
App生命周期主要包括onLaunch和onShow两个函数,分别在小程序初始化时和进入前台时触发。
onLaunch(options):小程序初始化时调用,可以获取打开小程序的场景值、query参数等。
onShow(options):小程序启动或从后台进入前台时调用,可以获取打开小程序的场景值、query参数等。
Page生命周期
Page生命周期主要包括onLoad、onShow、onReady、onHide和onUnload五个函数,分别在页面加载、页面显示、页面初次渲染完成、页面隐藏和页面卸载时触发。
onLoad(options):页面加载时调用,可以获取上个页面传递的参数等。
onShow():页面显示时调用。
onReady():页面初次渲染完成时调用。
onHide():页面隐藏时调用。
onUnload():页面卸载时调用。
Component生命周期
Component生命周期主要包括created、attached、ready、moved和detached五个函数,分别在组件创建、组件添加到页面、组件初次渲染完成、组件移动和组件从页面中移除时触发。
created():组件实例刚刚被创建时调用,可以在这个函数中定义组件的数据和方法等。
attached():组件被添加到页面中时调用。
ready():组件初次渲染完成时调用。
moved():组件被移动到另外一个节点时调用。
detached():组件被从页面中移除时调用。
需要注意的是,生命周期函数可以根据需要进行覆盖和使用,例如可以在onLoad函数中进行网络请求,也可以在onShow函数中更新页面数据等。同时,小程序的生命周期也与页面或组件的生命周期有一定的关联,例如当小程序进入后台时,当前页面的onHide函数会被调用,而当小程序从后台进入前台时,当前页面的onShow函数会被调用。
18.微信小程序模块化?
微信小程序支持模块化开发,可以使用ES6的模块化语法进行代码编写,同时也支持CommonJS和AMD等模块化方案。下面简单介绍微信小程序的模块化实现方式:
ES6模块化
在小程序中使用ES6模块化语法可以通过两种方式实现,一种是在代码中直接使用import和export关键字进行导入和导出,另一种是使用微信小程序提供的npm包管理工具,先通过npm安装依赖包,然后在小程序中使用import语句进行导入。
例如,在小程序中使用ES6模块化语法导入一个模块:
import { add } from './utils.js';
let result = add(1, 2);
console.log(result); // 输出:3
CommonJS模块化
在小程序中使用CommonJS模块化语法也可以通过两种方式实现,一种是通过wx.require函数进行导入,另一种是使用微信小程序提供的npm包管理工具进行安装和导入。
例如,在小程序中使用CommonJS模块化语法导入一个模块:
let { add } = wx.require('./utils.js');
let result = add(1, 2);
console.log(result); // 输出:3
AMD模块化
微信小程序也支持使用AMD模块化方案进行开发,可以通过require函数进行导入和定义模块。但需要注意的是,在小程序中使用AMD模块化方案需要使用require.js等相关库进行支持。
例如,在小程序中使用AMD模块化语法导入一个模块:
require(['./utils.js'], function (utils) {
let result = utils.add(1, 2);
console.log(result); // 输出:3
});
综上所述,微信小程序支持多种模块化方案,可以根据需要进行选择和使用。同时,需要注意的是,在使用npm包管理工具进行依赖管理时,需要先在小程序的project.config.json文件中配置相关信息。
19.微信小程序所有api放在哪里,简单介绍几个api
微信小程序的API文档可以在微信官方开发者文档中心中查看,主要分为基础库、界面、网络、媒体、文件、数据缓存、位置、设备、开放接口、小程序跳转等模块,提供了丰富的功能和接口供开发者使用。
下面简单介绍几个比较常用的API:
wx.request
wx.request是微信小程序中用于发起网络请求的API,可以发送HTTP/HTTPS请求,并支持多种请求类型,如GET、POST、PUT等。请求的结果以回调函数的形式返回,开发者可以在回调函数中处理请求结果。
wx.getStorageSync、wx.setStorageSync
wx.getStorageSync和wx.setStorageSync是微信小程序中用于进行本地数据缓存的API。开发者可以使用这两个API将数据存储在本地缓存中,并在需要时从缓存中读取数据。
wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack、wx.reLaunch
wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack、wx.reLaunch是微信小程序中用于页面跳转的API,开发者可以通过这些API实现不同的页面跳转效果,比如打开新页面、关闭当前页面、切换Tab页等。
wx.showLoading、wx.hideLoading
wx.showLoading和wx.hideLoading是微信小程序中用于显示和隐藏加载提示框的API。开发者可以在需要加载数据时使用wx.showLoading显示加载提示框,在加载完成后使用wx.hideLoading隐藏加载提示框。
wx.getSystemInfoSync
wx.getSystemInfoSync是微信小程序中用于获取设备信息的API,可以获取设备的品牌、型号、操作系统版本、屏幕宽高等信息。开发者可以使用这些信息优化小程序的展示效果,提高用户体验。
20.微信小程序应用和页面生命周期触发顺序?
微信小程序应用和页面生命周期触发顺序如下:
应用生命周期
onLaunch:小程序初始化时触发,全局只触发一次,可以在这里获取用户信息、登录等操作。
onShow:小程序启动或从后台进入前台时触发,可以在这里获取场景值、展示欢迎信息等操作。
onHide:小程序从前台进入后台时触发,可以在这里保存数据、清空定时器等操作。
页面生命周期
onLoad:页面加载时触发,可以在这里获取页面参数、进行数据初始化等操作。
onShow:页面显示时触发,可以在这里进行页面数据更新、获取数据等操作。
onReady:页面初次渲染完成时触发,可以在这里进行页面动画效果等操作。
onHide:页面从前台进入后台时触发,可以在这里保存数据、清空定时器等操作。
onUnload:页面销毁时触发,可以在这里清空数据、关闭定时器等操作。
注意:在小程序中使用页面栈来管理页面,当打开新页面时,原页面的 onHide 方法会被触发,而新页面的 onLoad、onShow、onReady 方法会被触发。当关闭页面时,原页面的 onShow 方法会被触发,而新页面的 onHide、onUnload 方法会被触发。
21.微信小程序如何使用sass预编译
22.微信小程序开发文档界面都有哪些操作,列举几项?
微信小程序开发文档界面提供了丰富的操作和功能,下面列举几项:
搜索框:可以输入关键字搜索相关内容。
导航栏:提供了分类导航,方便查找对应的开发文档。
侧边栏:提供了开发者工具、API、组件等相关链接。
示例代码:提供了丰富的示例代码,帮助开发者更快地上手。
快速链接:提供了一些常用链接,如开发工具下载链接、小程序审核指南等。
在线工具:提供了一些在线工具,如代码压缩、图片压缩等。
版本切换:可以切换不同版本的开发文档。
反馈按钮:提供了反馈入口,方便开发者向官方反馈问题。
通过这些操作和功能,开发者可以更加方便地查找和使用开发文档,加速开发进程。
24.微信小程序事件通道的使用?
25.微信小程序如何使用vant组件库?
26.微信小程序自定义组件父传子子传父
27.微信小程序自定义组件生命周期有哪些?
微信小程序自定义组件的生命周期与小程序页面的生命周期有些不同。以下是自定义组件的生命周期:
created:组件实例被创建并初始化完成时触发,此时还不能调用setData。
attached:组件被添加到页面节点树时触发,此时可以调用setData。
ready:组件渲染完成时触发,可以获取节点信息。
moved:组件被移动到另一个节点时触发。
detached:组件被从页面节点树移除时触发。
error:组件发生错误时触发。
其中,created和attached是必须要实现的生命周期函数,其他生命周期函数可以根据组件的实际情况选择性实现。在自定义组件中,也可以像小程序页面一样使用setData来更新数据,只不过更新的范围是组件内部。
需要注意的是,如果自定义组件在使用时是通过wx:if或者hidden来控制显示隐藏的,那么当组件被隐藏时,其生命周期中的detached和error不会被触发。
28.微信小程序授权登录流程?
微信小程序授权登录流程如下:
用户点击小程序页面中的授权登录按钮。
小程序调用wx.login API 获取用户的临时登录凭证code。
小程序将code发送到开发者服务器。
开发者服务器调用微信登录凭证校验API(https://api.weixin.qq.com/sns/jscode2session)获取openid和session_key。
开发者服务器生成自己的登录态(例如token),并将token、openid等信息保存到自己的数据库中。
开发者服务器将token返回给小程序。
小程序使用token发起后续的业务请求。
需要注意的是,小程序只能获取到用户的openid等基本信息,不能获取到用户的其他信息,如昵称、头像等。如果需要获取其他信息,需要引导用户进行微信公众号授权。
另外,为了保证用户信息的安全性,开发者在实现小程序授权登录功能时,需要注意以下几点:
不能直接将用户的openid等信息保存在小程序端,必须将其保存在开发者服务器上。
需要对用户的信息进行加密,保证其不被篡改。
需要设置有效期,定期更新token,避免被恶意利用。
29.web-view
在微信小程序中,web-view是一个嵌入网页的组件,可以用来展示第三方网页。具体来说,web-view可以将一个网页作为一个组件嵌入到小程序中,实现小程序内部展示外部网页的效果。
在使用web-view组件时,需要注意以下几点:
由于web-view是一个嵌入网页的组件,所以它可以加载任何网页。但是,由于小程序的安全机制,只有在符合一定条件下的网页才能被展示。具体来说,只有在经过微信官方认证的网站和已添加到小程序开发者工具中的网站才能被展示。
web-view组件是一个与小程序本身独立的组件,它不能直接调用小程序内部的函数或变量。如果需要在web-view组件中调用小程序内部的函数或变量,需要使用JavaScript Bridge技术,即通过postMessage函数实现两者之间的通信。
web-view组件的使用会影响小程序的性能,所以在使用时需要谨慎考虑。如果可能,应该尽量避免使用web-view组件,而是使用小程序内部的组件来实现相应的功能。