本文共 3866 字,大约阅读时间需要 12 分钟。
一、小程序开发框架组成介绍
首先介绍一个小程序宿主环境差异,其中iOS是基于JavaScriptCore,Android是基于X5内核,IDE是基于nwjs。
1.WXML (WeiXin Markup Language)
它是框架设计的一套标签语言,结合组件、WXS和事件系统,可以构建出页面的结构。你需要了解他的相关知识:
1)数据绑定
2)列表渲染
3)条件渲染
4)模板及引用
2.WXSS
它是一套样式语言,用于描述WXML的组件样式。(CSS也是一套样式语言,是一种样式表语言,用来描述HTML或XML文档的呈现)你需要了解它的相关知识:
1)响应式像素
2)样式
3)选择器
3.WXS(Wei Xin Script)
它是它是小程序自己的脚本语言
4.JavaScript
JavaScript是一种轻量的、解释性的、面对对象的头等函数语言,是一种动态的基于原型和多范式的脚本语言,支持面向对象、命令式和函数式的编程风格。
Nodejs中的JavaScript包括三个组成部分1)ECMAScript 2)Native 3) NPM
浏览器中的JavaScript包括三个组成部分1)ECMAScript 2)DOM 3)BOM
二、MINA框架
三、小程序运行和加载机制
1.小程序的启动分为冷启动和热启动。
四、小程序的声明周期
1.小程序的生命周期
App() 必须在 app.js 中调用,必须调用且只能调用一次,app.js中定义了一些应用的生命周期函数
1.onLaunch 初始化小程序时触发,全局只触发一次
2.onShow 小程序初始化完成或用户从后台切换到前台显示时触发
3.onHide 用户从前台切换到后台隐藏时触发
4.onError 小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
后台: 点击左上角关闭,或者按了设备 Home 键离开微信,并没有直接销毁,而是进入后台
前台:再次进入微信或再次打开小程序,相当于从后台进入前台。
2.小程序界面的声明周期
1)onLoad 2)onShow 3)onReady 4)onHide 5)onUnload
其中viewThread 和AppService Thread两条线程相互配合完成界面的加载
五、小程序的路由
1.初始化 --》新页面入栈
2.打开新页面 --》新页面入栈
3.页面重定向 --》当前页面出栈,新页面入栈
4.页面返回 --》页面不断出栈,直到目标返回页,新页面入栈
4.Tab切换 --》页面全部出栈,只留下新的Tab页面
5.重加载--》页面全部出栈,只留下新的页面
六、小程序的事件流
注意冒泡机制
七、小程序开发组件
建议参考微信开放平台去浏览
八、小程序开发API
主要包括八个模块
- 网络
- 媒体
- 文件
- 数据缓存
- 位置
- 设备
- 界面
- 开放接口
建议去参考微信开发平台小程序开发之API,具体了解每个部分的作用。
九、微信开放功能
1.登录授权
2.微信支付
3.模板消息
4.转发分享
5.打开APP
十、请谈谈微信小程序主要目录和文件的作用?
- project.config.json:项目的配置文件,例如是否开启https校验
- App.json:底部tab菜单(tab字段)、小程序所有页面的顶部背景颜色,文字颜色定义(window)、小程序所有页面路径(pages字段)
- App.js:设置一些全局性的基础数据
- App.wxss:公共样式、引入iconfont等
- Pages:里面包含具体一个个页面
- index.json: 配置当前页面标题和引入的组件等
- index.wxml:页面布局结构
- index.wxss :页面样式表
- index.js: 页面的逻辑,请求和数据处理等
十一:请谈谈wxml与标准的html的异同?
- 都是用描述页面的结构
- 都是有标签和属性构成
- 标签名字不一样,且小程序标签更少,单一标签更多
- 多了有些wx:if这样的属性以及{ {}}这样的表达式
- WXML仅能在微信小程序开发者工具中预览,而HTML可以再浏览器内预览
- 组件封装不通,WXML对组件进行了重新封装
- 小程序运行在JS Core内,没有DOM树和window对象,小程序中无法使用window对象和document对象
十二:请谈谈WXSS和CSS的异同?
- 都是用来描述页面的样式
- WXSS具有CSS大部分特性,也做了一些扩充和修改
- WXSS新增加了尺寸单位,WXSS在地城支持新的尺寸单位rpx
- WXSS仅支持部分CSS选择器
- WXSS提供全局样式与局部样式
十三:你是怎样封装微信小程序的数据请求?
- 在根目录下创建utils目录及api.js和apiConfig.js文件
- 在apiConfig.js封装基础的get,post和put,upload等请求方法,设置请求体,带上token和异常处理等
- 在api.js中引用apiConfig.js封装好的请求方法,根据页面数据请求的urls,设置对应的方法并导出
- 在具体页面中导入
十四:小程序页面间有哪些传递数据的方法?
- 给标签添加data-属性来传递值,然后通过e.currentTarget.datase或onload的param参数获取。注:data-名称不能有大写字母、不可以存放对象
- 设置id的方法表示来传值,通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值
- 在navigator中添加参数数值
- 页面跳转或重定向时,使用url带参数传递数据
- 使用组件模板template传递参数
- 使用缓存传递参数
- 使用数据库传递参数
十五:哪些方法来提高微信小程序的应用速度
- 提高页面的加载速度
- 用户行为预测
- 减少默认data的大小
- 组件化方案
十六:微信小程序的原理?
- Javascript 的代码是运行在微信App中的,因此一写h5技术的应用需要微信APP提供对应的API支持
- wxml微信自己基于xml语法开发的,因此在开发时只能使用微信提供的现有标签,html标签是无法使用的;
- wxss具有css的大部分特性,但并不是所有都支持没有详细文档(wxss的图片引入需要使用外链地址,没有body,样式可直接使用import导入)
- 微信的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通多对数据的更改来实现。
- 小程序功能分为webview和APPservice,webview主要用来展示UI,appservice用来处理业务逻辑、数据及接口调用,他们在两个进程中进行,通过系统层JABridge实现通信,实现UI的渲染、时间处理。
十七:小程序调用后台接口遇到哪些问题?
- 数据的大小限制,超过范围会直接导致整个小程序崩溃,除非重启小程序。
- 小程序不可以直接渲染文章内容这类型的html文本,显示需借助插件
注:插件渲染会导致页面加载变慢,建议在后台对文章内容的html进行过滤,后台直接处理批量替换p标签div标签为view标签。然后其他的标签让插件来做。
十八:bindtap和catchtap的区别?
- bind事件绑定不会阻止冒泡事件向上冒泡
- catch事件绑定可以阻止冒泡事件向上冒泡
十九:简述wx.navigateTo(),wx.redirectTo(),wx.switchTab(),wx.navigateBack(),wx.reLaunch()的区别?
- 打开新页面:wx.navigateTo
- 页面的重定向:wx.redirectTo
- 页面返回:wx.navigateBack
- Tab切换:wx.switchTab
- 从启动:wx.reLaunch
二十:小程序的声明周期函数
- onLoad():页面加载时触发,只会调用一次,可获取当前页面路径中的参数
- onShow():页面显示/切换前台时触发,一般用啦发送数据请求
- onReady():页面初次渲染完成时触发,只会调用一次,代表页面已可视图层进行交互
- onHide():页面隐藏/切入后台时触发,如底部tab切换到其他页面活小程序切入后台等
- onUnload():页面卸载时触发,如redirectTo或navigateBack到其他页面时。
二十一:小程序onPageScroll方法的使用注意什么?
由于此方法调用频繁,不需要时,可以去掉,不要保留空方法,并且使用onPageScroll时,尽量避免使用setData(),尽量减少setData()的使用频次。
二十二:小程序视图渲染结束回调?
使用setData(data,callback),在callback回调方法中添加后续操作代码。
二十三:小程序是那种事件对象的属性列表?
基础事件(baseEvent):
- type :事件类型
- timeStamp:事件生成时的时间戳
- target:出发事件的组件的属性集合
- currentTarget:当前组件的一些属性集合
自定义事件(CustomEvent):
detail
触摸事件(TouchEvent):
touches
changedTouches
二十四:小程序对wx:if 和hidden 使用的理解?
- wx:if有更高的切换消耗
- .hidden有更好的初始渲染消耗
因此,如果需要频繁切换的情境下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好。
转载地址:http://uzcti.baihongyu.com/