1、微信小程序有几个文件
-
WXML(WeiXin Markup Language)
是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。内部主要是微信自己定义的一套组件 -
WXSS (WeiXin Style Sheets)
是一套样式语言,用于描述WXML
的组件样式 -
js
逻辑处理,网络请求 -
json
小程序设置,如页面注册,页面标题及tabBar
2、微信小程序怎样跟事件传值
给 HTML 元素添加
data-*
属性来传递我们需要的值,然后通过e.currentTarget.dataset
或onload
的param
参数获取。但data -
名称不能有大写字母和不可以存放对象
3、小程序的 wxss 和 css 有哪些不一样的地方?
-
wxss
的图片引入需使用外链地址 -
没有 Body
;样式可直接使用import
导入
4、小程序关联微信公众号如何确定用户的唯一性
使用 wx.getUserInfo
方法 withCredentials
为 true
时 可获取 <encryptedData
,里面有 union_id
。后端需要进行对称解密
5、微信小程序与vue区别
- 生命周期不一样,微信小程序生命周期比较简单
- 数据绑定也不同,微信小程序数据绑定需要使用
{{}},vue
直接:就可以 显示与隐藏元素,vue
中,使用v-if
和v-show
- 控制元素的显示和隐藏,小程序中,使用
wx-if
和hidden
控制元素的显示和隐藏 - 事件处理不同,小程序中,全用
bindtap(bind+event)
,或者catchtap(catch+event)
绑定事件,vue:使用v-on:event
绑定事件,或者使用@event
绑定事件 - 数据双向绑定也不也不一样在
vue
中,只需要再表单元素上加上v-model
,然后再绑定data
中对应的一个值,当表单元素内容发生变化时,data
中对应的值也会相应改变,这是vue
非常nice
的一点。微信小程序必须获取到表单元素,改变的值,然后再把值赋给一个data
中声明的变量。
6、小程序的双向绑定和vue哪里不一样
小程序直接 this.data
属性是不可以同步到视图的,必须调用:
this.setData({
// 这里设置
})
7、简述微信小程序原理
- 微信小程序采用
JavaScript、WXML、WXSS
三种技术进行开发,本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口 - 微信的架构,是数据驱动的架构模式,它的
UI
和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现 - 小程序分为两个部分
webview
和appService
。其中webview
主要用来展现UI ,appService
有来处理业务逻辑、数据及接口调用。它们在两个进程中运行,通过系统层JSBridge
实现通信,实现 UI 的渲染、事件的处理
8、小程序的生命周期函数
-
onLoad
页面加载时触发。一个页面只会调用一次,可以在onLoad
的参数中获取打开当前页面路径中的参数 -
onShow()
页面显示/切入前台时触发 -
onReady()
页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互 -
onHide()
页面隐藏/切入后台时触发。 如navigateTo
或底部tab
切换到其他页面,小程序切入后台等 -
onUnload()
页面卸载时触发。如redirectTo 或 navigateBack
到其他页面时
9、哪些方法可以用来提高微信小程序的应用速度
1、提高页面加载速度
2、用户行为预测
3、减少默认 data
的大小
4、组件化方案
10、怎么解决小程序的异步请求问题
- 小程序支持大部分
ES6
语法 - 在返回成功的回调里面处理逻辑
Promise
异步
11、如何实现下拉刷新
首先在全局 config
中的 window
配置 enablePullDownRefresh
,在 Page
中定义onPullDownRefresh
钩子函数,到达下拉刷新条件后,该钩子函数执行,发起请求方法 请求返回后,调用wx.stopPullDownRefresh
停止下拉刷新
12、bindtap和catchtap的区别是什么
相同:
首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分
不同:
他们的不同点主要是bindtap
是不会阻止冒泡事件的,catchtap
是阻值冒泡的
13、小程序页面间有哪些传递数据的方法
1、使用全局变量实现数据传递。在 app.js
文件中定义全局变量 globalData
, 将需要存储的信息存放在里面
2、使用 wx.navigateTo
与 wx.redirectTo
的时候,可以将部分数据放在 url
里面,并在新页面onLoad
的时候初始化
3、使用本地缓存Storage
相关
14、小程序wxml与标准的html的异同?
相同:
- 都是用来描述页面的结构;
- 都由标签、属性等构成;
不同:
- 标签名字不一样,且小程序标签更少,单一标签更多;
- 多了一些
wx:if
这样的属性以及{{ }}
这样的表达式 - WXML仅能在微信小程序开发者工具中预览,而
HTML
可以在浏览器内预览; - 组件封装不同,
WXML
对组件进行了重新封装, - 小程序运行在
JS Core
内,没有DOM树
和window
对象,小程序中无法使用window
对象和document
对象。
15、小程序简单介绍下三种事件对象的属性列表?
基础事件(BaseEvent)
-
type:
事件类型 -
timeStamp:
事件生成时的时间戳 -
target:
触发事件的组件的属性值集合 -
currentTarget:
当前组件的一些属性集合
自定义事件(CustomEvent)
detail
触摸事件(TouchEvent)
touches
changedTouches
16、小程序对wx:if 和 hidden使用的理解?
-
wx:if
有更高的切换消耗。 -
hidden
有更高的初始渲染消耗。 - 因此,如果需要频繁切换的情景下,用
hidden
更好,如果在运行时条件不大可能改变则wx:if
较好。
17、微信小程序与H5的区别?
运行环境的不同
传统的HTML5
的运行环境是浏览器,包括webview
,而微信小程序的运行环境并非完整的浏览器,是微信开发团队基于浏览器内核完全重构的一个内置解析器,针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。开发成本的不同
只在微信中运行,所以不用再去顾虑浏览器兼容性,不用担心生产环境中出现不可预料的奇妙BUG
获取系统级权限的不同
18、app.json 是对当前小程序的全局配置,讲述三个配置各个项的含义?
-
pages字段
—— 用于描述当前小程序所有页面路径,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。 -
window字段
—— 小程序所有页面的顶部背景颜色,文字颜色定义在这里的 -
tab字段
—小程序全局顶部或底部tab
19、小程序onPageScroll方法的使用注意什么?
由于此方法调用频繁,不需要时,可以去掉,不要保留空方法,并且使用onPageScroll
时,尽量避免使用setData()
,尽量减少setData()
的使用频次。
20、小程序视图渲染结束回调?
使用setData(data, callback)
,在callback
回调方法中添加后续操作代码
21、小程序同步API和异步API使用时注意事项?
wx.setStorageSync
是以Sync结尾的API为同步API,使用时使用try-catch
来查看异常,如果判定API为异步,可以在其回调方法success、fail、complete
中进行下一步操作。
22、简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()
的区别
-
wx.navigateTo():
保留当前页面,跳转到应用内的某个页面。但是不能跳到tabbar
页面 -
wx.redirectTo():
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到tabbar
页面 -
wx.switchTab():
跳转到abBar
页面,并关闭其他所有非tabBar
页面 -
wx.navigateBack():
关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages()
获取当前的页面栈,决定需要返回几层 -
wx.reLaunch():
关闭所有页面,打开到应用内的某个页面
23、如何封装微信小程序的数据请求的?
1、将所有的接口放在统一的js文件中并导出。
2、在app.js
中创建封装请求数据的方法。
3、在子页面中调用封装的方法请求数据。
24、小程序与原生App哪个好?
小程序除了拥有公众号的低开发成本、低获客成本低以及无需下载等优势,在服务请求延时与用户使用体验是都得到了较大幅度 的提升,使得其能够承载跟复杂的服务功能以及使用户获得更好的用户体验。
25、webview
中的页面怎么跳回小程序中?
首先要引入最新版的jweixin-x.x.x.js
,然后
wx.miniProgram.navigateTo({
url: '/pages/login/login'+'$params'
})
26、小程序调用后台接口遇到哪些问题?
1.数据的大小有限制,超过范围会直接导致整个小程序崩溃,除非重启小程序;
2.小程序不可以直接渲染文章内容页这类型的html
文本内容,若需显示要借住插件,但插件渲染会导致页面加载变慢,所以最好在后台对文章内容的html
进行过滤,后台直接处理批量替换p
标签div
标签为view
标签,然后其它的标签让插件来做,减轻前端的时间。
27、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'
})
28、微信小程序的优劣势?
优势:
1、无需下载,通过搜索和扫一扫就可以打开。
2、良好的用户体验:打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面,与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布,微信拥有一套严格的审查流程,不能通过审查的小程序是无法发布到线上的。
劣势:
1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
2、样式单一。小程序的部分组件已经是成型的了,样式不可以修改。例如:幻灯片、导航。
3、推广面窄,不能分享朋友圈,只能通过分享给朋友,附近小程序推广。其中附近小程序也受到微信的限制。
4、依托于微信,无法开发后台管理功能。
参考资料:csdn