微信小程序的常见知识点

生来就可爱ヽ(ⅴ<●) 提交于 2019-12-04 21:55:18

1.登录

关键用户标识 OpenId 开发者识别用户 UnionId 开发者实现多个小程序、公众号、APP之间的数据互通

关键Api wx.login wx.checkSession wx.authorize wx.getUserInfo

利用OpenId创建用户体系

a.小程序客户端通过wx.login获取code

b.传递code向服务端,服务器返回openid和会话密钥session_key,此时开发者服务端可以利用openid生成用户入库,再向小程序客户端返回自定义登录态

c.小程序客户端缓存自定义登录态

利用Unionid创建用户体系

a.用户关注某个相同主体公众号,进行微信登录授权,通过wx.login可以直接获取到unionid

b.结合wx.getUserInfo和<button open-type="getUserInfo"></button>两种方式引导用户主动授权,主动授权后通过返回的信息和服务端交互,即可拿到unionid建立用户体系。然后由服务端返回登录态

2.图片导出

借助canvas元素,将需要导出的样式首先在canvas画布上绘制出来

借助微信提供的canvasToTempFilePath导出图片,最后再使用saveImageToPhotosAblum(需要授权)保存图片到本地

3.数据统计

埋点sdk 每一个Page中都有一个Page方法,接受一个生命周期函数。对Page进行依次包装,篡改它的生命周期和点击事件,混入埋点代码,不干扰业务逻辑,只要做一些简单的配置即可埋点

微信本身提供的数据分析能力,微信本身提供了常规分析和自定义分析两种数据分析方式。借助小程序数据助手这款小程序可以很方便的查看。

4.工程化

gulp的task

a.实时编译less文件至相应目录

b.引入支持async,await的运行时文件

c.编译字体文件为base64并生成相应css文件,方便使用

d.依赖分析哪些地方引用了npm包

e.检查代码规范

5.架构

View层用来渲染页面结构

AppService层用来逻辑处理、数据请求、接口调用

视图层和逻辑层通过系统层的JSBridage进行通信

6.View - WXML

支持数据绑定 支持逻辑算术、运算 支持模板、引用 支持添加事件

WXML-Compiler->JS-data->Virtual DOM-Virtual DOM->DOM Tree

7.View - WXSS

支持大部分css特性

WXSS-Compiler->JS-Width,DPR->CSS

8.尺寸单位

rpx(responsive pixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx

9.组件

视图容器 基础内容 链接、导航 表单 操作反馈 媒体 地图 画布

10.原生组件

cavanas video map textarea

11.获取用户信息流程

wx.login session_key wx.checkSession

12.性能优化

view部分是运行在webview上,前端领域的大多数优化方式都有用

加载优化 - 减少代码包的大小(压缩、清理无用代码和资源文件、减少代码包中的图片等资源文件的大小和数量、分包加载)

首屏加载 - 异步数据不需要等待页面渲染完成,利用数据stroge API对异步数据进行缓存,先展示页面骨架和基础内容,操作即时反馈

13.数据流管理

WePY默认支持Redux,在脚手架生成项目的时候可以内置

Mpvue作为Vue的移植版本,当然支持Vuex,同样在脚手架生成项目的时候可以内置

14.mpvue

大方向

  通过mpvue提供mp的runtime适配小程序

  通过mpvue-loader产出微信小程序所需要的文件结构和模块内容

具体问题

  如何预编译生成render function

  如何预编译生成wxml、wxss、wxs

  如何patch出diff

  如何更新视图

  如何建立小程序事件代理机制,在事件代理函数中触发与之对应的vue组件事件响应

  如何建立vue实例与小程序Page实例关联

  如何建立小程序和vue生命周期映射关系,能在小程序生命周期中触发vue生命周期

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!