小程序学习|青训营笔记

summer瓜瓜
113 阅读2分钟

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

发展历程

发展1.png

发展2.png

发展3.png

业务价值

与WEB的区别

  • 有着固定的语法和统一的版本管理，平台可以方便的进行审核
  • 平台能控制个入口，如二维码，文章内容，端内文章，入口也带来了最好的用户体验
  • 小程序基于特殊的架构，在流畅度比web更好，有着优秀的跳转体验

三大价值

  • 渠道价值

    由于小程序的便捷性，依托于超级平台，小程序能够充分为很多场景导流，如美团和美团优选微信小程序带来的流量占据40%和80%

  • 业务探索价值

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

  • 数字升级价值

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

技术解析

小程序原理

目标

  • 开发门槛低

    HTML+CSS+JS

  • 接近原生的使用体验

    资源加载+渲染+页面

  • 安全管控

    沙箱

如何管控保证安全

if(Date.now() > new Date('2022-2-02')){
    document.body.innerHTML = '<h1>hello world</h1>'
}

不操作DOM如何控制页面渲染

flowchart LR
    Data --> id1[根据数据处理DOM]
    id1 --> 页面

渲染层.png

小程序语法

  • TTML

    <view tt:for="{{list}}" //循环
      tt:if="{{isopen}}"//判断
      bindtap='onTap'>
</view>

  • JS

    用对象进行包裹

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

  • TTSS

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

实现番茄时钟

<view class="container">
    <view class="clock">
    	{{timeText}}
    </view>
    <button tt:if="{{running}}" class="button" bindtap="onReset">
        重置
    </button>
    <button tt:else class="button" bindtap="onStart">
        开始
    </button>
</view>

const DEAULT_TIME = 25*60;
function formatTime(time){
    const miutes = Math.floor(time/60);
    const secords = time%60;
    const mText = `0${minutes}`.slice(-2);
    const sText = `0${secords}`.slice(-2);
    return `${mText}:${sText}`
    }

Page({
    data:{
        tineText:formatTime(DEAULT_TIME);
        running:false
    },
    setTimer:function(){
        this.timer = setInterval(()=>{
            this.time = this.time -1;
            if(this.time<0){
                clearInterval(this.timer);
                return ;
            }
            this.setData({
              timeText:formatTime(this.time)
            },1000)
        })
    }
})

拓展

跨端框架

remaxtaromegaiompvueuni-app
语法reactreact/VueVueVueVue
创造者蚂蚁京东网易美团美团

前端框架原理

编译时

  1. Parse

    解析为AST，语法树

  2. generate

    由语法树生成代码

运行时

大部分使用

  1. 虚拟DOM
  2. Template组件
flowchart LR
    subgraph 逻辑层
    c1[js代码]-->a2[虚拟DOM树]
    end
    subgraph 渲染层
    b1[组合Template]-->b2[生成实际要渲染的元素树]
    end
    逻辑层 --> 渲染层

一般我们的React和Vue啥的，都是属于逻辑层，他们写好以后将虚拟DOM传给渲染层，渲染层结合Template，生成实际要渲染的元素树。

avatar
文章
阅读
粉丝