1, 小程序页面有哪些生命周期函数
onLoad: 页面加载
onReady: 页面初次渲染完成
onShow: 页面显示
onHide: 页面隐藏
onUnload: 页面卸载
2, 一页小程序页面有哪些文件组成,分别有什么作用
.wxml: 使用微信框架设计的一套组件构建页面结构
.wxss: 用于设置页面样式, 和css基本一致
.js : 设置页面数据与逻辑
.json: 页面的配置信息
3, 小程序中rpx和px有什么不同
px是固定单位, 指的是物理像素, 小程序样式不建议使用px,而建议用rpx
rpx是相对单位, 小程序把页面宽度统一设置为750rpx, 它可以根据不同屏幕宽度进行自适应,更有利于屏幕适配
4, 列举几个小程序常用组件及用法
view : 视图组件,块级元素, 用于显示块级视图及包裹子视图
text: 文本组件, 用于文字的渲染, 支持换行
Image: 图片组件, 用于渲染本地或在线图片
Button: 按钮组件
Input: 输入框组件
Picker: 选择器组件
Swiper: 轮播图组件
…
5, 简述小程序开发流程
首先在微信公众平台注册小程序账号, 获取appID
填写小程序基本信息,并下载微信开发者工具
使用小程序appID创建小程序项目,并编写完善项目
上传小程序项目为测试版, 由测试人员测试并修改BUG
测试完成后,在微信公众平台提交发布, 人工审核通过即可
6, 小程序中有哪些事件
tap, touchstart, touchmove, touchend, touchcancel,
Input, change, blue, focus, confirm
7, 简述微信小程序原理
微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口微信的架构,是数据驱动的架构模式,它的 UI 和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现
8,小程序的双向绑定和vue哪里不一样
Vue双向绑定使用v-model指令即可实现
小程序双向绑定需要自己绑定value属性和input事件
而且vue中this.data即可修改数据并更新视图,
小程序中只能用this.setData()修改数据才可更新视图
9,. 微信小程序的优劣势
优势
容易上手,基础组件库比较全,基本上不需要考虑兼容问题;
即用即走,不用安装,省流量,省安装时间,不占用桌面
依托微信流量,天生推广传播优势
开发成本比 App 低
缺点
样式单一,部分组件已经是成型了的,样式不可修改,例如:幻灯片、导航入口
相对传统 App 要深很多
限制较多,页面大小不能超过2M。不能打开超过5个层级的页面
10,bindtap和catchtap的区别?
相同点:首先他们都是作为点击事件函数,就是点击时触发。在这个作用上他们是一样的,可以不做区分
不同点:他们的不同点主要是bindtap是不会阻止冒泡事件的,catchtap是阻值冒泡的
11,请谈谈WXSS和CSS的异同?
都是用来设置页面样式
WXSS 具有 CSS 大部分的特性,也做了一些扩充和修改;
WXSS新增了尺寸单位,WXSS 在底层支持新的尺寸单位 rpx;
WXSS 仅支持部分 CSS 选择器;
WXSS 提供全局样式与局部样式
12,小程序和H5的不同
运行环境不同(小程序在微信运行,h5在浏览器运行);
开发成本不同(h5需要兼容不同的浏览器);
获取系统权限不同(系统级权限可以和小程序无缝衔接);
应用在生产环境的运行流畅度(h5需不断对项目优化来提高用户体验);
13, 小程序如何实现分享
只需要实现onShareAppMessage这个函数,即可点击右上角菜单分享
调用API wx.showShareMenu() 开启分享功能, 点击右上角菜单分享
给button组件添加 open-type=“share” 属性, 即可点击按钮执行分享
14, 小程序组件中有哪些生命周期函数
created: 组件实例刚刚被创建时执行
attached: 组件实例进入页面节点树时执行
ready: 组件在视图层布局完成时执行
moved: 组件实例被移动到节点树另一个位置时执行
detached: 组件实例被从页面节点树移除时执行
error: 组件方法抛出错误时执行
15, 小程序中的传值方式有哪些:
(1, 页面(父组件)向子组件传值: 通过调用子组件的props中自定义的属性传值, 或者 通过slot插槽传值
(2, 子组件向父组件(页面)传值: 子组件发射自定义事件, 把数据放入事件函数的参数传递
(3, 页面(父组件)主动读取子组件数据, 通过this.selectComponent()函数可得到子组件实例
(4, 页面到页面之间传值: 通过路由传值, 把数据拼接到url路径上传递, 在目标页面用onLoad参数接收
(5, 使用全局状态管理传值: 在app.js中globalData字段定义全局数据, 可以在每一个页面getApp()引入并读写
(6, 使用数据缓存传值, 在一个页面中wx.setStorage存值, 另一个页面wx.getStogage取值
16,如何实现下拉刷新和触底刷新
(1, 页面的下拉刷新功能默认时关闭状态, 可以在json文件中添加字段允许下拉刷新
“enablePullDownRefresh”: true
然后,下拉页面会自动调用 onPullDownRefresh()函数, 在这里请求新数据
最后,数据请求完成的success函数中,调用wx.stopPullDownRefresh停止下拉刷新的状态
(2, 触底功能默认开启, 当页面滚动到底部,会调用onReachBottom()函数
17,你是怎么封装微信小程序的数据请求的?
(1、将所有的接口放在统一的js文件中并导出
(2、在app.js中创建封装请求数据的方法
(3、在子页面中调用封装的方法请求数据
18,小程序中如何解决跨域问题?
开发时, 可在开发工具的设置选项中勾选”不校验合法域名”, 以忽略跨域限制
发布时, 需在小程序后台开发设置添加小程序中使用的域名地址,使之合法即可
19, 说一些小程序中的常用API及用法
wx.request 发起网络请求
wx.navigateTo 执行路由跳转
wx.showModal 展示模态框
wx.downloadFile 下载文件
wx.setStorage 本地存储
wx.chooseImage 从相册选择图片
wx.getUserInfo 获取用户信息
…
20, 小程序如何获取用户信息?
(1, 使用wx.getUserInfo() 这个API,单目前已废除,建议使用以下方式
(2, 给按钮添加open-type=”getUserInfo”属性, 用bindgetuserinfo事件绑定函数获取
(3, 使用open-data组件标签,添加type属性获取某一个用户信息
21,微信API有哪些限制让你觉得不爽?
个人开发者不能使用支付API
个人开发者不能用webview组件
某些微信API有调用频次限制,例如分享API