1.简单描述下微信小程序的相关文件类型
- wxml模板文件:是框架设计的一套标签语言,结合基础组件,事件系统、可以构建出页面的结构;
- wxss样式文件:是一套样式语言,用于描述wxml的组合样式;
- js脚本逻辑文件:逻辑处理网络请求;
- json配置文件:小程序设置,如页面注册,页面标题及tabBar;
- app.json:整个小程序的全局配置,包括:
a.pages:所有路径文件
b.网络设置(网络超时时间)
c.界面表现(网页注册)
d.window:背景色,导航样式,默认标题
e.底部tab等 - app.js可以没有内容,监听并处理小程序的生命周期函数,声明全局变量
- app. wxss全局配置的样式文件
2.请谈谈wxml和标准的html的异同
- 都是用来描述页面的结构;
- 都由标签,属性等构成;
- 标签名字不一样,且小程序标签更少,单一标签更多;
- 多了一些wx:if这样的属性以及{{}}这样的表达式
- wxml仅能在微信小程序开发者工具中预览,而HTML可以在浏览器预览;
3.请谈谈wxss和css的异同
- 都是用来描述页面的样子;
- wxss具有css的大部分的特性,也做了一些扩充和修改;
- wxss新增了尺寸单位,wxss在底层支持新的尺寸单位rpx;
- wxss仅支持部分css选择器;
- wxss提供全局样式与局部样式;
- wxss不支持window和dom文档流;
4.小程序和vue写法的区别
- 遍历时:
小程序 wx:for="lists"
vue v-for="item in lists"
- 调用data模型时:
小程序:
this.data.item //调用
this.setData({item:1}) //赋值
vue:
this.item //调用
this.item=1 //赋值
5.小程序页面有哪些传递数据的方法?
- 使用全局变量实现数据传递;
- 页面跳转时或重定向时,使用url带参数传递数据;
- 使用组件模板template传递参数;
- 使用缓存传递参数;
- 使用数据库传递参数;
6.请谈谈小程序的生命周期函数
onLoad():页面加载时触发,只会调用一次,可获得当前页面路径中的参数;
onShow():页面显示/切入前台时触发,一般用来发送数据请求;
onReady():页面初次渲染完成时触发,只会调用一次,代表页面已可和视图层进行交互;
onHide():页面隐藏/切入后台时触发,如底部tab切换到其他页面或小程序切入后台等
7.数据请求怎么封装
- 将所有的接口放在统一的js文件中并导出(或者将请求地址、头、方法在一个js文件里统一定义为一个常量并导出)
- 在app.js创建封装请求数据的方法
- 在子页面中调用封装的方法请求数据
8.参数传递
- 给HTML元素中添加data-*属性来传递需要的值,之后通过e.currentTarget.dataset或onload的param参数获取。注意不能有大写字母,不可以存放对象
- 跳转页面时通过navigator传递需要的参数值
- 设置id的方法标识,通过e.currentTarget.id获取设置的id值,然后通过设置全局变量的方法来传递数值
9.生命周期函数
- onLoad——页面加载,调一次
- onShow——页面显示,每次打开页面都调用
- onReady——初次渲染完成,调一次
- onHide——页面隐藏,当navigateTo或底部tab切换时调用
- onUnload——页面卸载,当redirectTo或navigateBack时调用
10.小程序的双向绑定和vue哪里不一样
小程序直接this.data的属性是不可以同步到视图的,必须调用this.setData({})
11.px和rpx的转换:1px=2rpx
12.如何自定义组件(弹窗)
(1)先创建一个components文件夹,用来存放所有自定义组件的,目录结构依然是js,wxml,json,wxss
(2)基本配置
json——进行自定义组件声明
{
"component": true
}
(3)使用组件
假如在index.wxml中使用这个自定义的组件,首先在index.json中进行声明。
{
"usingComponents": {
"toastdemo": "/components/toastdemo/toastdemo"
}
}
(4)接着在index.wxml中引用
(5)然后在index.js进行配置
(6)使用时直接执行this.toastdemo.showToast(‘弹框组件调用成功’,2000)就可以了
13.小程序内的页面跳转
- wx.navigateTo——保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面(参数必须为字符串)
- wx.redirectTo——关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
- wx.switchTab——跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,路径后不能带参数
- wx.navigateBack——关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
- wx.reLaunch——关闭所有页面,打开到应用内的某个页面
14.小程序的优点和缺点
优点
- 无需下载
- 打开速度快
- 开发成本低
- 为用户提供良好的安全保障。发布有一套严格的审查流程,不能通过审查的程序无法发布上线
- 服务请求快
缺点
- 依托微信,不能开发后台管理功能
- 大小限制不能超过2M,不能打开超过5个层级的页面
15.简述小程序的原理
小程序分为两个部分webview和appService,webview用来展现UI,appService用来处理业务逻辑、数据及接口调用,它们在两个进程中运行,通过系统层JSBridge实现通信,完成UI渲染、事件处理。
16.提高小程序的应用速度的方法
- 减少默认data的大小
- 组件化方案,公用的如弹框等写个自定义的组件,然后调用
17.setData的回调函数
微信小程序的setData实现是和react的setData实现类似的,所以它也是一个异步函数,并且有回调函数的参数,当然平时小量数据我们可能并没有感觉到它的异步,但是为了确保逻辑的正确执行,在需要用到setData后 data里的数据的步骤,请写入setData的回调函数中,如下示例:
this.setData({
a: this.data.a++
},()=>{
})
18.如何实现下拉刷新
- 先在app.json或page.json中配置enablePullDownRefresh:true
- page里用onPullDownRefresh函数,在下拉刷新时执行
- 在下拉函数执行时发起数据请求,请求返回后,调用wx.stopPullDownRefresh停止下拉刷新的状态
19.bindtap和catchtap的区别是什么
bindtap不会阻止冒泡事件,catchtap阻止冒泡
20.微信小程序和h5的区别
①运行环境不同(小程序在微信运行,h5在浏览器运行);
②开发成本不同(h5需要兼容不同的浏览器);
③获取系统权限不同(系统级权限可以和小程序无缝衔接);
④应用在生产环境的运行流畅度(h5需不断对项目优化来提高用户体验)
21.小程序关联微信公众号如何确定用户的唯一性?
使用wx.getUserInfo方法 withCredentials为true时,可获取encryptedData,里面有union_id.后端需要进行对称解密。
22.webview中的页面怎么跳回小程序中
- 先在管理后台配置域名白名单,
- 然后引入jweixin-1.3.2.js(https://res.wx.qq.com/open/js/jweixin-1.3.0.js)
wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})
wx.miniProgram.navigateTo({url: '/path/to/page'})
23.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'
})
24.小程序和小程序之间的跳转
- 在同一主体公众号上关联2个小程序appid,
- 用navigator,对应设置一些属性即可
- target:miniProgram——其他小程序
- target:self——当前小程序