面试题-小程序

小程序

小程序优势:

因为本身小程序优势很大,有微信里巨大的用户群体,而且不用下载app,下载一个微信就都有了,简单方便,速度快、不占内存,安全性也特别高,而且小程序提供了丰富的api,带有多种多样的功能:拍视频、录音、重力感应、小游戏等等,能够快速开发,开发成本低,开放的入口比较多:扫码、发送朋友、搜索、附近,还能与公众号或小程序关联。

小程序优化:

在开发过程中,由于产品的更换比较大并且老板要求时间比较紧张,考虑到的产品优化性能问题比较少,所以我是先开发后优化【模版template组件化,能够重复使用;减少本地静态资源,例如图片等,尽量使用连接图片;尽量不使用大图片、长列表图片,占内存而且容易促使系统回收页面,出现掉帧、切换卡顿的情况;对一些静态资源压缩合并;减少默认data的大小(视图层<=用户传输的数据,需要将其转化为字符串形式,同时把转换后的数据内容拼接成js脚本的形式向两边传递=>逻辑层);behaviors;分包加载;】

小程序留存:

一开始的产品定向是,会员模式【在我们小程序上开通会员能够享受优化价格购买商品,并且拥有自己的店铺,分享好友购买能够获得相应的收益】=>之后在会员模式基础上加上奖励模式以及产品合伙人:超级会员模式【成为会员后,每周达到相应任务可获得奖励,并且添加了产品合伙人,向公司交18888能够获得产品合伙人资格,并且可以销售会员,能够得到相应奖励以及团队收益】=>开始发展活动促销,一元购、签到、拼团购等等【发现用户留存明显提升】=>全民会员【进入此小程序商城的每一个用户都是会员,购买即能享受收益(需要分享出去,并且好友能够成功购买后)】=>发展线下


小程序生命周期

onLoad()页面加载时触发,只会调用一次,可获得当前页面路径参数;

onShow()页面显示/切入前台时触发,一般用来发送数据请求;

onReady()页面初次渲染完成时触发,只会调用一次,代表页面已可和视图层进行交互;

onHide()页面隐藏/切入后台时触发,如底部tab切换到其他页面或小程序切入后台;

onUnload()页面卸载时触发,如redirectTo时或navigateBack到其他页面。

Page生命周期实例图

小程序主要目录和文件的作用

project.config.json:项目配置文件,用的最多的就是配置是否开启https校验;

App.js:设置一些全局的基础数据等;

App.json:底部tab、标题栏和路由等设置;

App.wxss:公共样式,引入iconfont等;

pages:包含具体的页面;

index.json:配置当前页面标题、引入组件等;

index.js:页面的逻辑,请求和数据处理;

index.wxml:页面结构;

index.wxss:页面样式;


wxml于html的对比

#都是用来描述页面结构;

#都是由标签和属性等构成;

#标签名字不一样,切小程序标签更少,单一标签更多了;

#多了一下wx:if这样的属性以及{{}}这样的表达式;

#WXML仅能在微信小程序开发者工具中预览,而HTML在浏览器预览;

#组件封装不同,WXML对组件进行了重新封装;

#小程序运行在 JS Core 内,没有DOM树和window对象,小程序无法使用window对象和document对象。


WXSS与CSS对比

#都是用来描述页面的样式;

#WXSS拥有CSS大部分特性,也做了一些扩充和拓展;

#WXSS新增了rpx【1px=2rpx】;

#WXSS支持部分CSS选择器;

#WXSS提供全局样式和局部样式;


如何封装小程序的数据请求

在根目录utils.js里封装函数,带上token和异常处理,采用promise。

封装公共方法【倒计时等】在具体的页面导入


小程序页面有哪些数据传递的方法

#使用全局变量

#页面跳转或重定向时,采用url参数

#使用组件模版template传递参数

#使用缓存传递


小程序双向绑定和Vue的对比

大体相同,但小程序直接this.data的属性不能同步到视图,必须this.setData({})


小程序原理

#小程序本质是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生API;

#小程序的架构是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据更改来实现;

#小程序技术和前端开发差不多,采用JS、WXML和CSS三种技术共同开发;

#功能可分为webview和appService两个部分;

#webview用来展现UI,appService用来处理业务逻辑、数据以及接口调用;

#两个部分在两个进程中运行,通过系统层JSBridge实现通信,实现UI的渲染、事件的处理等。


小程序优化方案

#组件化方案

#分包加载【如果小程序项目较大的话】

#减少默认data的大小【setData】

小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道。当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。而 evaluateJavascript 的执行会受很多方面的影响,数据到达视图层并不是实时的

#图片

大图片和长列表图片导致的问题:

1、【图片资源】目前图片资源的主要性能问题在于大图片和长列表图片上,这两种情况都有可能导致IOS客户端占用内存上升,从而触发小程序页面回收

2、【图片对内存的影响】在ios上,小程序的页面是由多个WKWebView组成的,在系统内存紧张时,会回收掉一部分WKWebView。这也是问题1⃣️出现的原因;

3、【图片对页面切换的影响】除了内存问题外,大图片也会造成页面出现掉帧、切换卡顿的情况

代码包大小导致的问题:

4、【代码包大小的优化】

小程序一开始代码包限制为1MB,后来增加到了2MB。代码包上线的增加对于开发者实现了丰富的功能,但对于用户来说,也增加了下载流量和本地空间的占用

开发者在实现业务逻辑的同时,也需尽量减少代码包的大小,因为代码包直接影响到下载速度,从而影响用户首次打开体验。【可使用分包加载】

5、【控制代码包内图片资源】

尽量使用外链接并压缩本地图片资源包

6、【及时清理没有使用到的代码和资源】

7、【骨架屏加载】传送门


微信小程序的优劣势

优势:

1、无需下载,通过搜索或者扫一扫就饿可以打开;

2、良好的用户体验:打开速度快;

3、开发成本比App低;

4、安卓上可以添加到桌面,与原生App差不多;

5、为用户提供了良好的安全保障。小程序的发布,微信拥有一套严格的审查流程,不能通过审核的小程序无法发布到线上;

劣势:

1、限制比较多。页面大小不能超过2M,不能打开超过5个层级的特面;

2、样式单一。小程序的部分组件已经是成型的落了,样式不可修改;

3、推广面窄不能分享朋友圈,只能通过分享给朋友,附近小程序推广;

4、依托于微信,无法开发后台管理系统。


微信小程序与H5的区别

1、运行环境不同;

传统的H5运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览器,是微信开发团队基于浏览器内核完全重构的一个内置解析器。针对小程序专门做了优化,配合自己定义的开发语言标准,提升了小程序的性能。

2、开发成本的不同

只在微信中运行所以不用顾虑浏览器兼容问题,不用担心生产环境中出现不可预料的bug

3、获取系统级权限不同

系统级权限都可以和微信小程序无缝衔接

4、应用在生产环境的运行流畅度

长久以来,当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时,它的体验总是不尽人意,需要不断的对项目优化来提高用户体验。微信小程序运行环境独立。


小程序登陆

如果用户已经关联公众号,或者曾经登陆过app或公众号,则用户打开小程序时,开发者可以直接通过wx.login获取到该用户的UnionId,无需用户再次授权。链接

关联App【ios、安卓】时需要用unionId做为唯一标识。【数据表】

1、微信分别下发小程序、App的openId是不同的,而下发的unionId时相同的;

2、产品设计:展示用户自己的店铺。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容

  • 因新工作主要负责微信小程序这一块,最近的重心就移到这一块,该博客是对微信小程序整体的整理归纳以及标明一些细节点,初...
    majun00阅读 7,333评论 0 9
  • 1、简单描述下 微信小程序的相关文件类型? 答:微信小程序项目结构主要有四个文件类型,如下 一、WXML (Wei...
    奋斗1216阅读 24,987评论 4 91
  • 今天问钟意,回不回学校了,她说不回了,这样也好,做自己喜欢做的事情。 写了复学申请,明天办完复学...
    星球里的外星人阅读 151评论 0 0
  • 早上醒来 天就灰蒙蒙的 不出乎我的意料 因为昨日我就看了天气预报 尽管如此 我还是会不开心 我不喜欢阴天 更不...
    七寻一见阅读 223评论 0 0
  • 很久没有看一部动画看到抱着膝盖蜷缩在电脑椅上哭得停不下来了。还是这样一部温馨治愈的动画。 这部动画剧情很简单,人物...
    维诺尔德阅读 1,423评论 1 4