微信小程序学习笔记

原文链接

一、微信小程序pk网页

1、微信小程序是不是网页?

微信小程序使用的是wxml绘制页面结构,wxss绘制页面样式,js实现页面逻辑。好像和网页的html+css+js类似,其实他们之间还是有很多不同的:

  1. 网页的运行环境是浏览器(webview);小程序只是wxml+wxs运行在webview中,js是单独的一个线程
  2. 网页的页面跳转、前进、后退都是在同一个浏览器(webview)中完成的;小程序的每一个页面都是一个新的webview,这些页面存在程序栈中,最多10个webview
  3. 微信小程序是运行在一个新的进程中,是一个新的程序,和微信独立运行;网页的话是依赖宿主环境的。
  4. 小程序不是网页,但是小程序是混合开发(更深)

2、微信小程序的工作原理

  1. 为了达到app的极致体验,微信采用 ZSTD 算法对小程序代码包进行压缩,以尽可能降低下载过程中传输的数据量,在第一次打开小程序的时候将压缩包下载到本地,从而减少资源请求
  2. 小程序的渲染层和逻辑层分别由2个线程管理:渲染层的界面使用了WebView 进行渲染;逻辑层采用JsCore线程运行JS脚本,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转
  3. 逻辑层发送网络请求经由Native转发

在这里插入图片描述

3、微信小程序和网页的优劣对比

  1. 小程序的页面加载的速度明显比网页快;(资源提前缓存了;渲染线程和逻辑线程共同工作)
  2. 小程序的js动画没有网页的js动画流畅;(小程序的js操作dom需要逻辑线程和渲染线程通过native交互,有损耗;微信提供了wxs解决这个问题)
  3. 网页的适应性强,只要有浏览器(webview)就可以运行;小程序必须依赖微信环境(或微信开发这工具)
  4. 小程序可以获取微信开放的更多信息
二、微信生态开放的信息

在这里插入图片描述

注:

获取用户手机号:

获取用户信息:

三、开发框架

微信提供的语言有自己的语法,有一定的学习成本;各大app都有自己的小程序,每个小程序的语法可能不同;

所有选择框架是开发小程序的不二选择,市面上的框架大同小异,技术选择就看自己的实际情况而定;

1、kbone(官方)

官方推荐的框架;kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

因为 kbone 是通过提供适配器的方式来实现同构,所以它的优势很明显:

  • 大部分流行的前端框架都能够在 kbone 上运行,比如 Vue、React、Preact 等。
  • 支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。
  • 提供了常用的 dom/bom 接口,让用户代码无需做太大改动便可从 Web 端迁移到小程序端。
  • 在小程序端运行时,仍然可以使用小程序本身的特性(比如像 live-player 内置组件、分包功能)。
  • 提供了一些 Dom 扩展接口,让一些无法完美兼容到小程序端的接口也有替代使用方案(比如 getComputedStyle 接口)。

2、uni-app(Dcloud)

uni-app的优势:

  • uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。
  • uni-app对前端开发人员比较友好,学习成本比较低,首先uni-app是基于vue.js的。其次封装的组件和微信小程序的组件一毛一样,所以对于现在的主流前端人员来说学习几乎0成本,如果你作为一个前端,没有接触过vue和微信小程序的话那建议你多去加加油了。
  • uni-app使用hbuilderX进行开发,hbuilderX对于vue语法等支持可以说是比较完备了。使用hbuilderX进行开发开发速度比较快

3、mpvue(美团)

mpvue的优势:

  • 彻底的组件化开发能力:提高代码复用性
  • 完整的 Vue.js 开发体验
  • 方便的 Vuex 数据管理方案:方便构建复杂应用
  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  • H5 代码转换编译成小程序目标代码的能力

4、Taro(京东)

taro的优势:

  • 框架支持,在 Taro 3 中可以使用完整的 React/Nerv / Vue/Vue3 开发体验
  • 多端适配,目前 Taro 3 可以支持转换到 微信/京东/百度/支付宝/字节跳动/QQ 小程序 以及 H5 端。

四、可能会遇到的问题

1、动画卡顿

现象:css3动画性能还好,js的手势动画会比较卡顿

原因:小程序js操作dom需要逻辑层和渲染成交互,有性能问题

解决办法:使用wxs开发js动画,wxs是小程序提供的一个运行在渲染层的阉割版js主要是用来处理频繁的js操作dom问题

2、首页自定义tab

现象:微信小程序提供了原生的tab,但是样式单一,不支持修改;官方提供的自定义tab的解决办法,会导致tab闪烁

原因:…

解决办法:将首页使用单页面实现,底部使用公共的tab组件,做好页面优化,性能还是可以的,办法随笨,不过问题解决了

3、opacity动画卡顿

现象:滚动时,顶部导航,透明度渐现动画,在opacity变为1时卡一下;

原因:opacity的值有0.9变为1时,会卡顿,原因…

解决办法:在设置opacity的值时,设置为0.9999,接近1但是不为1,这就规避了这个问题,不过这可能不是最好的解决办法。

五、总结

不经历风雨怎么能见到彩虹,小程序的诞生伴随着一个又一个的问题,新的问题同样会带来新的挑战,只有正面问题,迎难而上,将问题一一解决,才能不断成长不断进步。在未来工作中,应该积极发现问题、解决问题,将小程序做的更好。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值