微信小程序常见面试题13道

1、bindtap 和 catchtap 区别 
        bindtap 不会阻止冒泡,catchtap 可以阻止冒泡。

2、小程序有哪些传递数据的方法
使用全局变量实现数据传递。在 app.js 文件中定义全局变量 globalData, 将需要存储的信息存放在里面;
使用 navigateTo 与 redirectTo 的时候,可以将数据拼接在 url 后面,然后在目标页面的 onLoad 生命周期中获取传递过来的值;
使用本地缓存 storage。
3、简述下 navigateTo(),redirectTo(),switchTab(),navigateBack(),reLaunch() 的区别
wx.navigateTo():保留当前页面,然后跳转到某个页面。但是不能跳转到 tabbar 页面;
wx.redirectTo() :关闭当前页面,然后跳转到某个页面。但是不能跳转到 tabbar 页面;
wx.switchTab():跳转到某个 tabbar 页面,并关闭其他所有非 tabbar 页面;
wx.navigateBack():关闭当前页面,返回到上一页面或目标页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层;
wx.reLaunch():关闭所有页面,打开某个页面。
4、小程序 wx:if 和 hidden 的区别
        wx:if 有更高的切换消耗,hidden 有更高的初始渲染消耗。如果频繁切换,用 hidden,如果在运行时条件不轻易改变则使用 wx:if。

5、在小程序中如何获取用户信息
        使用 button 并设置其属性:open-type="getUserInfo",在 bindgetuserinfo 绑定的回调函数中通过 e.detail 获取。

<button open-type="getUserInfo" "bindgetuserinfo"="eventhandle">获取用户信息</button>
6、小程序中如何实现分享功能
转发给朋友:监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,然后在页面的 onShareAppMessage() 函数中自定义转发内容。
分享到朋友圈:监听右上角菜单“分享到朋友圈”按钮的行为, 然后在页面的  onShareTimeline() 函数中自定义分享内容。
7、小程序中如何用像Vant一样的第三方组件
在命令行中执行:npm init,初始化项目
安装组件
在小程序开发工具中,选择【工具】菜单 -> 选择【构建 npm】命令
8、小程序如何实现父子组件传参
父传子:在子组件中定义属性,父组件在引用子组件的时候通过设置属性的值给子组件传值;
子传父:在组件中绑定一个自定义事件,在子组件中通过 triggerEvent('myevent', myEventDetail) 触发这个事件,给父组件传值。
9、如何实现下拉刷新
通过在 app.json(全局)或者页面的 json 中配置 "enablePullDownRefresh": true,开启下拉刷新;
也可使用 scroll-view 组件,当滚动到顶部会触发 scrolltoupper 事件,在这个事件里自定义实现下拉刷新。
10、小程序 onPageScroll 方法的使用注意什么
        由于此方法调用频繁,不需要时应该去掉,不要保留空方法,避免在此方法中频繁调用 setData() 或同步 API。

11、小程序视图渲染结束后回调
        使用 setData(data, callback),在 callback 回调方法中添加后续操作代码。

12、webview 的页面怎么跳转到小程序导航的页面
        小程序导航的页面可以通过 switchTab 跳转,但默认情况是不会重新加载数据的。若需加载新数据,则在 success 属性中处理:

success: function (e) {
    var page = getCurrentPages().pop();
    if (page == undefined || page == null) return;
    page.onLoad();
}
        webview 的页面,则通过:

wx.miniProgram.switchTab({
    url: '/pages/index/index'
})
13、webview 中的页面怎么跳回小程序中?
        webview 网页中可使用 JSSDK1.3.2 提供的接口返回小程序页面

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 
// javascript
wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params' })

  • 4
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序前端面试题包括以下几个方面的内容: 1. 关于wxml和标准的html的异同:wxml是微信小程序的组件标记语言,而html是网页的标记语言。它们的语法和标签有一些异同,但是主要的区别在于功能和用途上。wxml更加轻量级,专注于小程序的渲染和交互逻辑,而html更加强大,适用于网页开发的各种需求。 2. WXSS和CSS的异同:WXSS是微信小程序的样式语言,CSS是网页的样式表语言。它们的语法和属性有一些异同,但是主要的区别在于单位和选择器的限制上。WXSS使用rpx作为单位,可以根据屏幕宽度进行自适应,而CSS使用像素单位。另外,WXSS对选择器的支持较少,只支持基本的选择器,不支持复杂的选择器。 3. 微信小程序主要目录和文件的作用:微信小程序主要包括app.json、app.js、app.wxss、pages等目录和文件。app.json用来配置小程序的全局配置,app.js是小程序的全局逻辑文件,app.wxss是小程序的全局样式文件,pages目录用来存放小程序的页面文件。 4. 小程序的双向绑定和vue的异同:微信小程序使用setData方法来实现页面数据的双向绑定,而Vue使用v-model指令来实现数据的双向绑定。两者的实现原理和语法有一些异同,但是都可以实现数据的变化同步到页面上。 5. 微信小程序的相关文件类型:微信小程序的相关文件类型包括wxml、wxss、js、json、图片、音频、视频等。wxml文件是组件的模板文件,wxss文件是组件的样式文件,js文件是组件的逻辑文件,json文件是组件的配置文件,图片、音频、视频等文件是组件的资源文件。 6. 微信小程序的传值方法:微信小程序有多种传值方法,包括通过URL传参、通过setData方法传参、通过全局变量传参、通过Storage API传参等。 以上是微信小程序前端面试题的一部分内容,还有其他问题可以根据需要进一步探讨。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [【前端面试题——微信小程序】](https://blog.csdn.net/zz130428/article/details/129819232)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [2020微信小程序前端面试题汇总](https://blog.csdn.net/guopeisi/article/details/104890221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值