利用缓存
利用storage API, 对变动频率比较低的异步数据进行缓存,二次启动时,先利用缓存数据进行初始化渲染,然后后台进行异步数据的更新,这不仅优化了性能,在无网环境下,用户也能很顺畅的使用到关键服务; 避免白屏:先展示页面骨架和基础内容及时反馈
提前请求
异步请求可以在页面onLoad就加载,不需要等页面ready后在异步请求数据;当然,如果能在前置页面点击跳转时预请求当前页的核心异步请求,效果会更好;
避免白屏
可以在前置页面将一些有用的字段带到当前页,进行首次渲染(列表页的某些数据–> 详情页),没有数据的模块可以进行骨架屏的占位,使用户不会等待的很焦虑,甚至走了;
及时反馈
及时的对需要用户等待的交互操作进行反馈,避免用户以为小程序卡了,无响应
小程序渲染原理
双线程下的界面渲染,小程序的逻辑层和渲染层是分开的两个线程。在渲染层,宿主环境会把WXML转化成对应的JS对象,在逻辑层发生数据变更的时候,我们需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层,再经过对比前后差异,把差异应用在原来的Dom树上,渲染出正确的UI界面。
避免使用不当setData
在数据传输时,逻辑层会执行一次JSON.stringify来去除掉setData数据中不可传输的部分,之后将数据发送给视图层。同时,逻辑层还会将setData所设置的数据字段与data合并,使开发者可以用this.data读取到变更后的数据。因此,为了提升数据更新的性能,开发者在执行setData调用时,最好遵循以下原则: 不要过于频繁调用setData,应考虑将多次setData合并成一次setData调用;
切勿在后台页面进行setData
在一些页面会进行一些操作,而到页面跳转后,代码逻辑还在执行,此时多个webview是共享一个js进程;后台的setData操作会抢占前台页面的渲染资源;
简单描述下微信小程序的相关文件类型。
小程序:pages ——index:index.js(页面逻辑) /index.wxml (页面结构)/index.wxss (页面样式表) / index.json (页面配置) App.js 小程序逻辑 App.json 小程序公共设置 App.wxss 小程序公共样式表
有哪些参数传值的方法?
一、给HTML元素添加data-*属性来传递我们需要的值,然后通过e.currentTarget.dataset或onload的options参数获取。但data-名称不能有大写字母和不可以存放对象 二、设置id 的方法标识来传值通过e.currentTarget.id获取设置的id的值,然后通过设置全局对象的方式来传递数值 三、在navigator(那f给特)中添加参数传值 4.全局变量
简述微信小程序原理?
JavaScript:首先JavaScript的代码是运行在微信App中的,并不是运行在浏览器中 WXML:WXML微信自己基于XML语法开发的 WXSS 不支持所有的css 微信的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现。 小程序分为两个部分webview和appService。其中webview主要用来展现UI,appService有来处理业务逻辑、数据及接口调用。它们在两个进程中运行,通过系统层JSBridge(js不锐之)实现通信,实现UI的渲染、事件的处理
小程序的双向绑定和vue哪里不一样?
小程序直接this.data的属性是不可以同步到视图的,必须调用: this.setData({ noBind:true })
小程序的wxss和css有哪些不一样的地方?
1、wxss的图片引入需使用外链地址;二、没有Body;样式可直接使用import导入
webview中的页面怎么跳回小程序中?
wx.miniProgram.navigateTo()
小程序关联微信公众号如何确定用户的唯一性?
使用wx.getUserInfo方法withCredentials为 true 时 可获取encryptedData(因快死谈),里面有 union_id(有你嗯)。后端需要进行对称解密
如何实现下拉刷新?
用view代替scroll-view,设置onPullDownRefresh函数实现
使用webview直接加载要注意哪些事项?
一、必须要在小程序后台使用管理员添加业务域名;二、h5页面跳转至小程序的脚本必须是1.3.1以上;三、微信分享只可以都是小程序的主名称了,如果要自定义分享的内容,需小程序版本在1.7.1以上;四、h5的支付不可以是微信公众号的appid,必须是小程序的appid,而且用户的openid也必须是用户和小程序的。
小程序调用后台接口遇到哪些问题?
1、数据的大小有限制,超过范围会直接导致整个小程序崩溃,除非重启小程序; 2、小程序不可以直接渲染文章内容页这类型的html文本内容,若需显示要借住插件,但插件渲染会导致页面加载变慢,所以最好在后台对文章内容的html进行过滤,后台直接处理批量替换p标签div标签为view标签,然后其它的标签让插件来做,减轻前端的时间
webview的页面怎么跳转到小程序导航的页面?
小程序导航的页面可以通过switchTab,但默认情况是不会重新加载数据的。 若需加载新数据,则在success属性中加入以下代码即可: success: function (e) { var page = getCurrentPages().pop(); if (page == undefined || page == null) return; page.onLoad(); } webview的页面,则通过 wx.miniProgram.switchTab({ miniProgram(米妮破干木) url: '/pages/index/index' })
小程序和Vue写法的区别?
1、循环遍历的时候:小程序是wx:for="list",而Vue是v-for="info in list" 2、调用data模型的时候:小程序是this.data.uinfo,而Vue是this.uinfo;给模型赋值也不一样,小程序是this.setData({uinfo:1}),而Vue是直接this.uinfo=1
如何进行组件话模块化设计
通过WXML的import和include(因裤的)来使用文件模版 使用WXSS的@import引用WXSS文件 使用JS的require来引用JS文件
bindtap和catchtap的区别是什么?
bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡
简述下wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别?
wx.navigateTo()保留当前页面,跳转到指定页面 wx.redirectTo()关闭当前页面,跳转到指定页面 wx.switchTab()切换到tabar页面,并且关闭所有tabbar页面 wx.navigateBack()返回之前到页面 wx.reLaunch()(锐浪齿)关闭所有缓存页面