总结小程序开发中遇到的问题(总结小程序开发中遇到的问题)

小程序面试问题

1.bindtap和catchtap有什么区别？

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

2.把Js数组变成字符串，强制变成整数，浮点数有什么作用？

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

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

1、转换功能:

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

parse int( ；1234蓝色 );//返回1234 parse int( ；0xA );//返回10 parse int( ；22.5 gt；);//返回22 parse int( ；蓝色 );//返回NaN2。强制类型转换

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

3.js变量的弱类型转换

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

lt脚本 gtvar str = # 39012.345 '；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 applet公共样式表

4.小程序有哪些传递参数值的方法？

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

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

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

在要跳转的项目处，设置一个id，并将相应的键值赋给当前id，比如一部电影的id(后面跟着id到下一页查看详情)，比如:

之后我们在js bindtap的response事件中获取，并传递给下一个接口；

获取传递给id的值。

用e . current target . id；获取设置的id值，通过设置全局对象传递该值得到全局对象var app = get app()；//设置全局请求访问交付的参数app.requestDetailid = 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

通过相同的全局amount方法获取值(即与获取app.js中变量的值相同)。

var movieid=getApp()。MovieDetailidconsole . log(movie id)；

5.简单描述一下wx.navigateto()、wx.redirectto()、wx.switchtab()、wx.navigateback()和wx.relaunch()之间的区别？

微信小程序跳转页面

小程序页面上有两种跳转，可以是wxml页面，也可以是js:

1、在wxml页面中:

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

2.在js页面中:

【注意】这里注意两个关键词“应用内页面”和“tabBar页面”。在app.json文件中的tabBar中注册的tabBar页面为“Tabbar页面”，没有在TabBar中注册的页面为“应用内页面”。如下图:首页是“应用内页面”，索引和日志页面是“tabBar页面”。

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

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

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

在微信小程序的开发中，当我们调用API wx.getUserInfo(OBJECT)时，需要用户授权。但是如果用户拒绝授权，我们如何兼容用户拒绝授权，有更好的用户体验？

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

wx.getUserInfo(对象)

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

对象参数描述:

参数名称

类型

命令的

解释

有凭据

布尔代数学体系的

不

要带登录信息吗？

成功

功能

不

成功调用接口的回调函数

失败

功能

不

调用接口的回调函数失败。

完成

功能

不

在接口的末端调用回调函数(成功和失败的调用都将被执行)

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

我们只是想在用户点击“否”时弹出一个提示框，提示用户改善用户体验。比如下面这个。

具体代码是在wx.getUserInfo的fail回调函数中写弹出窗口，像下面这样:

wx . get userinfo({ success:function(resuser){ console . log(success)}，fail:function(){//调用微信弹出接口wx . show modal({ title: # 39；警告 # 39；，内容: # 39；你点击拒绝授权，将无法正常使用* * * * *的功能体验。请在10分钟后再次点击授权，或者删除小程序重新进入。'，success:function(RES){ if(RES . confirm){ console . log( # 39；用户点击OK # 39)} } } } } })这样，用户得到了提示信息，但此时，用户仍然停留在页面上。如果有些显示信息是给用户的，在进行某些操作的时候只需要验证授权，那么我们就不得不继续修改我们的代码，保存用户的登录状态，在其他地方使用它进行验证。

第一种思维方式:

下面是登录状态的保存方式。用户的登录信息传输到后台，后台保存用户信息。同时在后台使用open_id来交换一个SessionId，并缓存exchange中的SessionId作为登录状态验证。

wx . get UserInfo({ success:function(resuser){ let userInfo = resuser . userinfothat . health API . log in(code，userInfo)。然后(logindata = gt{//这里微信的请求封装成Promiese样式if(log in data . code = = 0){ var SessionId = logindata.data//调用微信wechat.setStorage将交换的session id存储在本地缓存that . we chat . set storage( # 39；sessionId # 39，sessionId)。然后(()= gt{ that . global data . userinfo = userinfotype of CB = = ；函数 CB(that . global data . userinfo)} } })} }，fail:function(){ wx . show modal({ title: # 39；警告 # 39；，内容: # 39；你点击拒绝授权，将无法正常使用* * * * *的功能体验。请在10分钟后再次点击授权，或者删除小程序重新进入。'，success:function(RES){ if(RES . confirm){ console . log( # 39；用户点击OK # 39)} } } } } })这样，我们在SessionId中保存登录状态。每次登录，我们只需要调用另一个接口来检查SessionId。如果不检查，可以重新调整微信登录界面。这里没有分机。

第二种思维方式:

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

支持WithCredentials字段基础库版本1.1.0，需要兼容较低版本。

该字段的意义是调用wx.getUserInfo(OBJECT)是否会带来登录状态的信息。

官方解释是这样的:

支持WithCredentials字段基础库版本1.1.0，需要兼容较低版本。

注意:当withCredentials为true时，要求以前调用过wx.login，并且登录状态没有过期。此时返回的数据会包含加密数据、IV等敏感信息；当withCredentials为false时，不需要登录状态，并且返回的数据不包含加密数据和IV等敏感信息。

成功返回参数描述:

参数

类型

解释

用户信息

目标

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

原始数据

线

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

签名

线

使用sha1( rawData+sessionkey)获取用于检查用户信息的字符串。

加密数据

线

完整用户信息的加密数据，包括敏感数据。详见加密数据解密算法。

输入阀ˌ交互式视讯ˌ自变量(Independent Variable)

线

加密算法的初始向量，详见加密数据解密算法。

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

然后通过使用这个接口，我们可以直接得到登录状态，提示其他需要验证登录的地方，让用户浏览不需要授权的小程序。

回到上一个问题，用户点击拒绝授权后，需要验证用户在某些操作中是否已经被授权，会弹出一个交互消息。然后，使用上述SessionId或带凭据的登录状态来执行以下操作:

applyIn:function applyIn(){ if(wx . getstoragesync( # 39；sessionId # 39)){//根据存储的sessionId验证wx . navigate to({ URL: # 39；familyDoctorApply/familyDoctorApply？Oid = # 39+this . data . params . oid+ # 39； title = # 39+this . data . params . title+ # 39； serviceCity = # 39+ this.data.array

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

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

其实可以模拟一些框架，比如bootsrap，写一个demo，提取css和JS。js，js最好抽象成一个对象(构造函数)或者一个带参数的方法，然后你只需要声明对象或者为参数指定一个类或者id。

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

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

小程序是微信生态发展中的新应用形态。小程序的体积小，一定程度上已经说明了它的体量不会很大，但能以相对简单的功能和交互满足一些服务需求。同时解决了长期多平台适配、多应用市场分布、开发成本高等诸多问题。所以小程序【机密】依托微信平台和自身的“阅后即焚”功能，受到了很多年轻人的好评。

优势:

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

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

3)基础组件库相当齐全:Toast、加载框、Picker、定位和地图、图片、输入、复选框、文本、TextArea、Scrollview等常用组件一应俱全，使用起来相当简单方便；

4)发布审核效率高，基本上上午发布审核，下午审批。升级简单，支持灰度发布；

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

6)开发文档相对完整，开发社区相对活跃；

7)新开通的牛X功能，新增webview组件，可以显示网页，相当酷；

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

缺点:

1)后台调试比较麻烦，因为API接口必须是https请求的，公网地址，也就是说后台代码必须发布到远程服务器；当然我们可以修改主机进行dns映射将远程服务器转移到本地，或者打开tomcat远程调试；反正调试比较麻烦。

2)前台测试有很多坑，最头疼的就是模拟器和真机显示不一致(之前遇到过一个案例，再单独讲解)

3)真机测试，安卓和苹果对于个别功能的表现差别很大。我们小程序里很多页面都有定位功能，模拟器和iphone的定位瞬间完成。但是安卓手机很疼，老显示器“定位”需要很长时间...要定位。后来没办法，只能优化，减少定位次数。

4)原生组件，显示不好的，比如textarea，不能出现在滚动页面上，至于顶层，其他组件经常被它屏蔽。当你点击其他组件时，你将进入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(对象发送方，系统。e){ string s _ URL；s _ url = b.aspx？name = + Label1。文本；回应。重定向(s _ URL)；} b . aspx private void page _ load中的C#代码(对象发送方，eventargs e){ label 2 . text = request . query string

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

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

假设支持分包的小程序的目录结构如下:

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

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

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

1.我们使用app.json文件对微信小程序进行全局配置，确定页面文件路径，窗口性能，设置网络超时，设置多个标签页时在页面写评论报错。例如:

{ 页面 : 2.json文件里什么都没写的时候加一对花括号{}，否则报错 3。①开发微信小程序时，我们使用app.json文件对微信小程序进行全局配置，确定页面文件的路径，窗口性能，设置网络超时，设置多个标签页等。以下是带有所有配置选项的简单配置，app.json:

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

注意:这是错误的写法。

{ 窗口 :{ navigationBarBackgroundColor ；: # ffffff ， navigationBarTextStyle : 黑色 ， navigationBarTitleText : 微信界面功能演示”， 背景颜色 : # eeeeee ， backgroundTextStyle : 光 }}注意:正确的写法

{ navigationBarBackgroundColor ；: # ffffff ， navigationBarTextStyle : 黑色 ， navigationBarTitleText : 微信界面功能演示”， 背景颜色 : # eeeeee ， backgroundTextStyle : 光 }4.之前没关注过vertical-align:中高:40rpxLine-height:40rpx设置垂直播放的差异。这次我主要讲一下vertical-align: middle代码如下:

ltview class = post -author -date ； gt ltimage class = post -作者 src = ../../images/avatar/1 . png ； gt lt/image gt； lttext class = post -日期 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:中间；将此元素放在父元素②的中间当一个父元素中有多个子元素，需要水平对齐多个子元素，且每个子元素都垂直于play时，为每个子元素设置vertical -align:middle③height:40 rpx；line -高度:40rpx您可以将文本垂直居中。

以上是小程序开发中遇到的问题的细节总结。请多关注主机参考其他相关文章！

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

• 开发微信小程序需要多少钱？价格贵吗？(微信小程序的开发一般要花多少钱？价格贵吗？)
• 强烈推荐的几个简单实用的微信小程序开发小技巧(有哪些简单实用的微信小程序开发小技巧强烈推荐)
• 了解如何用pixi.js开发微信游戏(pixijs微信游戏)
• 如何让微信小程序发展如鱼得水(有什么办法让微信小程序发展如鱼得水)
• 微信小程序开发(1)微信开发者工具及小程序框架介绍(微信小程序官方开发工具)

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