小程序开发常见的问题怎样处理？

发布时间：2022-07-09 13:38:36 所属栏目：经验来源：互联网

导读：小程序面试题 1、bindtap和catchtap的区别是什么？ bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 2、Js数组转成换字符串，强制转换成整数及转换成浮点数的函数分别是什么？ js提供了parseInt()和parseFloat()两个转换函数

　　小程序面试题

　　1、bindtap和catchtap的区别是什么？

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

　　2、Js数组转成换字符串，强制转换成整数及转换成浮点数的函数分别是什么？

　　js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函数才能正确运行；对其他类型返回的都是NaN(Not a Number)。

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

　　1、转换函数：

　　在判断字符串是否是数字值前，parseInt()和parseFloat()都会仔细分析该字符串。parseInt()方法首先查看位置0处的字符，判断它是否是个有效数字；如果不是，该方法将返回NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置1处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时parseInt()将把该字符之前的字符串转换成数字。

　　parseInt("1234blue"); //returns 1234
　　parseInt("0xA"); //returns 10
　　parseInt("22.5"); //returns 22
　　parseInt("blue"); //returns NaN
　　2. 强制类型转换

　　3. 利用js变量弱类型转换

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

　　<script>
　　上例利用了js的弱类型的特点，只进行了算术运算，实现了字符串到数字的类型转换，不过这个方法还是不推荐的。

　　3、简单描述下微信小程序的相关文件类型。

　　小程序：pages ——index：index.js(页面逻辑) /index.wxml (页面结构)/index.wxss (页面样式表) / index.json (页面配置)

　　App.js 小程序逻辑

　　App.json 小程序公共设置

　　App.wxss 小程序公共样式表

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

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

　　2、通过使用data - xxxx 的方法来标识要传递的值

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

　　在要跳转的item处，设置一个id并给当前的id赋值上对应的key值，比如一部电影的id（后面带着id去下一个页面查询，详细信息）如：

　　后我们在js的bindtap的响应事件中获取，并传递到下一个界面中；

　　获取到id传的值

　　通过e.currentTarget.id;获取设置的id值，并通过设置全局对象的方式来传递数值，

　　获取全局对象 var app=getApp(); //设置全局的请求访问传递的参数 app.requestDetailid=id;

　　提示：其实我们也可以在，wxml中查看到我们设置的每一个item的id值

　　通过使用data - xxxx 的方法标识来传值

　　通过使用data - xxxx 的方法标识来传值，xxxx可以自定义取名比如data-key等等都可以。

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

　　在js的bindtap的响应事件中：

　　通过数据解析一层层找到数据，var id=e.target.dataset.id(根据你的data-id的取名)

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

　　依据上面的方式设置要传递的值，页面跳转后，我们就需要在下一个页面拿到传递的数据（这个数据在传递前，就已经被设置成全局变量）

　　在跳转后的js页面，接收传递过来的数据detail.js

　　同样通过全局额方式取值出来，（即和app.js中取某个变量的值是一样的）

　　var movieid=getApp().MovieDetailid;
　　console.log(movieid);

　　5、简述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别？

　　微信小程序跳转页面

　　小程序页面有2种跳转，可以在wxml页面或者js中：

　　1，在wxml页面中：

　　<navigator url="../index/index">跳转到新页面</navigator>
　　<navigator url="../index/index" open-type="redirect">在当前页打开</navigator>
　　<navigator url="../index/index" open-type="switchTab">切换到首页Tab</navigator>

　　2，在js页面中：

　　【注意】此处注意两个关键词 “应用内的页面” 和 “tabBar页面”。 app.json文件中tabBar中注册过的tab页，即为“tabBar页面”，非tabBar中注册占用的页面即为“应用内的页面” 。如下图：home页面为“应用内的页面”,index和logs页面则为 “tabBar页面”。

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

　　wx.navigateTo/wx.redirectTo 无效

　　6、如果需要用户授权，用户选择拒绝授权，此时应该如何处理？

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

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

　　wx.getUserInfo(OBJECT)

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

　　OBJECT参数说明：

　　参数名

　　类型

　　必填

　　说明

　　withCredentials

　　Boolean

　　否

　　是否带上登录态信息

　　success

　　Function

　　否

　　接口调用成功的回调函数

　　fail

　　Function

　　否

　　接口调用失败的回调函数

　　complete

　　Function

　　否

　　接口调用结束的回调函数（调用成功、失败都会执行）

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

　　我们就是要在用户点击拒绝的时候，弹出提示框，提示用户以提升用户体验。像下面这样的。

　　用具体代码实现就是，将弹窗写在 wx.getUserInfo 的fail回调函数中，像下面这样：

　　wx.getUserInfo({
　　success: function (resuser) {
　　console.log(success)
　　},
　　fail: function () {// 调用微信弹窗接口
　　wx.showModal({
　　title: '警告',
　　content: '您点击了拒绝授权，将无法正常使用******的功能体验。请10分钟后再次点击授权，或者删除小程序重新进入。',
　　success: function (res) {
　　if (res.confirm) {
　　console.log('用户点击确定')
　　}
　　}
　　})
　　}
　　})
　　这样用户就获得了提示信息，但此时，用户还是停留在页面的，如果某些展示信息，还是给要给用户展示的，只是在进行某些操作的时候要对授权进行验证的话，那就得继续修改我们的代码，保存用户的登录态，在其他地方做验证使用。

　　第一种思路：

　　保存登录态这里是这样的，将用户的登录信息传给后台，后台保存用户信息，同时用 open_id 在后台换取一个SessionId 用换取的这个SessionId 存在缓存，做为登录态验证。

　　wx.getUserInfo({

　　第二种思路：

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

　　withCredentials 字段基础库版本 1.1.0 开始支持，低版本需做兼容处理

　　这个字段的意思就是调用 wx.getUserInfo(OBJECT) 是否带上登录态的信息。

　　官方文档是这样解释的：

　　withCredentials 字段基础库版本 1.1.0 开始支持，低版本需做兼容处理

　　注：当 withCredentials 为 true 时，要求此前有调用过 wx.login 且登录态尚未过期，此时返回的数据会包含 encryptedData, iv 等敏感信息；当 withCredentials 为 false 时，不要求有登录态，返回的数据不包含 encryptedData, iv 等敏感信息。

　　success返回参数说明：

　　参数

　　类型

　　说明

　　userInfo

　　OBJECT

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

　　rawData

　　String

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

　　signature

　　String

　　使用 sha1( rawData + sessionkey ) 得到字符串，用于校验用户信息。

　　encryptedData

　　String

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

　　iv

　　String

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

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

　　那么利用这个接口，我们可以直接拿到登录状态，在其他需要验证登录的地方进行提示，而在不需要授权的地方还可以让用户浏览小程序。

　　回到前面的问题，在用户点击拒绝授权后，在某些操作时需要验证用户是否授权过，弹出交互信息，那么就利用上面的 SessionId或者 withCredentials 登录态进行下面的操作：

　　applyIn: function applyIn() {
　　if (wx.getStorageSync('sessionId')) { // 根据储存的sessionId 进行验证
　　wx.navigateTo({
　　url: 'familyDoctorApply/familyDoctorApply?Oid=' + this.data.params.Oid + '&title=' + this.data.params.title + '&serviceCity=' + this.data.array[this.data.index].name + '&productPrice=' + this.data.product.productPrice
　　});
　　} else {
　　wx.showModal({
　　title: '警告',
　　content: '您点击了拒绝授权，无法使用此功能。',
　　success: function (res) {
　　if (res.confirm) {
　　console.log('用户点击确定')
　　}
　　}
　　})
　　}
　　效果像这样：

　　这样一个简单完整的登录及授权，登录态保存等前端微信小程序解决方案就完成了，还可以继续扩展到登录有效期，退出登录，用户权限等跟多扩展的地方。

　　优势：

　　1）容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本上没有大问题；当然如果了解ES6+CSS3则完全可以编写出即精简又动感的小程序；

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

　　3）基本组件库已经比较齐全：Toast,Loading框,Picker,定位及地图,Image,Input,Checkbox,Text,TextArea,ScrollView等常用的组件都有，而且使用也挺简单、方便；

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

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

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

　　7）最近刚开放的牛x功能，新增webview组件，可以展示网页啦，这个比较爽；

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

　　劣势：

　　1）后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦。

　　2）前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致（之前碰到一个案例，后续单独讲解）

　　3）真机测试，个别功能安卓和苹果表现迥异，我们的小程序里有很多页面有定位功能，模拟器和iphone定位瞬间完成，然而安卓手机就蛋疼了，老显示“定位中...”要很久才能定位好。后来没办法只能优化，减少定位次数。

　　4）native组件，展示很不好，比如textarea，不能在滚动页面出现，而且至于顶层，经常其它组件会被它遮挡，点击其它组件时，就进入textarea输入框；画布组件也是如此；

　　5）页面跳转深度不能超过5个页面，这个比较麻烦，有些复杂的页面跳转没法实现，不过太复杂的话也有悖小程序简单易用的原则啦；

　　9、设置值到页面暂存区（即data）里面的方法有几种？分别是什么？有什么区别？

　　1. 使用QueryString变量
　　QueryString是一种非常简单的传值方式，他可以将传送的值显示在浏览器的地址栏中。如果是传递一个或多个安全性要求不高或是结构简单的数值时，可以使用这个方法。但是对于传递数组或对象的话，就不能用这个方法了。下面是一个例子：
　　a.aspx的C#代码

　　private void Button1_Click(object sender, System.EventArgs e)
　　{
　　 string s_url;
　　 s_url = "b.aspx?name=" + Label1.Text;
　　 Response.Redirect(s_url);
　　}
　　b.aspx中C#代码
　　private void Page_Load(object sender, EventArgs e)
　　{
　　 Label2.Text = Request.QueryString["name"];
　　}

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

什么是网站TTFB？优化	如何合理应用URL准则
CDN缓存是啥意思解析	为何要买云服务器？云