行业知识
微信小程序基础面试题【29道】
这里写目录标题
- 1、请谈谈wxml与标准的html的异同?
- 2、请谈谈WXSS和CSS的异同?
- 3、请谈谈微信小程序主要目录和文件的作用?
- 4、请谈谈小程序的双向绑定和vue的异同?
- 5、简单描述下微信小程序的相关文件类型?
- 6、微信小程序有哪些传值(传递数据)方法?
- 7、bindtap和catchtap的区别?
- 8、简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别?
- 9、微信小程序与H5的区别?
- 10、小程序和Vue写法的区别?
- 11、rpx的理解?
- 12、微信小程序可以进行dom操作吗?
- 13、微信小程序自定义tabbar的理解?
- 14、微信小程序怎么缓存数据?
- 15、微信小程序怎么进行网络请求?
- 16、微信小程序路由跳转以及传参如何实现?
- 17、微信小程序生命周期的理解?
- App生命周期
- Page生命周期
- Component生命周期
- 18、微信小程序模块化?
- 19、微信小程序所有api放在哪里,简单介绍几个api?
- 20、微信小程序应用和页面生命周期触发顺序?
- 21、微信小程序如何使用sass预编译?
- 22、微信小程序开发文档界面都有哪些操作,列举几项?
- 23、微信小程序自定义组件的使用?
- 24、微信小程序事件通道的使用?
- 25、微信小程序如何使用vant组件库?
- 26、微信小程序自定义组件父传子子传父?
- 父传子
- 子传父
- 27、微信小程序自定义组件生命周期有哪些?
- 28、微信小程序授权登录流程?
- 29、web-view
1、请谈谈wxml与标准的html的异同?
wxml 是微信小程序的一种页面渲染语言,类似于 HTML,但也有一些不同之处。
()以下是 wxml 与标准的 HTML 的异同:
相同点:
()- 两者都是页面渲染语言,用于描述网页的结构和内容。
- 两者都使用标签来组织内容。
- 两者都支持使用 CSS 样式表来控制页面的外观和布局。
- 两者都支持事件处理,可以通过绑定事件来响应用户的操作。
不同点:
- 标签不同:wxml 中的标签更多地与微信小程序的 API 相关,比如 、、 等,而标准的 HTML 则更多地包含一些常见的元素,比如 、、 等。
- 属性不同:wxml 的标签属性与 HTML 的标签属性也有一些不同,比如 wxml 中的 wx:if、wx:for 等属性是专门为微信小程序开发设计的,而 HTML 中则没有这些属性。
- 样式不同:wxml 中的样式是使用 wxss(微信小程序样式表) 来定义的,而 HTML 中则是使用标准的 CSS 样式表来定义的。
- 盒子模型不同:wxml 中的盒子模型与标准的 HTML 盒子模型也略有不同,主要体现在盒子的宽度和高度的计算方式上。
总的来说,wxml 和 HTML 相似,但也有自己的特点和差异,需要根据具体的开发需求来选择使用哪种语言。
2、请谈谈WXSS和CSS的异同?
WXSS(WeChat Style Sheet)是微信小程序的样式表语言,它与标准的 CSS(Cascading Style Sheets)有以下异同:
相同点:
- 两者都用于定义页面元素的样式,包括颜色、字体、布局、边框等方面。
- 两者都支持选择器、属性、值等基本语法。
- 两者都支持继承、层叠等特性。
不同点:
- 单位不同:CSS 使用像素(px)、百分比(%)等单位来表示长度或大小,而 WXSS 使用 rpx(微信小程序专用的长度单位),rpx 会根据屏幕宽度进行自适应调整,适应不同设备的屏幕尺寸。
- 可用属性不同:WXSS 与 CSS 支持的属性并不完全一致,例如 WXSS 中有专门针对微信小程序的一些属性,如 text-decoration-line(下划线)、-webkit-line-clamp(文本行数)等。
- 属性值不同:WXSS 与 CSS 中某些属性的取值方式有所不同,例如 WXSS 中的 color 属性可以使用全局变量 $color 来表示颜色,而 CSS 中没有这样的机制。
- 选择器不同:WXSS 中的选择器与 CSS 中的选择器有所不同,例如 WXSS 中的 ::after 伪元素不支持,但是支持一些特定的微信小程序的选择器,如 page、view 等。
总的来说,WXSS 与 CSS 在使用上有一些不同,但是基本的语法和概念都是相似的。如果你已经熟悉了 CSS,那么上手 WXSS 也应该相对容易。
3、请谈谈微信小程序主要目录和文件的作用?
微信小程序的主要目录和文件包括:
- app.json:微信小程序的全局配置文件,包括小程序的名称、页面路径、窗口配置等信息。
- app.js:微信小程序的入口文件,用于定义小程序的生命周期函数、全局变量、全局方法等。
- app.wxss:微信小程序的全局样式表,用于定义小程序的全局样式。
- pages/:微信小程序的页面目录,用于存放小程序的页面文件。
- utils/:微信小程序的工具目录,用于存放小程序的工具函数、公共样式等。
各文件的主要作用如下:
- app.json:定义小程序的全局配置信息,例如小程序的窗口配置、导航栏设置、页面路径等。
- app.js:定义小程序的全局逻辑,例如生命周期函数、全局变量、全局方法等。
- app.wxss:定义小程序的全局样式,例如字体、颜色、布局等。
- pages/:存放小程序的页面文件,每个页面通常由一个 wxml 模板文件、一个对应的 js 逻辑文件、一个 wxss 样式文件和一个 JSON 配置文件组成。
- utils/:存放小程序的工具函数、公共样式等,方便在多个页面中重复使用。
4、请谈谈小程序的双向绑定和vue的异同?
小程序的双向绑定和 Vue 的双向绑定有以下异同:
相同点:
- 都是实现数据的双向绑定,即数据的改变可以自动更新到视图,视图的改变也可以自动更新到数据。
- 都是通过数据劫持的方式实现的,即通过监听数据的变化来更新视图。
不同点:
- 实现方式不同:小程序的双向绑定是基于数据绑定和事件绑定实现的,而 Vue 的双向绑定则是基于数据劫持和发布/订阅模式实现的。
- 语法不同:小程序的双向绑定使用的是类似于 AngularJS 的 ng-model 的语法,即 value="{{data}}" bindinput="setData",而 Vue 的双向绑定使用的是 v-model 语法,即 v-model="data"。
- 性能不同:Vue 的双向绑定通过数据劫持实现,可以精确地追踪数据的变化并更新视图,而小程序的双向绑定则需要通过事件绑定和数据绑定实现,相对来说效率会稍低一些。
- 依赖不同:Vue 的双向绑定依赖于 Vue.js 框架,而小程序的双向绑定是微信小程序原生支持的功能,不需要额外的框架支持。
综上所述,虽然小程序和 Vue 都支持双向绑定,但是实现方式和语法有所不同,并且在性能和依赖方面也存在一定的差异。如果你熟悉 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().globalData 获取数据。
-
事件传递:可以通过触发事件来传递数据,例如在子组件中触发一个自定义事件,并通过事件对象传递数据,在父组件中监听该事件并获取传递的数据。
-
页面栈传递:可以使用小程序提供的页面栈来传递数据,通过 getCurrentPages 方法获取页面栈的实例,使用 data 属性存储数据,在目标页面中使用 options 获取数据。
需要根据实际业务需求选择合适的传值方式,上述方法中,URL 参数传递、Storage 存储、全局数据传递等方式适用于不同页面之间的数据传递,而事件传递和页面栈传递则适用于组件之间和同一页面的数据传递。
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的区别?
微信小程序和H5是两种不同的技术方案,它们之间有以下几点区别:
-
开发语言和框架:微信小程序使用的是基于JavaScript的WXML和WXSS语言,使用微信开发者工具进行开发和调试。而H5使用的是HTML、CSS和JavaScript等技术,并使用网页浏览器进行开发和调试。
-
执行环境和性能:微信小程序的执行环境是微信客户端,可以获得更好的性能表现和用户体验,因为它可以直接使用微信客户端提供的能力,如地理位置、支付等。而H5则需要在浏览器中运行,受限于浏览器的性能和能力。
-
可访问性:微信小程序只能在微信客户端中访问,需要用户下载并安装微信客户端,而H5则可以通过任何支持浏览器的设备访问,包括电脑、手机、平板等。
-
可扩展性:微信小程序相对于H5来说,其功能和扩展性受到限制。小程序必须符合微信小程序的规范和限制,并且必须经过微信审核才能发布。而H5则更加灵活,可以随意扩展和定制,没有限制。
总的来说,微信小程序是一种轻量级应用,其主要优势在于用户体验和性能方面,适用于需要更加稳定和高效的应用场景。而H5则更加灵活和可扩展,适用于需要自由发挥的应用场景。
10、小程序和Vue写法的区别?
小程序和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的全称是"responsive pixel",它是微信小程序中的一种相对单位,代表屏幕宽度的百分之一。在小程序中,设计师可以使用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预编译?
微信小程序使用 Sass 预编译,可以提高 CSS 的可维护性和复用性。下面是使用 Sass 预编译的步骤:
-
安装 Node.js 和 npm。
-
在项目根目录下创建 package.json 文件,输入以下代码:
{ "name": "your-app-name", "version": "0.1.0", "description": "Your App Description", "scripts": { "build:wxss": "node-sass --output-style compressed -o dist/css src/scss" }, "dependencies": { "node-sass": "^4.14.1" }}- 运行以下命令安装依赖:
npm install
-
在项目根目录下创建一个 src/scss 目录,将你的 Sass 文件放入其中。
-
在 app.wxss 中导入编译后的 css 文件:
@import '../dist/css/app.wxss';
- 运行以下命令编译 Sass 文件:
npm run build:wxss
- 运行以下命令监听 Sass 文件变化,自动编译:
node-sass --output-style compressed -o dist/css src/scss --watch
通过以上步骤,就可以在微信小程序中使用 Sass 预编译了。
22、微信小程序开发文档界面都有哪些操作,列举几项?
微信小程序开发文档界面提供了丰富的操作和功能,下面列举几项:
-
搜索框:可以输入关键字搜索相关内容。
-
导航栏:提供了分类导航,方便查找对应的开发文档。
-
侧边栏:提供了开发者工具、API、组件等相关链接。
-
示例代码:提供了丰富的示例代码,帮助开发者更快地上手。
-
快速链接:提供了一些常用链接,如开发工具下载链接、小程序审核指南等。
-
在线工具:提供了一些在线工具,如代码压缩、图片压缩等。
-
版本切换:可以切换不同版本的开发文档。
-
反馈按钮:提供了反馈入口,方便开发者向官方反馈问题。
通过这些操作和功能,开发者可以更加方便地查找和使用开发文档,加速开发进程。
23、微信小程序自定义组件的使用?
微信小程序提供了自定义组件的功能,可以将一些通用的UI组件封装起来,方便在不同的页面中复用,提高开发效率。下面是自定义组件的使用步骤:
-
创建自定义组件:在小程序项目中创建一个自定义组件,通常包含两个文件:组件名.wxml和组件名.js。其中,组件名.wxml定义组件的结构,组件名.js定义组件的行为和数据。
-
注册自定义组件:在需要使用自定义组件的页面或组件中,通过usingComponents字段声明并注册该自定义组件。例如,在pageA页面中需要使用名为my-component的自定义组件,则需要在pageA.json中进行如下声明:
{ "usingComponents": { "my-component": "/components/my-component/my-component" }}其中,my-component是自定义组件的名称,/components/my-component/my-component表示自定义组件的路径。
- 使用自定义组件:在页面或组件中使用已注册的自定义组件。例如,在pageA页面中,可以使用以下代码引用my-component组件:
-