总结小程序开发中遇到的问题(小程序问题的解决方法)

小程序面试问题

1.bindtap和catchtap有什么区别？

绑定事件绑定不会阻止冒泡事件向上冒泡，而catch事件绑定可以阻止冒泡事件向上冒泡。

2.Js数组转换成字符串，强制转换成整数，转换成浮点数的功能有哪些？

Js提供了两个转换函数，parseInt（）和parseFloat（）。前者将值转换为整数，后者将值转换为浮点数。只有在String类型上调用这些方法，这两个函数才能正确运行；对于其他类型，将返回NaN（非数字）。

相关免费学习推荐:微信小程序开发

1、转换功能:

parseInt（）和parseFloat（）在判断字符串是否为数值之前都会仔细分析字符串。ParseInt（）方法首先查看位置0处的字符以确定它是否是有效数字；如果不是，该方法将返回NaN，并且不会继续执行其他操作。但是如果字符是一个有效的数字，该方法将查看位置1的字符并进行相同的测试。这个过程将一直持续到找到一个带有无效数字的字符为止，此时parseInt（）会将该字符之前的字符串转换为数字。

parse int（& quot；1234blue);//返回1234 parse int（& quot；0xA & quot);//返回10 parse int（& quot；22.5英寸);//返回22 parse int（& quot；蓝色& quot);//返回NaN2。强制类型转换

您还可以使用类型转换来处理转换值的类型。使用强制转换允许您访问特定的值，即使它是另一种类型。ECMAScript中可用的三种强制转换类型如下:Boolean（value）-将给定的值转换为Boolean；number（value）-将给定的值转换为数字（可以是整数或浮点数）；string（value）-将给定的值转换为字符串。

3.使用js变量的弱类型转换

举个小例子，一看，你就明白了。

& lt脚本& gtvar str= &amp#39;012.345及#39;；var x = str -0；x = x * 1；& lt/script & gt；上面的例子利用了js的弱类型，仅执行算术运算来实现从字符串到数字的类型转换，但仍然不建议使用这种方法。

3.简述微信小程序的相关文件类型。

Applet: pages ——index:index.js（页面逻辑）/index.wxml（页面结构）/index.wxss（页面样式表）/index.json（页面配置）

App.js小程序逻辑

App.json小程序公共设置

App.wxss小程序公共样式表

4.向applet传递值的方法有哪些？

1.设置id的方法标识跳转后传递的参数值；

2.使用data - xxxx的方法确定要传递的值。

微信小程序设置id的方法标识符来传递值。

在要跳转的项目处，设置一个id并将相应的键值分配给当前id，例如电影的id（后面是下一页的id以了解详细信息），例如:

之后，我们在js的bindtap的响应事件中获取它，并将其传递给下一个接口。

获取id通行证的值

通过e . current target . id；获取设置的id值，并通过设置全局对象传递数值，得到全局对象var app = getApp（）；//设置全局参数app。requestdetailed =请求访问传递的id；

提示:实际上，我们还可以检查我们在wxml中设置的每个项目的id值。

使用数据- xxxx的方法标识符传递该值。

通过使用data - xxxx的方法标识符来传递值，xxxx可以自己命名，例如data-key等等。

如何获取data-xxxx传递的值？

在js的bindtap响应事件中:

通过数据解析逐层查找数据，var id=e.target.dataset.id（以您的data-id命名）。

微信小程序如何跨页面获取值？

根据上述方法设置要传递的值。页面跳转后，我们需要获取下一页传递的数据（该数据在传递前已被设置为全局变量）。

在跳转的js页面上，接收传递的data detail.js

该值也是通过global amount获得的（也就是说，它与app.js中变量的值相同）。

var movieid=getApp（）。MovieDetailidconsole . log（movie id）；

5.wx.navigateto（）、wx.redirectto（）、wx.switchtab（）、wx.navigateback（）和wx.relaunch（）有什么区别？

微信小程序跳转页面

applet页面上有两种跳转，可以在wxml页面或js中:

1、在wxml页面中:

& lt导航器url = & quot../index/index&quot& gt跳转到新页面

2、在js页面中:

【注意】注意这里的两个关键词“应用程序中的页面”和“tabBar页面”。在app.json文件中的tabBar中注册的选项卡页面是“tabBar页面”，未在tabBar中注册的页面是“应用程序中的页面”。如下所示:主页是“应用内页面”，索引和日志页面是“标签栏页面”。

3.如果上述跳转遇到失败或无效跳转的问题，请访问以下链接:

Wx.navigateTo/wx.redirectTo是无效的。

6.如果需要用户授权，而用户选择拒绝授权，此时应该怎么做？

在微信小程序的开发中，当我们调用API wx . get userinfo（OBJECT）时，需要用户授权。但是如果用户拒绝授权，我们如何容纳用户拒绝授权并拥有更好的用户体验呢？

先看看这个接口的官方文档:

wx.getUserInfo（对象）

要获取用户信息，首先需要调用wx.login接口。

对象参数描述:

参数名称

类型

命令的

解释

带有凭据

布尔代数学体系的

不

是否带登录状态信息？

成功

功能

不

接口成功调用了回调函数。

失败

功能

不

无法调用接口的回调函数。

完成

功能

不

接口调用结束时的回调函数（无论调用成功还是失败都将执行该函数）。

1.提示1。提示:wx.getUserInfo接口需要用户授权，请兼容用户拒绝授权的场景。

我们只是想在用户点击拒绝时弹出一个提示框来提示用户，以改善用户体验。像下面这样。

要使用特定代码实现这一点，请在wx.getUserInfo的失败回调函数中编写弹出窗口，如下所示:

wx . get userinfo（{ success:function（resuser）{ console . log（success）}，fail:function（）{//调用微信弹窗接口wx . show modal（{ title:&:# 39；警告&；#39;，内容:& amp#39;您点击“拒绝授权”，将无法使用* * * * *的功能体验。请在10分钟后再次单击授权，或者删除小程序并重新输入。& amp#39;，success:function（RES）{ if（RES . confirm）{ console . log（& amp；#39;用户单击确定&；#39;）}}}）这样，用户得到了提示信息，但此时，用户仍然停留在页面上。如果一些显示信息仍然是针对用户的，并且授权只是在进行一些操作时进行验证，那么我们必须继续修改我们的代码，保存用户的登录状态并在其他地方使用它进行验证。

第一种思维方式:

这里保存的登录状态是这样的。将用户的登录信息传递到后台，并在后台保存用户信息。同时，在后台将open_id交换为一个SessionId，交换后的SessionId将作为登录状态验证进行缓存。

wx . get UserInfo（{ success:function（resuser）{ let userInfo = resuser . userinfothat . health API . log in（code，userInfo）。然后（logindata = & gt{//在这里，微信的请求被封装为Promiese style if（log in data。code = = = 0）{ var SessionId = logindata.data//调用微信。setStorage将交换的session id存储在本地缓存中。微信。set storage（&:# 39；sessionId & amp#39;，sessionId）。然后（（）= & gt{ that . global data . userinfo = userinfotype of CB = = & quot；函数&quot& amp& ampCB（that . global data . userinfo）}）} }）}，fail:function（）{ wx . show modal（{ title:& amp；#39;警告&；#39;，内容:& amp#39;您点击“拒绝授权”，将无法正常使用* * * * *的功能体验。请在10分钟后再次单击授权，或者删除小程序并重新输入。& amp#39;，success:function（RES）{ if（RES . confirm）{ console . log（& amp；#39;用户单击确定&；#39;）}}}}）这样我们将登录状态保存在SessionId中，每次登录时只需调用一个接口检查SessionId，如果检查失败则无需调整微信登录界面。这里不做扩展。

第二种思维方式:

在3.29微信小程序的更新版本中，增加了这样一个属性。

with credentials field base library 1 . 1 . 0版本开始支持，与较低版本需要兼容。

该字段的含义是调用wx . get userinfo（OBJECT）是否会带来登录状态的信息。

官方文件是这样解释的:

with credentials field base library 1 . 1 . 0版本开始支持，与较低版本需要兼容。

注意:当withCredentials为true时，要求以前调用过wx.login并且登录状态尚未过期。此时返回的数据将包含encryptedData、iv等敏感信息；当withCredentials为false时，不需要登录状态，并且返回的数据不包含encryptedData、iv和其他敏感信息。

成功返回参数描述:

参数

类型

解释

用户信息

目标

用户信息对象，不包含敏感信息，如openid。

原始数据

线

不包含敏感信息的原始数据字符串，用于计算签名。

签名

线

使用sha1（raw data+session key）获取一个字符串，该字符串用于检查用户信息。

加密数据

线

对于完整用户信息的加密数据，包括敏感数据，请参考加密数据解密算法了解详细信息。

希腊字母的第4个字母

线

关于加密算法的初始向量，请参考加密数据解密算法的详细信息。

注意:需要兼容微信低版本，向后兼容。

然后使用这个界面，我们可以直接获得登录状态，在其他需要验证登录的地方进行提示，并让用户在不需要授权的地方浏览小程序。

回到上一个问题，用户点击拒绝授权后，在某些操作中需要验证用户是否授权，并且会弹出交互信息，因此请使用上面的SessionId或带有凭据的登录状态来执行以下操作:

applyIn:函数applyIn（）{ if（wx . getstoragesync（& amp；#39;sessionId & amp#39;））{//验证wx . navigate to（{ URL:&；#39;家庭医生应用程序/家庭医生应用程序？Oid = & amp#39;+this . data . params . oid+& amp；#39;& amptitle = & amp#39;+this . data . params . title+& amp；#39;& amp服务城市= & amp#39;+ this.data.array

这样一个简单完整的前端微信小程序解决方案，如登录和授权、登录状态保存就完成了，它可以继续扩展到登录有效性、注销登录、用户权限等地方。

7.你通常打包可重用的方法吗？你会在哪个文件中编写可重用的方法？

事实上，您可以模拟一些框架，例如bootsrap，编写一个演示，并提取css和JS。js，js最好抽象成一个对象（构造函数）或者一个带参数的方法，然后你只需要声明对象，或者参数指定某个类或者id，就可以了。

用html文件编写有什么好处？独立有什么错吗？尤其是加载页面的时候，应该会有很多http请求，会不会拖慢加载速度？

8.分析小程序的优缺点？

小程序是微信生态发展过程中出现的新应用形态。小程序的小规模已经表明它在某种程度上不会很大，但它可以以相对简单的功能和相对简单的交互来满足一些服务需求，同时解决了长期以来App的多平台适配、多应用市场分布和高开发成本等诸多问题。因此，小程序【Bcc】依托微信平台和自身的“阅后即焚”功能，获得了许多年轻人的好评。

优势:

1）简单易用，只要你之前有HTML+CSS+JS的基础知识，写小程序基本没有大问题；当然，如果你知道ES6+CSS3，你可以编写一个简单而动态的小程序。

2）基本不需要考虑兼容性问题。只要微信能正常运行，就可以运行小程序；

3）基础组件库比较齐全:Toast、加载框、Picker、定位和地图、图像、输入、复选框、文本、TextArea、滚动视图等常用组件都有，使用相当简单方便；

4）发布审核高效，基本上上午发布审核下午通过，升级简单，支持灰度发布；

5）微信官方提供统计用户数量、频率等数据，以及小程序js脚本执行错误日志；

6）开发文档完善，开发社区活跃；

7）最近开通的Niu X功能，增加了webview组件，可以显示网页，相当酷炫；

8）支持插件开发，一些基础功能可以开发成插件供多个小程序调用；

缺点:

1）后台调试麻烦，因为API接口必须通过https请求，并且必须将公网地址即后台代码发布到远程服务器；当然，我们可以修改主机进行dns映射，将远程服务器转移到本地，或者启动tomcat远程调试；反正调试毕竟比较麻烦。

2）前台测试有很多坑，最头疼的是模拟器和真机不一致（之前遇到过一个案例，后面单独讲解）

3）实机测试，安卓和苹果的个别功能差异很大。我们小程序中的很多页面都有定位功能，模拟器和iphone的定位瞬间完成。但是安卓手机很疼，很久才显示“定位。。。”。后来别无选择，只能优化和减少定位数量。

4）原生组件显示不佳，例如textarea，它无法出现在滚动页面上，至于顶层，其他组件经常被它阻止。点击其他组件时，将进入文本区输入框；画布组件也是如此；

5）页面跳转深度不能超过5页，比较麻烦。有些复杂的页面跳转是无法实现的，但如果太复杂，也违背了小程序简单易用的原则。

6）官方文档说小程序会自动更新。事实上，在加载最新版本之前，通常需要先删除原始小程序，然后再次搜索以添加它。

7）页面渲染的稳定性有待提高。有些用户的页面出现了几次异常显示，整个页面被放大了好几倍。先删除原小程序再添加回来，重复几次才能正常显示；

8）js引用只能使用绝对路径，非常痛苦；基于安全原则和MINA框架，在小程序中使用js有很多限制，如new Function、eval、Generator、cookie和DOM。

9）开发工具bug多，效率相对较低。三天两头升级，解决了老问题的同时也引发了问题；文件搜索、资源定位和代码编辑远远落后于eclipse。经常出现a.js被修改为B.JS的情况。

9.将值设置为页面临时存储区（即数据）有几种方法？有什么区别？有什么区别？

1.使用QueryString变量QueryString是一种非常简单的传输值的方法，它可以在浏览器的地址栏中显示传输的值。当传递一个或多个安全性要求较低或结构简单的值时，可以使用此方法。但是对于传递数组或对象，不能使用此方法。下面是一个例子:a.aspx的C#代码

私有void Button1_Click（对象发送方，系统。EventArgs e）{ string s _ URL；s _ url = & quotb.aspx？name = & quot+标签1。文本；回应。重定向（s _ URL）；} b.aspx C#代码private void page _ load（对象发送方，eventargse）{ label 2 . text = request . query string。

11.如何分包装车？分包装车有什么优势？

分包加载的介绍大多数小程序将由几个功能组成，这些功能通常是独立的，但它们将依赖于一些公共逻辑，并且这些功能通常对应于几个独立的页面。那么小程序代码的包不一定是一个，可以根据功能的划分分成若干个子包，当需要某个功能时，加载该功能对应的子包。对于用户来说，小程序的加载过程变成了:1。首次启动时，下载小程序主包并显示主包中的页面；2.如果用户进入分包页面，则下载相应的分包。下载后，将显示分包页面。采用分包加载可以让小程序拥有更大的代码量，为开发者承载更多的功能和服务；对于用户来说，在不影响启动速度的情况下，可以更快地打开小程序并使用更多功能。在配置子包之前，开发人员需要计划每个子包需要容纳的内容。我们建议开发者按照功能划分的原则，将同一个功能下的页面和逻辑放在同一个目录下，并将一些跨功能之间的通用逻辑放在主包下，以确保子包引用这部分功能时必须存在这部分逻辑。在划分分包合同时，我们应注意以下事项:1。避免分包合同之间引用的耦合。由于子包加载是由用户的操作触发的，因此无法保证加载一个子包时一定存在另一个子包，这可能会导致JS逻辑异常，例如“xxx.js”未定义的错误”；2.一些常用的自定义组件需要放在主包中。分包的配置当分包的划分明确后，可以进行配置。这一步并不复杂。

假设支持分包的applet目录结构如下:

开发人员在app.json subPackages字段中声明项目分包结构:

子包加载的低版本兼容性问题微信6.6.0版本开始支持子包加载，但对于该版本以下的客户端，我们做了兼容性处理，因此开发者无需兼容旧版微信客户端。对于旧版本的客户端，编译后台会将所有分包打包成一个完整的包，旧版本的客户端仍将作为一个完整的包加载。所以在旧版微信客户端下，还是整包加载。建议开发人员尽量控制代码包的大小。目前对小程序包大小的限制:整个小程序所有包的大小不能超过4M，单个包/主包的大小不能超过2M。随着时间的推移，旧版本的覆盖范围减少，我们将考虑进一步扩大代码包的大小。

12.你在开发小程序的过程中遇到过哪些坑？你是怎么解决的？

1.我们使用app.json文件对微信小程序进行全局配置，确定页面文件的路径、窗口表示形式，设置网络超时，以及在设置多个选项卡时在页面中编写注释时报告错误。例如:

{ & quot页面& quot: 2.当json文件中没有任何内容时，您还应该添加一对大括号{}，否则您将得到一个错误 3。①在开发微信小程序时，我们使用app.json文件对微信小程序进行全局配置，确定页面文件的路径、显示窗口、设置网络超时、设置多个选项卡。以下是带有所有配置选项的简单配置app.json:

{//设置页面路径“pages & quot:【& quot页数/索引/索引& quot，& quot页面/日志/索引& quot】，//设置默认页面“window & quot:{ & quotnavigationBarTitleText & quot:& quot演示&quot} ，//设置底部选项卡“tabBar & quot:{ & quot列表& quot:【{ & quot页面路径& quot:& quot页数/索引/索引& quot，& quot文本& quot:& quot主页“}，{ & quot页面路径& quot:& quot页面/日志/日志& quot，& quot文本& quot:& quotlog“}】}，//设置网络超时“networkTimeout & quot:{ & quot请求& quot:10000下载文件& quot:10000 }，//设置是否打开调试模式“debug & quot:true}②但是在配置页面json文件时，只能配置和设置默认页面的窗口表示（即只能配置窗口），但此时可以直接省略窗口。如果您添加一个窗口，它将没有任何效果，也不会报告错误。以下是带有窗口配置选项post.json的简单配置:

注意:这是一个错误的拼写。

{ & quot窗口& quot:{ & quotnavigationBarBackgroundColor & quot:& quot# ffffff & quot，& quotnavigationBarTextStyle & quot:& quot黑色& quot，& quotnavigationBarTitleText & quot:& quot微信界面功能演示”，& quot背景色& quot:& quot# eeeeee & quot，& quotbackgroundTextStyle & quot:& quot光& quot}}注意:书写正确。

{ & quotnavigationBarBackgroundColor & quot:& quot# ffffff & quot，& quotnavigationBarTextStyle & quot:& quot黑色& quot，& quotnavigationBarTitleText & quot:& quot微信界面功能演示”，& quot背景色& quot:& quot# eeeeee & quot，& quotbackgroundTextStyle & quot:& quot光& quot}4.之前没关注过vertical-align:中高:40 rpxline -高度:40rpx设定了垂直剧之间的差异。这次我主要讲一下vertical-align: middle的代码如下:

& lt视图class = & quotpost -author -date & quot；& gt& ltimage class = & quotpost -作者& quotsrc = & quot../../images/avatar/1 . png & quot；& gt& lt/image & gt；& lttext class = & quotpost -日期& quot& gt2016年11月15日& lt/text & gt；& lt/view & gt；。post -作者{ width:60 rpx；高度:60rpxvertical-align:中间；}。post -date { margin -top:5 rpx；vertical-align:中间；/*高度:40rpxline -高度:40rpx*/}总结:①vertical-align:中间；将此元素放在父元素的中间。2当一个父元素中有多个子元素时，需要水平对齐几个子元素并且每个子元素都是垂直的在玩法中，为每个子元素设置vertical -align:middle 3 height:40 rpx。line -高度:40rpx您可以将文本垂直居中。

这几篇文章你可能也喜欢：

• 强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发入门课程)
• 学习如何用pixi.js开发微信游戏(pixi.js教程)
• 学习如何用pixi.js开发微信游戏(python开发微信游戏)。
• 强烈推荐几个简单实用的微信小程序开发小技巧(微信小程序开发软件教程)。
• 让微信小程序开发如鱼得水的方法（微信小程序开发详细教程）

本文由主机参考刊发，转载请注明：总结小程序开发中遇到的问题(小程序问题的解决方法) https://zhujicankao.com/114136.html