1、简单描述下微信小程序的相关文件类型?
微信小程序项目结构主要有四个文件类型:
wxml 模板文件,是框架设计的一套标签语言,结合基础组件、事件系统、可以构建出 页面的结构;
wxss 样式文件,是一套样式语言,用于描述 WXML 的组件样式;
js 脚本逻辑文件,逻辑处理网络请求;
json 配置文件,小程序设置,如页面注册,页面标题及 tabBar;
app.json 整个小程序的全局配置,包括:
pages: [所有页面路径]
网络设置(网络超时时间)
界面表现(页面注册)
window: {背景色、导航样式、默认标题}
底部 tab 等
app.js 监听并处理小程序的生命周期函数、声明全局变量;
app.wxss 全局配置的样式文件。
2、请谈谈 wxml 与标准的 html 的异同?
都是用来描述页面的结构;
都由标签、属性等构成;
标签名字不一样,且小程序标签更少,单一标签更多;
多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式;
WXML 仅能在微信小程序开发者工具中预览,而 HTML 可以在浏览器内预览;
组件封装不同, WXML 对组件进行了重新封装;
小程序运行在 JS Core 内,没有 DOM 树和 window 对象,小程序中无法使用 window 对象和 document 对象。
3、请谈谈 WXSS 和 CSS 的异同?
都是用来描述页面的样式;
WXSS 具有 CSS 大部分的特性,但是也做了一些扩充和修改;
WXSS 新增了尺寸单位,WXSS 在底层支持新的尺寸单位 rpx;
WXSS 仅支持部分 CSS 选择器;
WXSS 提供全局样式与局部样式;
WXSS 不支持 window 和 dom 文档流。
4、怎么封装微信小程序的数据请求?
5、小程序页面间有哪些传递数据的方法?
在 app.js 中使用全局变量实现数据传递;
给元素添加 data-*属性来传递值,然后通过 e.currentTarget.dataset 或 onload 的 param 参数获取。 注:data-名称不能有大写字母、不可以存放对象;
通过设置 id 的方法标识来传值,通过 e.currentTarget.id 获取设置的 id 的值,然后通过设置全局对象的方式来传递数值;
页面跳转或重定向时,在 navigator 中使用 url 带参数传递数据;
使用组件模板 template 传递参数;
使用缓存传递参数;
使用数据库传递参数。
6、请谈谈小程序的双向绑定和 vue 的异同?
两者大体相同,但小程序直接使用 this.data 属性是不可以同步到视图的,必须调用 this.setData()方法。
双向绑定
:
vue 默认支持双向绑定;
微信小程序需要借助 data 来实现。
取值:
vue 中,通过 this.xxx 取值;
小程序中,通过 this.data.xxx 取值。
定义方法:
小程序定义方法在 page.js 中直接定义即可;
vue 的方法通过写在 method 中进行定义。
取变量:小程序通过 wx:for = "{{ lists }}";Vue 是 v-for = "item in lists";
调用 data 模型(赋值):
小程序:this.data.item 需要调用 this.setData({item:1}) 进行赋值
vue: this.item 调用 this.item = 1 赋值
小程序的双向绑定原则上来说并不是真正的双向绑定。如果在小程序 .js 文件中改变了某个变量的值,那么页面上的值并不会跟着改变;如果想要页面上的值也跟着改变的话,需要通过 this.setData 来操作。而 Vue 默认就是双向绑定,只改变了某个变量的值, 页面上也会跟着改变。
7、请谈谈小程序的生命周期函数?
全局生命周期 app.js:
onLaunch() 小程序初始化,只会调用一次,可获取当前页面路径中的参数;
onShow() 页面显示或切入前台时触发,一般用来发送数据请求;
onHide() 页面隐藏或切入后台时触发;
onError() 页面发生错误时触发;
onPageNotFound() 小程序要打开的页面不存在时触发,可以在此函数进行重定向操作。
小程序页面的生命周期:
onLoad() 页面加载时触发,只会调用一次,可获取当前页面路径中的参数;
onShow() 页面显示或切入前台时触发,一般用来发送数据请求;
onReady() 页面初次渲染完成时触发, 只会调用一次,代表页面已可和视图层进行交互;
onHide() 页面隐藏或切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等;
onUnload() 页面卸载时触发,如 redirectTo 或 navigateBack 到其他页面时;
onPullDownRefresh() 下拉刷新的钩子函数,用户下拉刷新时会自动走到这个函数中;
onReachBottom() 上拉触底的钩子函数;
onShareAppMessage() 用户点击右上角分享。
小程序组件中的生命周期:
lifetimes:组件生命周期
created() 在组件实例刚刚被创建时执行;
attached() 在组件实例进入页面节点树时执行;
ready() 在组件在视图层布局完成后执行;
moved() 在组件实例被移动到节点树另一个位置时执行;
detached() 在组件实例被从页面节点树移除时执行;
error() 每当组件方法抛出错误时执行。
pageLifetimes:组件所在页面的生命周期
show() 页面被展示时执行;
hide() 页面被隐藏时执行;
resize() 页面尺寸变化时执行。
8、简述微信小程序原理?
小程序本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口;
它的架构,是数据驱动的架构模式,它的 UI 和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现;
它从技术上讲和现有的前端开发差不多,采用 JavaScript、WXML、WXSS 三种技术进行开发;
功能可分为 webview 和 appService 两个部分:webview 用来展现 UI,appService 用来处理业务逻辑、数据及接口调用,两个部分在两个进程中运行,通过系统层 JSBridge 实现通信,实现 UI 的渲染、事件的处理等。
9、请谈谈原生开发小程序、wepy、mpvue、taro 的对比?
小程序原生和wepy、mpvue、uni-app、taro等主流开发框架,哪个好?这里是深度横评对比
小程序第三方框架对比 ( wepy / mpvue / taro )
10、哪些方法来提高微信小程序的应用速度?
提高页面的加载速度
用户行为预测 # 什么叫行为预测
减少默认 data 的大小
组件化方案 # 使用
11、怎么解决微信小程序的异步请求问题?
小程序支持 ES6 语法,使用 Promise 来解决异步请求
function asyncFn1() {
return new Promise((resolve, reject) => {
// .........
});
}
// 调用
asyncFn1()
.then(asyncFn2)
.then(asyncFn3);
12、小程序关联微信公众号如何确定用户的唯一性?
使用 wx.getUserProfile,可获取 encryptedData,里面有 union_id,后端需要进行对称解密。 ( 无法通过wx.getUserInfo与获取用户个人信息(头像、昵称、性别与地区),将直接获取匿名数据(包括userInfo与encryptedData中的用户个人信息),获取加密后的openID与unionID数据的能力不做调整。)
13、微信小程序如何实现下拉刷新?
在 json 配置中开启 enablePullDownRefresh 下拉刷新的动作,在 .js 文件中通过 onPullDownRefresh 函数来实现相关的操作。
14. 微信小程序使用 webview 直接加载要注意哪些事项?
必须要在小程序后台使用管理员添加业务域名
;
h5 页面跳转至小程序的版本必须是 1.3.1 以上;
微信分享只可以是小程序的主名称,如要自定义分享内容,需小程序版本在 1.7.1 以上;
h5 的支付不可以是微信公众号的 appid,必须是小程序的 appid,而且用户的 openid 也必须是用户小程序的。
15、webview 中的页面怎么跳转回小程序?
wx.miniProgram.navigateTo 保留当前页面,跳转到应用内的某个页面
wx.miniProgram.redirectTo 关闭当前页面,跳转到应用内的某个页面
wx.miniProgram.navigateBack 关闭当前页面,返回上一页面或多级页面
wx.miniProgram.reLaunch 关闭所有页面,打开到应用内的某个页面
wx.miniProgram.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
16、简述五个路由的区别?
wx.navigateTo() 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面 ;
wx.redirectTo() 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页 面;
wx.switchTab() 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;
wx.navigateBack() 关闭当前页面,返回上一页面或多级页面。可通过getCurrentPages() 获取当前的页面栈,决定需要返回几层;
wx.reLaunch() 关闭所有页面,打开到应用内的某个页面。
可以按照在 wxml、js 和跳转失败进行区分:
在 wxml 页面中:可分为 “跳转新页面”、“在当前页打开”、“切换到首页 Tab”;
在 js 页面中:分为 “应用内的页面” 和 “tabBar 页面” ;
如果上述跳转遇到跳转失败或者无效的问题,请访问:wx.navigateTo / wx.redirectTo 无效
17、bindtap 和 catchtap 的区别?
相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的, 可以不做区分。
不同点:他们的不同点主要是 bindtap 是不会阻止冒泡事件的,catchtap 是阻止事件冒泡 的。
18、微信小程序与 H5 的区别?
运行环境不同:小程序在微信运行,h5 在浏览器运行;
开发成本不同:h5 需要兼容不同的浏览器;
获取系统权限不同:系统级权限可以和小程序无缝衔接;
应用在生产环境的运行流畅度:h5 需不断对项目优化来提高用户体验;
19、小程序如何更新页面中的值?
可以通过 this.setData 来进行改变。
20、如何实现登录数据的持久化?
可以通过 wx.setStorageSync('键名', 对应的值) 来进行数据持久化存储。
21、微信小程序和 app 有什么不同之处?
微信小程序属于轻量级的 app 但是限制在微信中,开发周期短,功能较少,占用空间少;
app 就相反 需要占用额外内存 开发周期长
22、微信小程序如何进行双向绑定?
通过 bind-tap 点击事件 向 app.js 定义的方法中获取回执;
设置 data 的值 实现双向绑定。
23、如何自定义 tabbar?
自定义 tabBar
a. 配置信息
在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。
b. 添加 tabBar 代码文件
在代码根目录下添加入口文件
c. 编写 tabBar 代码
用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar
接口,可获取当前页面下的自定义 tabBar 组件实例。
24、小程序怎样使用自定义组件?
a. 新建自定义组件目录,生成目录结构;
b. 写好组件内容;
c. 在要使用的目标页面的 json 文件中配置下 usingComponents,引入组件;
d. 以标签的形式在页面中使用该组件即可;
e. 传递数据和 vue 一样,通过自定义属性,然后在组件里通过 properties 接收就可以使用了。
25、小程序本地存储(数据缓存)有哪些常用 api?
a. 数据的存储,将数据存储在本地缓存中指定的 key 中
wx.setStorage(Object object) 异步
wx.setStorageSync(string key, any data) 同步
b. 数据的获取,从本地缓存中获取指定 key 的内容
wx.getStorage(Object object) 异步
wx.getStorageSync(string key) 同步
c. 存储信息的获取,异步获取当前 storage 的相关信息
wx.getStorageInfo(Object object) 异步
wx.getStorageInfoSync() 同步
d. 数据的删除,从本地缓存中移除指定 key
wx.removeStorage(Object object) 异步
wx.removeStorageSync(string key) 同步
e. 数据的清空,清理本地数据缓存
wx.clearStorage(Object object) 异步
wx.clearStorageSync() 同步
26、说一下小程序页面之间的传值?
URL 传值
这种方式最常用,比如通过 wx.navigateTo({}) 直接通过跳转页面的 URL 进行传值:
wx.navigateTo({
url: `../detail/detail?cid=${cid}&access_token=${access_token}`
});
然后在另一个页面通过 options 进行接收:
onLoad: function (options) {
console.log('cid =' + options.cid);
console.log('access_token =' + options.access_token);
}
这种传值方式只适合值比较少的时候使用。
本地缓存
传值比较多的时候,建议写本地缓存进行传值。
小程序 API 提供了本地缓存数据的 API,默认可以缓存 10M 的数据: wx.setStorageSync('checkin', checkin);
在需要的页面直接调用 wx.getStorageSync 即可获取到存储的本地缓存数据。
全局 app
我们可以利用 app.js 和 app.wxss 中的代码都是全局生效的这一特性,在不同页面之间进行传值。
App({
// 全局变量
globalData: {
host: 'https://xxx/xcx',
version: 2,
versionFeature: '更新说明'
}
})
在使用的页面中通过引入 app.js 来使用定义的全局变量。
const app = getApp();
let app_host = app.globalData.host;
27、本地图片资源无法通过 wxss 获取?
本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用标签来解决。
28、wx.navigateTo 无法打开页面是为什么?如何解决?
一个应用同时只能打开 10 个页面,当已经打开了 10 个页面之后,wx.navigateTo 不能正常打开新页面。请避免多层级的交互方式,或者使用 wx.redirectTo。
建议封装跳转方法, 在方法里面做个判断, 小于 10 层使用 navigateTo, 否则使用 redirectTo
29、tabBar 设置不显示?
tabBar 设置不显示有如下几个原因:
tabBar 的数量少于 2 项或超过 5 项都不会显示;
tabBar 写法错误导致不显示;
tabBar 没有写 pagePath 字段(程序启动后显示的第一个页面)
30、小程序调用后台接口遇到哪些问题?
数据的大小有限制,超过范围会直接导致整个小程序崩溃,除非重启小程序;
小程序不可以直接渲染文章内容页这类型的 html 文本内容,若需显示要借助插件,但插件渲染会导致页面加载变慢,所以最好在后台对文章内容的 html 进行过滤,后台直接批量替换 p 标签 div 标签为 view 标签,然后其它的标签让插件来做,减轻前端处理的时间。
31、小程序的登录流程?
小程序登录
调用 wx.login() 获取 code
调用 wx.request() 发送 code 到我们自己的服务器(我们自己的服务器会返回一个登录状态的标识,比如 token)
将登录状态的标识 token 进行存储,以便下次使用
请求需要登录状态的接口时,带上这个 token。
32、请谈谈微信小程序作用?
小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户 扫一扫 或者 搜一下 即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。
对于开发者而言,小程序开发门槛相对较低,难度不及 APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。
33、分析微信小程序的优劣势?
优点:
可进行各种功能开发,比传统网页实现的功能更全面;
小程序支持模糊搜索,在符合关键字的搜索结果中小程序就能展现。小程序可以与公众号关联,公众号能给小程序带来流量,同时小程序也能给公众号带来粉丝;
平台流量大:依托于微信平台,用户基数大,使用频繁,使得小程序在社交分享方面有天然的优势;
线上广告推广,广告成本低,降低企业成本;
加载速度:小程序加载速度要快,小程序的基本元素是不需要加载的;
安全性:小程序因为代码都上传到了微信服务器上,所以安全性是比较高的。
缺点:
微信小程序对包大小有限制,单个包最大不能超过 2M,这样导致无法开发一些大型的小程序。但是微信小程序正在努力解决这方面的问题,不断扩大分包的数量;
小程序的技术框架还不稳定,开发方法时常有修改,导致短时间内经常要升级维护;
不能跳转外链网址,所以间接影响了小程序的开放性;
不能直接分享到朋友圈,少了一个重要的推广方式;
需要像 APP 一样审核上架,这点比 HTML5 即做即发要麻烦些,不过审核也比较快。