小程序技术全解 | 青训营笔记

每天摸鱼鱼
190 阅读4分钟

小程序技术全解 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第15天

刚好我在这个假期也在学习小程序的知识，有了青训营这次的学习，让我对小程序了解了更多，也更好的吸收了以前学习的小程序知识。

本节课的学习目标

  • 认识和了解小程序的业务产品价值
  • 学习和掌握小程序相关技术原理

小程序带来的产品和技术价值还是很大的。

发展历程

发展历程

17、18年是小程序的发展初期，最开始还没有完全对个人开发者开发，直到3月份，小程序正式面向个人开发者开发，从这开始，小程序数量进入爆发期。

image (33).png

同年18年各大厂小程序都相继上线，加速布局小程序生态，19年9月小程序开放贴片广告，正式开始商业化建设。

image (34).png

20年疫情的出现，也加速了各种小程序的出现，同时微信也为小程序赋予了直播和小商店更多的属性，为小程序的商业化带来了更多的可行性。

image (35).png

核心数据

讲完小程序的发展，让我们来看看小程序的一组数据，这组数据是到20年底的数据，咱们可以看出来小程序的数量特别大，虽然从出现到现在不是很多年，但是以后会越来越多的

image (36).png

小程序生态

小程序目前的生态基本都是围绕着一个app去做的，例如抖音小程序，微信小程序，支付宝小程序等。

业务价值

与Web的区别

从发展历程中就可以看出来。

01、有着固定的语法以及统一的版本管理，平台可以更方便的进行审核

02、平台能够控制各个入口，如二维码、文章内嵌、端内分享。入口上也能带来更好的用户体验

03、小程序基于特殊的架构，在流畅度上比WEB更好，具有更优秀的跳转体验。

小程序三大价值

01、渠道价值：

由于小程序的便捷性，依托与APP,小程序能够充分为很多场景导流，例如美团和美团优选小程序带来的流量占比分别是40%和80%

image (1).svg

02、业务探索价值：

相比原生APP来说，小程序的开发难度和成本都降低的很多，这就创造了很多场景开发者能够用小程序来快速试错，不断探索新的业务价值

image.svg

03、数字升级价值

线下到线上如何做？从轻消费的快餐、茶饮到地产汽车等大宗消费，小程序都展示了良好的容错空间。我们线下场景的小程序覆盖范围很广

image (2).svg

技术分析

小程序原理

WebView + JSBridge

开发门槛低：HTML+JS+CSS

接近原生的使用体验:资源加载+渲染+页面切换

能够保证安全可靠

image (37).png 这样的通讯结构，决定了小程序的性能问题在数据传递。

小程序语法

TTML

<view
    tt:for="{{list}}"
    tt:if="{{isOpen}}"
    bindtap="onTap"
/>

JS

Page({
    data:{
        list: ["a","b","c"],
        isOpen:true
    }
    onTap:function(){
        console.log('tap me!')
    }
})

TTSS

view{
    backgroud-color:"red";
    width: 750rpx;
}

相关扩展

跨端框架

目前小程序跨端框架主要为了解决两个问题：

1、复杂应用构建

2、一次开发可以跨多端

remaxtaromegalompvueuni-app
语法ReactReact/VueVueVueVue
语法蚂蚁金服京东网易美团Hbuilder

总结

小程序的有点很多，例如开发成本和难度都比app低的多，但也会有一些缺点。总而言之小程序也是很好的，也值得我们去学习。

学到这我想大家也对小程序有了初步的认识了吧，不如现在就开始尝试练习一下吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com

avatar
文章
阅读
粉丝