小程序面试题和的区别是什么？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

小程序面试题和的区别是什么？

小程序试题

1. 和 和 有什么区别？

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

2、JS数组转字符串、强制转整数、转浮点数的函数有哪些？

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

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

1、转换功能：

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

parseInt("1234blue"); //returns 1234 
parseInt("0xA"); //returns 10 
parseInt("22.5"); //returns 22 
parseInt("blue"); //returns NaN

登录后复制

2.强制类型转换

您还可以使用cast(type)来处理值的类型转换。 使用强制转换来访问特定值，即使它是其他类型。

可用的 3 个演员阵容如下：

(value)——将给定的值转换为形状；

(value) - 将给定值转换为数字（可以是整数或浮点数）；

(value) - 将给定值转换为字符串。

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

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

登录后复制

上面的例子利用了js的弱类型特性，只进行算术运算，实现了字符串到数字的类型转换。 但是，不建议使用此方法。

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

小程序：页面——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，比如一部电影的id（然后用该id去下一页查询详细信息），如：

*后从js的响应事件中获取并传递给下一个接口；

获取id传递的值

通过e..id获取设置的id值； 并通过设置全局对象来传递值。

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

提示：其实我们也可以查看wxml中我们设置的每一项的id值。

使用data-xxxx的方法标识符传递值

通过使用data-xxxx的方法标识符来传递值，xxxx可以有一个自定义的名称，例如data-key等。

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

js的响应事件中：

通过数据分析一层层找到数据，var id=e...id（根据你的data-id命名）

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

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

在跳转后的js页面中，接收传递过来的data.js

值也是通过全局方法获取的（即与app.js中某个变量的值相同）

变量 =().;

。日志（）;

5、简述wx.()、wx.()、wx.()、wx.()、wx.()之间的区别？

微信小程序跳转页面

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

1. 在wxml页面中：

跳转到新页面
在当前页打开
切换到首页Tab

登录后复制

2、js页面中：

【注意】这里要注意两个关键字“应用内的页面”和“页面”。 app.json 文件中注册的选项卡页面称为“页面”，未注册的页面称为“应用程序内的页面”。 如下图：主页是“应用程序内的页面”，索引和日志页面是“页面”。

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

wx./wx. 是无效的

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

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

我们先看一下这个接口的官方文档：

wx.()

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

参数说明：

参数名称

类型

必需的

阐明

不

是否带登录信息

不

接口调用成功的回调函数

失败

不

接口调用失败回调函数

不

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

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

我们只是想在用户点击拒绝的时候弹出一个提示框，提示用户，提高用户体验。 就像下面这个一样。

具体代码实现的话，在wx.的fail回调函数中编写弹窗，如下：

wx.getUserInfo({
success: function (resuser) {
console.log(success)
},
fail: function () {// 调用微信弹窗接口
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法正常使用******的功能体验。请10分钟后再次点击授权，或者删除小程序重新进入。',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
})

登录后复制

这样用户就得到了提示信息，但是此时用户仍然停留在页面上。 如果仍然向用户显示一些显示信息，但是执行某些操作时需要验证授权，那么我们就得继续修改我们的代码，保存用户的登录状态，在其他地方用来验证。

**种思路：

以下是保存登录状态的方法。 将用户的登录信息传递到后台，并在后台保存用户信息。 同时，交换的缓存用作登录状态验证。

wx.getUserInfo({
success: function (resuser) {
let userInfo = resuser.userInfo
that.healthApi.login(code, userInfo).then(logindata => {   // 这里将微信的请求封装成Promiese 风格
if (logindata.code === 0) {
var sessionId = logindata.data// 调用微信wechat.setStorage将换回来的 SessionId 存在本地缓存
that.wechat.setStorage('sessionId', sessionId).then(() => {
that.globalData.userInfo = userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
})
}
})
},
fail: function () {
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法正常使用*****的功能体验。请10分钟后再次点击授权，或者删除小程序重新进入。',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
})

登录后复制

这样我们就将登录状态保存在. 我们每次登录的时候，只需要调用另外一个检查接口即可。 如果检查失败，我们将调整微信登录界面。 这里不再进一步扩展。

第二个想法：

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

支持现场基础库版本 1.1.0。 低版本需要兼容。

该字段的含义是调用wx.()时是否带上登录状态信息。

官方文档是这样解释的：

支持现场基础库版本 1.1.0。 低版本需要兼容。

注：为true时，要求之前调用过wx.login，且登录状态未过期。 返回的数据会包含iv等敏感信息。 当为 false 时，不需要登录状态，返回的数据不包含 、iv 等敏感信息。

返回参数说明：

范围

类型

阐明

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

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

使用 sha1( + ) 得到一个字符串，用于验证用户信息。

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

四号

加密算法的初始向量。 详情请参见加密数据解密算法。

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

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

回到上一个问题，用户点击拒绝授权后，在进行某些操作时需要验证用户是否授权，并会弹出交互信息。 然后使用上面或者登录状态进行如下操作：

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('用户点击确定')
}
}
})
}

登录后复制

效果如下：

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

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

其实你可以模拟一些框架。 比如写一个demo，提取css和js。 js*好抽象成对象（构造函数）或者带参数的方法。 那么你只需要声明对象，或者指定一个类或参数作为参数。 id，就是这样

将其写入 html 文件有什么优点吗？

独立有什么问题吗？ 尤其是加载页面时微信小程序中文开发，应该会有很多http请求。 会不会导致加载变慢？

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

小程序是微信生态发展过程中出现的一种新的应用形式。 小程序体积小，一定程度上说明它不会很大，但可以实现一些相对简单的功能和相对简单的交互。 也解决了App长期存在的多平台适配、多应用市场分布、开发成本高等问题。因此，小程序【秘籍】依托微信平台以及自身的“阅后即焚”功能，并赢得了众多年轻人的好评。

优势：

1) 易于上手。 只要具备HTML+CSS+JS的基础知识，写小程序基本上没有什么大问题； 当然，如果懂ES6+CSS3，就可以写出精简、动态的小程序；

2）基本上不需要考虑兼容性问题。 只要微信能够在一台机器上正常运行小程序面试题和的区别是什么？，就可以运行小程序；

3）基础组件库比较齐全：Toast、box、定位和地图、Image、Input、Text等常用组件都有，使用起来相当简单方便；

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

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

6）开发文档比较齐全，开发社区比较活跃；

7）新开放的Niux功能，增加了新的组件，可以显示网页，相当炫酷；

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

缺点：

1）后端调试比较麻烦，因为API接口需要https请求和公网地址，这意味着后端代码必须发布到远程服务器； 当然，我们可以修改host进行dns映射，将远程服务器转移到本地，或者启用远程调试； 无论如何，调试都是比较麻烦的。

2）前端测试存在很多陷阱。 *头疼的是模拟器和真机的显示不一致（之前遇到过一个案例，后面会单独说明）

3）真机测试，安卓和苹果在个别功能上表现差异很大。 我们的小程序中有很多页面带有定位功能，模拟器和定位都是瞬间完成的。 不过安卓手机就很蛋疼了，总是显示“正在定位...”，需要很长时间才能定位。 后来无奈，只好优化，减少定位次数。

4) 组件显示不良。 例如，它们不能出现在滚动页面上，而对于顶层，其他组件往往会被它遮挡。 当点击其他组件时，进入输入框； 组件也是如此；

5）页面跳转深度不能超过5页。 这样就比较麻烦了。 一些复杂的页面跳转无法实现，但如果过于复杂，又违背了小程序简单易用的原则；

6）小程序升级问题。 官方文档说会自动更新。 现实中，往往需要先删除原来的小程序，然后重新搜索并添加，才能加载*新版本；

7）页面渲染的稳定性有待提高。 曾出现多起部分用户页面显示异常的情况。 整个页面被放大了好几倍。 先删除原来的小程序，然后再添加回来。 重复几次即可正常显示；

8）JS引用只能使用绝对路径，很烦人； 基于安全和MINA框架实现原理，小程序中js的使用有很多限制。 不能使用：new、eval、、不能操作，不能操作DOM；

9）开发工具bug较多，效率相对较低。 每三天升级一次，解决老问题和同时出现的问题； 文件查找、资源定位、代码编辑等方面存在一定差距，经常出现a.js被修改为b.js的情况

9、页面暂存区设置值（即数据）有几种方法？ 有什么区别？ 有什么不同？

1.使用变量

这是一种非常简单的传递值的方法。 它可以在浏览器的地址栏中显示传递的值。 当传递一个或多个安全要求不高或者结构简单的值时，可以使用这种方法。 但对于传递数组或对象，则不能使用此方法。 下面是一个例子：

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"]; 
}

登录后复制

2.使用对象变量

该对象的范围是全局的，这意味着它对所有用户都有效。 常用的方法有Lock和。

a.aspx的C#代码

private void Button1_Click(object sender, System.EventArgs e) 
{ 
 Application["name"] = Label1.Text; 
 Server.Transfer("b.aspx"); 
}

登录后复制

b.aspx 中的 C# 代码

private void Page_Load(object sender, EventArgs e) 
{ 
 string name; 
 Application.Lock(); 
 name = Application["name"].ToString(); 
 Application.UnLock(); 
}

登录后复制

3.使用变量

想必这是大家*常见的用法。 其操作类似，并且影响个人用户。 因此，过多的存储会导致服务器内存资源耗尽。

a.aspx的C#代码

private void Button1_Click(object sender, System.EventArgs e) 
{ 
 Session["name"] = Label.Text; 
}

登录后复制

b.aspx 中的 C# 代码

private void Page_Load(object sender, EventArgs e) 
{ 
 string name; 
 name = Session["name"].ToString(); 
}

登录后复制

4.使用对象变量

这也是大家常用的方法。 对于每个用户来说都是一样的，但是有一个本质的区别，就是存储在客户端，而存储在服务器端。 并且其使用必须与ASP.NET内置对象配合使用。

a.aspx的C#代码

private void Button1_Click(object sender, System.EventArgs e) 
{ 
 HttpCookie cookie_name = new HttpCookie("name"); 
 cookie_name.Value = Label1.Text; 
 Reponse.AppendCookie(cookie_name); 
 Server.Transfer("b.aspx"); 
}

登录后复制

b.aspx 中的 C# 代码

private void Page_Load(object sender, EventArgs e) 
{ 
 string name; 
 name = Request.Cookie["name"].Value.ToString(); 
}

登录后复制

五、使用方法

这可以说是面向对象开发中使用的方法。 它使用 . 方法将进程从当前页面引导到另一个页面。 新的页面使用了前一个页面的响应流程，所以这个方法是完全面向对象的。 ，简洁有效。

a.aspx的C#代码

public string Name 
{ 
 get{ return Label1.Text;} 
} 
private void Button1_Click(object sender, System.EventArgs e) 
{ 
 Server.Transfer("b.aspx"); 
} 
b.aspx中C#代码 
private void Page_Load(object sender, EventArgs e) 
{ 
 a newWeb; //实例a窗体 
 newWeb = (source)Context.Handler; 
 string name; 
 name = newWeb.Name; 
}

登录后复制

微信小程序--数据赋值与取值

根据小程序官方文档：

Page()函数用于注册页面。 接受一个参数，指定页面的初始数据、生命周期函数、事件处理函数等。参数data用于设置初始数据。 WXML中的动态数据来自于对应Page的数据。

因此，如果页面需要显示动态数据，就必须将数据更新到data中对应的变量中。

· 页面js文件中这样写：

Page({
  data: {
    message: 'Hello MINA!'
  }
})
· wxml中这么写：
 {{ message }} 
· 如果该数据在操作过程中发生变化，需要将新数据重新绑定到该变量中，写法如下：
function setData(){
    var that = this;
    that.setData({
      message: '新消息'
    })
}
· 如果想在js文件中使用data中的数据写法如下：
function getData(){
    var that = this;
    console.log(that.data.message)
}

登录后复制

10、如何检测用户的微信版本是否支持某项功能？

**阶段开放的接口并不是不能用，而是不需要测试，都是支持的。

只需要测试*新新开放的接口是否支持。

当前开放的所有接口：

e

嗯

嗯

视图

11.如何分包加载？ 分包加载有什么优点？

分包加载介绍

大多数小程序都是由多个函数组成的。 通常这些功能是相互独立的，但是依赖于一些共同的逻辑，并且这些功能通常对应于几个独立的页面。 那么小程序代码的包就不用打成一个包了。 根据功能划分，可以拆分为多个子包。 当需要某个功能时，加载该功能对应的子包。

对于用户来说，小程序加载流程变成：

1、首次启动时，下载小程序主包并显示主包中的页面；

2、如果用户进入某个分包页面，则下载对应的分包页面。 下载完成后，显示分包页面。

采用分包加载，对于开发来说，小程序可以拥有更大的代码量，承载更多的功能和服务； 对于用户来说，可以更快地打开小程序，而不影响启动速度。 以使用更多功能。

分包事业部

在配置之前，开发首先需要规划好每个分包需要容纳的内容。 我们建议开发遵循功能划分的原则，将同一功能下的页面和逻辑放在同一目录下。 对于一些跨功能的公共逻辑应该放在主包下面，以保证分包引用这部分功能时，这部分逻辑必须存在。

分包时应注意以下事项：

1、避免分包与分包之间的引用耦合。 由于子包的加载是由用户操作触发的，因此不能保证当某个子包加载时，一定会存在另一个子包。 这样可能会导致JS逻辑异常，比如报“”xxx.js”不是”这样的错误；

2.一些常用的自定义组件需要放在主包中。

分包配置

明确分包划分后，即可进行分包配置。 这一步并不复杂。

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

开发在应用程序中声明项目分包结构。 场地：

低版本分包加载兼容性问题

微信6.6.0版本开始支持分包加载，对于低于该版本的客户端，我们做了兼容处理，开发无需兼容旧版本的微信客户端。 对于老版本的客户端，编译后台会将所有子包打包成一个整体包，老版本的客户端仍然会在整个包中加载。

因此，在旧版本的微信客户端下，仍然是整个包加载的。 建议开发尽量控制代码包的大小。

目前小程序分包大小限制：

整个小程序所有子包大小不超过4M

单个子包/主包大小不能超过2M

随着时间的推移，旧版本覆盖率的降低，我们会考虑进一步扩大代码包的大小。

12.您在开发小程序时遇到过哪些陷阱？ 你是怎么解决的？

1、我们通过app.json文件对微信小程序进行全局配置，判断页面文件的路径、窗口性能、设置网络超时、设置多个标签时在页面中写评论时报错。

例如：

{
  "pages":[
      //这是首页面
    "pages/welcome/welcome"
  ]}

登录后复制

这时候会报错

2、当json文件没有内容时，还必须添加一对大括号{ }，否则会报错。

3.①开发微信小程序时，我们使用app.json文件对微信小程序进行全局配置，确定页面文件的路径、窗口性能、设置网络超时、设置多个选项卡等。

这是一个简单的配置 app.json ，其中包含所有配置选项：

{
  //设置页面路径
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  //设置默认页面的窗口表现
  "window": {
    "navigationBarTitleText": "Demo"
  },
  //设置底部 tab 的表现
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  //设置网络超时时间
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  //设置是否开启 debug 模式
  "debug": true
}

登录后复制

② 不过，在配置页面json文件时，只能配置默认页面的窗口性能（即只能配置），但此时可以直接省略。 如果添加的话，没有任何效果，也不会报错。

以下是一个简单的配置，post.json包含配置选项：

注意：这是错误的写法

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }}

登录后复制

注意：正确书写

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"}

登录后复制

4.我一直没注意过-align:和:40rpx的区别； line-:40rpx（垂直设置）。 这次主要讲一下-align：

代码如下所示：

    
    
    Nov 15 2016

 
.post-author{
    width: 60rpx;
    height: 60rpx;
    vertical-align: middle;
}
.post-date{
    margin-top: 5rpx;
    vertical-align: middle;
    /*height: 40rpx;
    line-height: 40rpx;*/
}

登录后复制

总结：

①-对齐：; 将此元素放置在父元素的中间

② 当一个父元素中有多个子元素，且需要多个子元素水平对齐且每个子元素垂直对齐时，为每个子元素设置-align：

③：40rpx； 线-：40rpx； 可以垂直居中文本

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

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等