提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 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、微信小程序`生命周期`的理解?
- 18、微信小程序`模块化`?
- 19、微信小程序所有`api`放在哪里,简单介绍几个api?
- 20、`微信小程序应用`和`页面生命周期触发顺序`?
- 21、微信小程序如何`使用sass预编译`?
- 22、微信小程序`开发文档界面`都有哪些操作,列举几项?
- 23、微信小程序`自定义组件`的使用?
- 24、微信小程序`事件通道`的使用?
- 25、微信小程序如何使用`vant组件库`?
- 26、微信小程序`自定义组件父传子子传父`?
- 27、微信小程序`自定义组件生命周期`有哪些?
- 28、微信小程序`授权登录`流程?
- 29、`web-view`?
提示:以下是本篇文章正文内容,下面案例可供参考
1、请谈谈wxml
与标准的html
的异同?
WXML是
微信小程序
的模板语言,而HTML是web开发
中的标准模板语言,它们的主要异同点如下:
1、语法不同
:WXML的语法与HTML有很大的不同,WXML更加简洁,标签名字更加简洁,属性名称更加简单,标签之间的关系更加清晰。
2、标签不同
:WXML中的标签与HTML中的标签不同,WXML中的标签更加专注于小程序的功能,例如:view、text、image等标签。
3、数据的绑定方式不同
:WXML中的数据绑定方式与HTML中的不同,WXML中的数据绑定方式更加简单,可以直接在标签中使用{{}}来绑定数据。
4、样式不同
:WXML中的样式与HTML中的样式不相同,WXML中的样式更加简单,只需要在标签中使用class或style属性来绑定样式即可。
5、功能不同
:WXML中的功能更加专注于小程序的功能,例如支持事件绑定、数据绑定、条件渲染、列表渲染等功能。
2、请谈谈WXSS
和CSS
的异同?
WXSS
(Weixin Style Sheets)是微信小程序的样式表语言
,而CSS
(Cascading Style
Sheets)是Web开发中的样式表语言
。它们的主要异同点如下:
语法不同
:WXSS和CSS的语法有所不同,虽然两者都使用类似于CSS的选择器和属性,但是它们的一些语法细节有所不同。属性不同
:WXSS和CSS支持的属性也有所不同,因为微信小程序是在移动设备上运行的,所以WXSS支持一些移动设备特有的属性,例如rpx、px、vw、vh等。单位不同
:WXSS和CSS支持的单位不同,WXSS支持rpx、px、vw、vh等单位,而CSS支持px、em、rem等单位。兼容性不同
:WXSS只能在微信小程序中使用,而CSS可以在Web开发中使用。 总的来说,WXSS和CSS有很多相似之处,但是它们的一些语法和属性有所不同,因此在使用时需要注意它们的差异。
3、请谈谈微信小程序主要目录
和文件
的作用?
微信小程序主要目录和文件的作用如下:
app.js
:小程序的入口文件,用于注册小程序并监听小程序的生命周期函数。app.json
:小程序的全局配置文件,用于配置小程序的页面路径、窗口背景色、导航栏样式等。app.wxss
:小程序的全局样式文件,用于定义小程序的全局样式。pages
:小程序的页面目录,用于存放小程序的各个页面。page.js
:小程序的页面逻辑文件,用于处理小程序页面的逻辑。page.json
:小程序的页面配置文件,用于配置小程序页面的路径、导航栏样式、页面背景色等。page.wxml
:小程序的页面结构文件,用于定义小程序页面的结构。page.wxss
:小程序的页面样式文件,用于定义小程序页面的样式。utils
:小程序的工具目录,用于存放小程序的工具函数。wxss
:小程序的组件样式文件,用于定义小程序组件的样式。
4、请谈谈小程序的双向绑定和vue的异同?
小程序的双向绑定和Vue的双向绑定都是实现数据和视图之间的同步更新,但实现方式略有不同。
1、小程序的双向绑定
:是通过<input>
、<textarea>
、<checkbox>
、<radio>
等表单元素的value
属性和<picker>
、<slider>
等组件的value
属性来实现的。当用户在表单元素中输入或选择内容时,该内容会自动同步到对应的数据变量中,反之,当数据变量的值发生变化时,表单元素的值也会自动更新。这种双向绑定是基于数据绑定的,即通过data
属性将数据绑定到视图上。
2、Vue的双向绑定则是
:通过v-model
指令来实现的。v-model
指令可以用在<input>
、<textarea>
、<select>
等表单元素上,也可以用在自定义组件上。当用户在表单元素中输入或选择内容时,该内容会自动同步到对应的数据变量中,反之,当数据变量的值发生变化时,表单元素的值也会自动更新。Vue的双向绑定是基于数据驱动的,即通过data
属性将数据驱动视图的变化。
5、简单描述下微信小程序的相关文件类型?
微信小程序主要包含以下文件类型:
1、JSON文件
:用于描述小程序的配置信息,比如页面路径、窗口表现、网络超时时间、底部tab等
2、WXML文件
:类似于HTML的语法,用于描述小程序的结构,例如页面结构、组件、事件等
3、WXSS文件
:类似于css的语法,用于描述小程序的样式,例如小程序的样式、字体、颜色、布局等
4、JS文件
:用于描述小程序的逻辑、例如数据处理、事件响应、页面跳转等
5、图片、音频、视频等资源文件
:用于描述小程序的素材、例如图片、音频、视频等
6、小程序码
:用于扫描进入小程序的二维码
6、微信小程序有哪些传值
(传递数据)方法?
1、
URL传参
:通过url传参的方式,可以显示在不同页面之间传递数据,在跳转到目标页面的时候,可以在URL后边添加参数,目标页面可以通过’options.query’获取参数。
2、全局变量
:可以在app.js中定义全局变量,在不同的页面中都可以访问和修改这些变量。
3、Storage
:可以使用微信提供的Storage API,在不同的页面之间存储和读取数据。
4、EventChannel
:可以使用微信提供的EventChannel API,在不同的页面之间传递数据。
5、自定义组件传值
:可以通过自定义组件的属性和时间来传递数据。
6、页面栈
:可以通过页面栈的方式,在不同的页面之间传递数据,可以使用getCurrentPages()获取页面栈,然后通过setData()的方法修改数据
7、bindtap
和catchtap
的区别?
bindtap
和catchtap
都是小程序中用于绑定点击事件的属性,它们的区别在于事件冒泡和事件捕获的处理方式不同。
bindtap
:事件绑定在当前组件上,当点击事件被触发时,先触发当前组件的点击事件,然后再冒泡到父组件中,依次触发父组件的点击事件,直到根组件
catchtap
:事件绑定在当前组件上,当点击事件被触发时,先触发当前组件的点击事件,然后停止事件冒泡,不再触发父组件的点击事件。
8、简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别?
这些都是微信小程序中的页面跳转方法,它们的区别如下:
-
wx.navigateTo()
:保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack()
可以返回到原页面。 -
wx.redirectTo()
:关闭当前页面,跳转到应用内的某个页面,不允许返回到原页面。 -
wx.switchTab()
:跳转到应用内的某个 tabBar 页面,并关闭其他所有非 tabBar 页面。 -
wx.navigateBack()
:关闭当前页面,返回上一页面或多级页面。 -
wx.reLaunch()
:关闭所有页面,打开应用内的某个页面。
需要注意的是,这些方法都是异步的,不能保证跳转成功。同时,这些方法都有对应的同步版本,如 wx.navigateToSync()
、wx.redirectToSync()
等,但同步版本的使用会阻塞页面,不推荐使用。
9、微信小程序与H5的区别?
微信小程序和H5都是基于Web技术开发的应用,但是它们有以下几个区别:
-
运行环境不同:
微信小程序是在微信客户端内部运行的,而H5是在浏览器中运行的。 -
开发语言不同:
微信小程序使用的是微信自己的开发语言WXML、WXSS和JavaScript,而H5使用的是HTML、CSS和JavaScript。 -
功能限制不同:
微信小程序的功能受到了一定的限制,例如不能访问本地文件、不能使用所有的HTML标签等,而H5则没有这些限制。
4. 用户体验不同:
微信小程序的加载速度更快,用户体验更加流畅,而H5则需要通过网络加载,速度相对较慢。
推广方式不同:
微信小程序可以通过微信的社交关系链进行推广,而H5则需要通过搜索引擎等方式进行推广。
总的来说,微信小程序
更适合开发一些简单的应用,例如小游戏、工具类应用等,而H5
则更适合开发一些复杂的应用,例如电商平台、新闻资讯等。
10、小程序和Vue写法的区别?
小程序和Vue的写法有很大的区别,主要表现在以下几个方面:
-
语法不同:
小程序使用的是WXML、WXSS和JS,而Vue使用的是HTML、CSS和JSX。 -
数据绑定方式不同:
小程序使用的是双向数据绑定,而Vue使用的是单向数据流。
3. 组件化方式不同:
小程序的组件化方式是通过Component实现的,而Vue则是通过Vue.component实现的。
-
生命周期不同:
小程序和Vue的生命周期有很大的区别,小程序的生命周期包括onLoad、onShow、onReady、onHide、onUnload等,而Vue的生命周期包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed等。 -
路由方式不同:
小程序的路由方式是通过wx.navigateTo、wx.redirectTo、wx.switchTab等实现的,而Vue则是通过Vue Router实现的。
总的来说,小程序和Vue的写法有很大的区别,需要根据具体的需求选择合适的框架进行开发。
11、rpx
的理解?
1、RPX是一个区块链项目
,旨在为知识产权和数字资产提供去中心化的管理和保护
。
2、RPX的主要目标是解决知识产权和数字资产领域中存在的问题,比如像侵权、盗版、欺诈等。
3、RPX是通过区块链技术和智能合约法实现去中心化的管理和保护,使得知识产权和数字资产的交易更加安全透明和高效。同时,RPX还提供了一种新型的知识产权和数字资产交易模式,使得交易更加便捷灵活。
12、微信小程序可以进行dom操作
吗?
可以进行DOM操作,但是与传统的网页DOM操作略有不同
1、由于小程序的渲染层和逻辑层是分离的,不能直接操作DOM
2、小程序提供了类似于DOM的WXML和WXSS语言,以及对应的组件和API,可以实现类似于DOM操作的效果
3、例如:可以提供setData方法来更新页面数据,从而实现动态的·渲染页面的效果。同时,小程序也提供了一些组件,比如像button、input、view等,可以通过设置组件的属性和事件来实现类似于DOM操作的效果。
13、微信小程序自定义tabbar
的理解?
1、微信小程序自定义tabbar是指开发者可以自己设计和实现小程序底部导航栏的样式和功能。
2、在小程序开发中,底部导航栏是一个非常重要的组件,他可以让用户快速切换不同的页面,提高用户的体验
3、小程序提供了默认的tabbar组件,但是样式和功能是固定的,不能满足所有的开发者的需求。
4、微信小程序提供了自定义tabbar的功能,让开发者可以根据自己的要求和设计来实现底部导航栏,可以自由选择底部导航栏的样式,颜色和图标文字等。
5、自定义的tabbar可以让小程序更加个性化和专业化,来提高用户的体验和用户粘性。
14、微信小程序怎么缓存数据
?
微信小程序可以使用小程序提供的缓存API来缓存数据,具体步骤如下:
- 使用
wx.setStorageSync(key,data)
的方法将数据存储到本地的缓存中,其中key为缓存数据的键名,data为缓存数据的值。 - 使用
wx.getStorageSync(key)
的方法可以缓存数据,其中key为缓存数据的键名。 - 使用
wx.removeStorageSync(key)
方法可以删除指定的缓存数据,其中key为缓存数据的键名。 - 使用
wx.clearStorageSync()
方法可以清除所有的缓存数据
注意:小程序的本地缓存数据大小限制为10MB,超过限制就会自动清除旧的数据,因此,需要根据实际的情况合理使用缓存API
15、微信小程序怎么进行网络请求
?
微信小程序可以使用wx.request()方法进行网络请求:
wx.request({
url: '接口地址',
data: {}, // 请求参数
header: {}, // 请求头
method: 'GET', // 请求方法
dataType: 'json', // 返回的数据格式
responseType: 'text', // 响应的数据类型
success: function(res) {
// 请求成功的回调函数
},
fail: function(res) {
// 请求失败的回调函数
},
complete: function(res) {
// 请求完成的回调函数
}
})
16、微信小程序路由跳转
以及传参
如何实现?
1、路由跳转的几种方式
1、 wx.navigateTo():
保留当前页面,跳转到应用的某个页面,但是不能跳转到tabbar的页面
//保留当前页面,跳转到应用内的某个页面
wx.navigateTo({
url: '/pages/detail/detail?id=1'
})
2、wx.redirectTo():
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
//保留当前页面,跳转到应用内的某个页面
wx.navigateTo({
url: '/pages/detail/detail?id=1'
})
3、wx.switchTab():
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(不可以携带参数)
wx.switchTab({
url: `/pages/detail/detail`,
})
4、wx.navigateBack():
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
//应用在目标页面, delta值为1 ,表示跳转上一页,2表示跳两级
wx.navigateBack({
delta:1
})
5、wx.reLaunch():
关闭所有页面,打开到应用内的某个页面
wx.reLaunch({
url: '/pages/detail/detail'
})
传参
wx.navigateTo
方法用于打开新页面,新页面可以通过返回按钮返回上一页;而 wx.redirectTo
方法用于关闭当前页面,跳转到应用内的某个页面。
这两个方法都可以传递参数,可以通过 url
参数传递。例如:
// 跳转到新页面,并传递参数
wx.navigateTo({
url: '/pages/detail/detail?id=123&name=apple'
})
// 关闭当前页面,跳转到应用内的某个页面,并传递参数
wx.redirectTo({
url: '/pages/detail/detail?id=123&name=apple'
})
在新页面中,可以通过 onLoad
方法获取传递过来的参数。例如:
Page({
onLoad: function (options) {
console.log(options.id) // 输出 123
console.log(options.name) // 输出 apple
}
})
在页面中也可以通过 getCurrentPages
方法获取当前页面栈,从而获取上一个页面的参数。例如:
// 获取当前页面栈
var pages = getCurrentPages()
// 获取上一个页面的参数
var prevPage = pages[pages.length - 2]
console.log(prevPage.options.id) // 输出上一个页面传递过来的 id 参数
console.log(prevPage.options.name) // 输出上一个页面传递过来的 name 参数
17、微信小程序生命周期
的理解?
微信小程序生命周期是指
小程序从启动到关闭
的整个过程中,各个阶段所执行的函数和事件。通常包括以下几个阶段:
-
onLaunch:
小程序初始化时执行,只执行一次,用于全局变量的初始化和获取用户信息等操作。 -
onShow:
小程序启动或从后台进入前台时执行,可以获取小程序的启动参数和场景值,以及进行页面渲染等操作。 -
onHide:
小程序从前台进入后台时执行,可以进行一些数据保存和清理等操作。 -
onUnload:
小程序关闭时执行,可以进行一些数据保存和清理等操作。 -
onPageLoad:
页面加载时执行,可以进行一些数据初始化和获取等操作。 -
onPageShow:
页面显示时执行,可以进行一些数据渲染和交互等操作。 -
onPageHide:
页面隐藏时执行,可以进行一些数据保存和清理等操作。 -
onPageUnload:
页面卸载时执行,可以进行一些数据保存和清理等操作。
以上生命周期函数的执行顺序为:onLaunch -> onShow -> onPageLoad -> onPageShow -> onHide -> onPageHide -> onPageUnload。
在小程序的整个生命周期中,开发者可以根据需要在不同的生命周期函数中执行相应的操作,以实现小程序的功能和交互效果。
18、微信小程序模块化
?
微信小程序的模块化可以通过使用Component
和Behavior
来实现
component
是小程序中的组件
,可以将一个页面拆分成多个组件,每个组件都有自己的wxml、wxss、js和json文件。组件可以在多个页面中进行复用,提高代码的复用性和可维护性。Behavior
是一种可复用的代码片段
,可以被多个组件引用,通过Behavior,可以将组件的公共逻辑抽离出来,减少代码的冗余,提高代码的可读性和可维护性。- 使用
Component
和Behavior
可以实现小程序的模块化开发,提高代码的复用性和可维护性。
19、微信小程序所有api
放在哪里,简单介绍几个api?
微信小程序的API文档可以在微信官方开发者文档中找到,具体链接为:小程序官网
以下是几个常用的API:
1. wx.request:
发起网络请求,可以用于获取远程数据。
-
wx.navigateTo:
保留当前页面,跳转到应用内的某个页面。 -
wx.getStorageSync:
同步获取本地缓存数据。 -
wx.getUserInfo:
获取用户信息,需要用户授权。
5. wx.showModal:
显示模态对话框,用于提示用户或获取用户确认。
6. wx.showToast:
显示消息提示框,用于短时间内显示提示信息。
-
wx.createAnimation:
创建动画实例,用于实现动画效果。 -
wx.createCanvasContext:
创建画布上下文,用于绘制图形。
20、微信小程序应用
和页面生命周期触发顺序
?
微信小程序应用和页面的生命周期函数触发顺序如下:
- 应用生命周期函数
onLaunch:
小程序初始化时触发,全局只触发一次。onShow:
小程序启动或从后台进入前台显示时触发。onHide:
小程序从前台进入后台时触发。onError:
小程序发生脚本错误或 API 调用失败时触发。
- 页面生命周期函数
onLoad
:页面加载时触发,一个页面只会触发一次。onShow:
页面显示时触发。onReady:
页面初次渲染完成时触发。onHide:
页面隐藏时触发。onUnload:
页面卸载时触发。
需要注意的是,当小程序从后台进入前台时,会先触发应用的onShow
生命周期函数,然后再触发当前页面的 onShow
生命周期函数。当小程序从前台进入后台时,会先触发当前页面的 onHide
生命周期函数,然后再触发应用的 onHide
生命周期函数。
21、微信小程序如何使用sass预编译
?
要在微信小程序中使用Sass预编译,需要进行以下步骤:
1. 安装Sass
在命令行中运行以下命令安装Sass:
npm install -g sass
2. 创建Sass文件
在小程序项目中创建一个Sass文件,例如app.scss
。
3. 编译Sass文件
在命令行中进入小程序项目的根目录,运行以下命令编译Sass文件:
sass app.scss app.wxss
这将把app.scss
文件编译成app.wxss
文件。
4. 引入编译后的wxss文件
在小程序页面中引入编译后的app.wxss
文件,例如:
<import src="app.wxss"/>
5. 在小程序中使用Sass
现在你可以在小程序中使用Sass了。在Sass文件中编写样式,然后编译成wxss文件后引入即可。
注意:每次修改Sass文件后都需要重新编译成wxss文件才能在小程序中生效。可以使用watch命令监听Sass文件的变化,自动编译成wxss文件。例如:
sass --watch app.scss:app.wxss
22、微信小程序开发文档界面
都有哪些操作,列举几项?
微信小程序开打文档界面主要有以下操作:
- 搜索框:可以输入关键词搜索相关文档
- 目录栏:包含了小程序开发的各个方面,如框架、组件、api、点击可以展开或者收起子目录
- 内容区:展示了所选目录下的文档内容,包括详细的说明、示例代码等
- 代码区:展示了示例代码,可以复制到自己的项目中进行使用
- 评论区:用户可以在这里提问或分享自己的经验,也可以查看其他用户的评论和回复
- 反馈按钮:用户可以通过这个按钮向官方反馈文档中的错误或不足之处
- 语言切换:用户可以选择不同的语言版本,包括中文、英文等
- 主题切换:用户可以选择不同的主题,包括明亮和黑暗两种
23、微信小程序自定义组件
的使用?
微信小程序自定义组件是一种可以重复使用的组件,可以在多个页面中使用,提高代码的复用性和可维护性
。下面是自定义组件的使用步骤:
1. 创建自定义组件
在小程序项目中,创建一个新的文件夹,命名为“components”,在该文件夹下创建一个新的文件夹,命名为自定义组件的名称,例如“my-component”。在该文件夹下创建两个文件:一个是“my-component.wxml”
文件,用于编写组件的结构;另一个是“my-component.js”文件,用于编写组件的逻辑。
2. 编写组件的结构和逻辑
在“my-component.wxml”
文件中,编写组件的结构,可以使用小程序提供的组件或自定义的组件。在“my-component.js”
文件中,编写组件的逻辑,包括组件的属性、方法和生命周期函数等。
3. 注册自定义组件
在需要使用自定义组件的页面的json文件中,添加“usingComponents”
字段,并在该字段中注册自定义组件,例如:
{
"usingComponents": {
"my-component": "/components/my-component/my-component"
}
}
其中,“my-component”是自定义组件的名称,“/components/my-component/my-component”
是自定义组件的路径。
4. 使用自定义组件
在需要使用自定义组件的页面的wxml文件中,使用自定义组件的标签,并设置组件的属性,例如:
<my-component title="这是一个自定义组件"></my-component>
其中,“title”是自定义组件的属性,可以在组件的js文件中通过“this.properties.title”获取。
24、微信小程序事件通道
的使用?
微信小程序事件通道是一种可以在小程序页面之间传递数据的机制。通过事件通道,我们可以在不同的页面之间传递数据,实现页面之间的通信。
事件通道的使用步骤如下:
在发送方页面中,使用
wx.getStorageSync()
或wx.getStorage()
方法获取需要传递的数据。在发送方页面中,使用
wx.navigateTo()
或wx.redirectTo()
方法跳转到接收方页面。在接收方页面中,使用
onLoad()
方法获取从发送方页面传递过来的数据。在接收方页面中,使用
wx.navigateBack()
方法返回到发送方页面。
具体实现步骤如下:
- 在发送方页面中,使用
wx.getStorageSync()
或wx.getStorage()
方法获取需要传递的数据。
// 发送方页面
let data = wx.getStorageSync('data');
- 在发送方页面中,使用
wx.navigateTo()
或wx.redirectTo()
方法跳转到接收方页面。
// 发送方页面
wx.navigateTo({
url: '/pages/receiver/receiver'
})
- 在接收方页面中,使用
onLoad()
方法获取从发送方页面传递过来的数据。
// 接收方页面
onLoad: function (options) {
let data = options.data;
}
- 在接收方页面中,使用
wx.navigateBack()
方法返回到发送方页面。
// 接收方页面
wx.navigateBack({
delta: 1
})
25、微信小程序如何使用vant组件库
?
使用vant组件库需要先在微信小程序中安装vant-weapp
组件库。具体步骤如下:
1. 在微信开发者工具中打开小程序项目,进入项目根目录。
2. 在命令行中执行以下命令安装vant-weapp组件库:
npm install vant-weapp -S --production
安装完成后,项目根目录下会多出一个node_modules
文件夹,其中包含了vant-weapp组件库的代码。
3. 在微信开发者工具中,右键点击miniprogram
目录,选择新建页面
,输入页面名称,点击确定。
- 在新建的页面的
.json
文件中添加以下代码引入vant-weapp组件库:
{
"usingComponents": {
"van-button": "/node_modules/vant-weapp/dist/button/index",
"van-cell": "/node_modules/vant-weapp/dist/cell/index",
"van-cell-group": "/node_modules/vant-weapp/dist/cell-group/index"
}
}
这里以van-button
、van-cell
、van-cell-group
三个组件为例,如果需要使用其他组件,可以在usingComponents
中添加相应的组件路径。
5. 在新建的页面的.wxml
文件中使用vant-weapp组件库的组件
26、微信小程序自定义组件父传子子传父
?
微信小程序中,自定义组件的父子组件之间的数据传递可以通过属性传递和事件传递来实现。
1. 父组件向子组件传递数据
在父组件中,可以通过在自定义组件标签上添加属性的方式来向子组件传递数据。例如:
<!-- 父组件 -->
<custom-component custom-data="{{data}}"></custom-component>
在子组件中,可以通过 properties
属性来声明接收父组件传递的数据。例如:
<!-- 子组件 -->
<view>{{customData}}</view>
Component({
properties: {
customData: {
type: String,
value: ''
}
}
})
- 子组件向父组件传递数据
在子组件中,可以通过 triggerEvent
方法来触发一个自定义事件,并传递数据给父组件。例如:
<!-- 子组件 -->
<button bindtap="onTap">点击按钮</button>
Component({
methods: {
onTap() {
const data = '子组件传递的数据';
this.triggerEvent('customEvent', data);
}
}
})
在父组件中,可以通过在自定义组件标签上绑定自定义事件的方式来监听子组件触发的事件,并获取子组件传递的数据。例如:
<!-- 父组件 -->
<custom-component bind:customEvent="onCustomEvent"></custom-component>
Page({
onCustomEvent(event) {
const data = event.detail;
console.log('子组件传递的数据:', data);
}
})
27、微信小程序自定义组件生命周期
有哪些?
微信小程序自定义组件的生命周期包括以下几个:
-
created:
组件实例刚刚被创建时触发,此时组件数据还未被初始化。 -
attached:
组件被添加到页面节点树中时触发,此时组件数据已经初始化。 -
ready:
组件渲染完毕并且可以和视图层进行交互时触发。 -
moved:
组件被移动到另外一个节点时触发。 -
detached:
组件被从页面节点树中移除时触发。 -
error:
组件发生错误时触发。
需要注意的是,自定义组件的生命周期和页面的生命周期不完全一致,例如自定义组件没有onLoad和onUnload生命周期函数。
28、微信小程序授权登录
流程?
微信小程序授权登录流程如下:
-
用户打开小程序,点击登录按钮,小程序调用
wx.login
接口获取临时登录凭证code。 -
小程序将code发送给开发者服务器。
-
开发者服务器使用code调用微信服务器的接口,获取用户的openid和session_key。
-
开发者服务器将用户的openid和session_key存储在服务器端,并生成一个自定义登录态token,将token返回给小程序。
-
小程序将token存储在本地,用于后续的请求验证。
-
用户再次打开小程序时,小程序将token发送给开发者服务器进行验证,验证通过后返回用户信息。
-
小程序使用用户信息进行业务逻辑处理。
需要注意的是,微信小程序授权登录过程中,用户的敏感信息只会在用户确认授权的情况下才会被获取到,开发者需要遵守相关法律法规,妥善保管用户信息。
29、web-view
?
1、Web View(网页视图)是一种在移动应用程序中嵌入网
的技术。它允许开发人员在应用程序中显示网页内容,而无需用户离开应用程序。
2、Web View 可以用于显示网页、表单、地图、视频和其他类型的网页内容。
3、在 Android 和 iOS 平台上,Web View 是一个内置的组件,可以通过代码或 XML 布局文件进行配置和使用。