天道酬勤,学无止境

基于react的H5开发入门基础简介

 

 

一、react是什么?

  • React是一个 JavaScript 库 ,可用来创建用户界面的,可认为是MVC 中的V(视图)。
  • React是 基于Component 的,即组件,React认为一切页面元素都可以抽象成组件,且大部分操作都是针对组件的。

1.1 React诞生背景

  • 传统的DOM(文件对象模型)操作会对整个DOM树进行重新渲染,时间成本、复杂度高 ,很慢且容易造成卡顿使页面短暂失去响应。
  • 为解决DOM操作慢的问题,React引入虚拟DOM,比较新的与旧的虚拟DOM节点之间的差异,最后将diff反映到真实DOM,尽可能减少重绘,提高性能。

1.2 React优势与特点

  频繁操作DOM代价是昂贵的,React之所以快,是因为它一般不直接操作DOM。React将DOM结构存储在内存中,然后同组件render()的返回内容进行比较,计算出需要改动的地方,最后才反映到真实DOM中。React的优势、特点如下:

  • 组件可复用性和扩展性好,开发效率提高
  • 不直接操作DOM ,先在虚拟DOM中计算变化,最后将diff反应到真实的DOM中,尽可能减少重绘,提高性能。
  • 基于状态实现对DOM控制和渲染 ,是React 的一大创新,将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。

1.3 虚拟DOM原理

React将新的虚拟DOM(由组件的render方法返回,也就是真实DOM未来要显示的模样)与旧的虚拟DOM(结构、数据与当前的真实DOM一致)做比较,生成差异diff,并将diff应用到当前真实的DOM中,当前真实DOM更新为新的真实DOM(结构、数据与新的虚拟DOM一致)

注意 :

在React中,开发者只需要在组件的render方法中返回新的虚拟DOM就可以了,具体真实DOM与虚拟DOM如何做对比生成diff,以及真实DOM如何通过最快的路径渲染出变动的部分,均由React来完成,不用开发者操心。

虚拟DOM原理图

 

使用虚拟DOM需注意

  • 组件(component)是虚拟 DOM ,并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构。只有当它插入文档以后,才会变成真实的 DOM节点,大部分情况下,我们都是在 构建React的组件,也就是操作虚拟DOM ,components 的存在让计算 DOM diff 更高效。
  • 为了同浏览器交互,我们有时候需要获取到 真实的DOM节点 。我们可以通过调用React的React.findDOMNode(component)获取到组件中真实的DOM。
  • React.findDOMNode()只在mounted组件中调用,mounted组件就是已经渲染在浏览器DOM结构中的组件。如果你在组件的render()方法中调用React.findDOMNode()就会抛出异常,是因为 render返回的是虚拟dom ,并没有被渲染到真实dom中。

二、组件类的定义

本文基于ES6语言标准创建名为Timer组件,保存为timer.js文件,示例代码如下图所示,主要包含 三个部分 :

  • 变量声明、引入外部依赖 -import
  • 定义组件类 -class
  • 组件输出 -export
 

  1. "use strict";
    
    import './timer.less';//css样式文件
    
    import React from 'react';
    
    import ReactDOM from 'react-dom';
    
    
    class Timer extends React.Component {
    
    /*可在组件类中重写组件的构造函数、各生命周期函数等覆盖掉
    
    React.Component中默认的方式,不重写则按默认方式*/
    
    /*render方法每个组件一定要有*/
    
    render () {
    
    return (
    
    <button className = "ban-content" >
    
    React has been running for 5 seconds.
    
    </button>
    
    );
    
    }
    
    }
    
    
    export default Timer;

     

2.1 引入该组件依赖的模块/库-import:

引入依赖库/其他组件时,ES6语言标准与python语法比较类似,还可以给引入的模块取别名, 格式 为:

 

  1. import 库名
    
    import 其他组件名 from 组件路径
    
    import 模块名 from 库名
    
    import 模块名 from 库名 as 模块别名

     

示例代码中 引入外部依赖 :

 

  1. "use strict";
    
    import './timer.less';//引入css样式文件
    
    import React from 'react';
    
    import ReactDOM from 'react-dom';

     

常用依赖库

  • react.js - React 的核心库(常用模块 React.Component )
  • react-dom.js -提供与 DOM 相关的功能 (常用模块 ReactDOM.render 和 ReactDOM.findDOMNode )

2.2 定义组件-class:

组件class内的函数组成结构主要包含生命周期函数、render方法以及自定义函数3部分,具体结构如下图:

组件class内的函数组成结构

组件class内的函数组成结构

自定义组件Timer(包含全部生命周期函数+render方法)的示例代码(非完整代码)如下:

 

  1. class Timer extends React.Component {
    
    /*组件创建并首次渲染到真实dom中会调用以下三个生命周期函数+render方法,仅调用一次,称为创建期(Mount)*/
    
    constructor(props) {
    
    super(props);
    
    this.state = { seconds: 0, buttoncolor: ''}; }
    
    componentWillMount() { }
    
    componentDidMount() { }
    
    /*组件被实例化之后(组件已在真实dom中),组件与用户交互过程中,组件属性或状态改变时会调用以下三个生命周期函数+render方法,可重复调用,更新dom,称为更新期(Update)*/
    
    componentWillReceiveProps(nextProps) { }
    
    shouldComponentUpdate(nextProps, nextState) { }
    
    componentWillUpdate(nextProps, nextState) { }
    
    componentDidUpdate(preProps, preState) { }
    
    /*组件要从真实dom中移除时调用,称为销毁期(Unmount)*/
    
    componentWillUnmount() { }
    
    /*render方法返回虚拟dom,用于与真实dom(即旧的虚拟dom)做diff,在组件创建期(Mount)、更新期(Update)均会被调用*/
    
    render () {
    
    return (
    
    <button className = "ban-content" >
    
    React has been running for {this.state.seconds} seconds.
    
    </button>
    
    );
    
    }
    
    }

     

2.2.1组件的父类-React.Component

由上图可知 组件 :

  • 组件可以认为是 继承自父类React.Component的一个子类
  • 组件 拥有父类React.Component的一些方法,如各种生命周期函数+render方法
  • 组件 可定义其私有的方法 供组件内部使用
    格式:方法名 (参数){函数体代码}

2.2.2 组件中的生命周期函数重写- 可写可不写

  • 组件定义时,依据组件的功能设计,生命周期函数可选择性写也可以不写
  • 若 重写生命周期函数,被重写的函数会覆盖掉从父类React.Component继承过来的生命周期函数
  • 若 不重写生命周期函数,则默认使用从父类React.Component继承过来的生命周期函数

2.2.3 组件中的render方法- 一定要有

组件的render方法主要用来返回组件的dom结构,有如下几个 特点 :

  • 组件中的render方法继承自 React.Component ,是每个组件 一定要有 的,用于输出组件。
  • render方法返回的是一个 虚拟dom 节点,是一个 javascript对象 ,该对象的结构与dom节点结构类似,其返回值可以是 null、false或React组件
  • render方法只负责返回虚拟dom来告诉React新的dom应该长什么样,至于虚拟dom和真实dom如何做diff,以及如何高效地将变化渲染到真实dom则由React来完成,无需程序员操作
  • render方法在组件 创建期 (仅一次)、 更新期 (可重复)均会被调用,且在更新期时,组件的属性(this.props)或状态(this.state)的变化都有可能触发render方法的调用

此外,render方法应该是纯粹的,也就是说在该方法中不修改组件state,不读写 DOM 信息,也不和浏览器交互(例如使用 setTimeout)。如果需与浏览器交互,在componentDidMount() 中或者其它生命周期方法中做这件事。保持render() 纯粹,可以使服务器端渲染更加切实可行,也使组件更容易被理解。使用render方法时,需 注意 以下几点:

  1. render方法中 this.pops和this.state是只读的, 不能修改组件state
  2. 只能返回一个顶级组件 ,不能返回一组元素

返回2个顶级元素错误写法



返回两个元素的正确写法

  1. render方法中 不能调用React.findDOMNode() ,否则抛出异常,因为React.findDOMNode()是对真实dom的操作, render方法只是虚拟dom

2.2.4 React独有的JSX语法- 可用可不用,建议用

JSX官方中文介绍
JSX是一种特殊的js语法,可以在JavaScript代码中直接使用html标签。JSX语法是可选的,也就是说你也可以不使用,直接写JavaScript原生代码,但是建议使用,因为很方便。

JSX中组件的属性值

值为字符串

若是在标签的<>内,则加"";若在标签对中间,则无需加"",例如:

<p className="值为字符串"> 值为字符串 </p>

值为JavaScript表达式

要使用 JavaScript 表达式作为属性值,只需把这个表达式用一对大括号 {}包起来,不要用引号 "",其中style属性对于JSX来说第一是变量,第二是对象,因此要两个花括号,例如:

<p> {this.props.content} </p>

<div style={{display: question_display}}>

this is {this.props.content}

</div>

<div style={{display: "none"}}> </div>

值为布尔值

布尔值被认为是JavaScript表达式,所以需添加{},例如:

<input type="button" disabled={false} />

JSX中的注释

若是在标签的<>内,则按JavaScript注释规范即可;若是标签对之间,需另加{},例如:

 

<p

/* 这是位于<>内的

多行

注释*/

className="aaa" // 这是位于<>内的单行注释

>

{/* 注释位于标签对之间 */}

</p>

使用JSX需 注意 :

  • JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签
  • 某些html的属性名是js的保留字,需重新命名(如js中classhe 和for为保留字,所以要写成className和htmlFor;
  • 在js中,事件名使用驼峰命名法,比如onclick变为了onClick;

2.3 导出该组件供其他组件使用 -export:

将自定义组件(Timer)作为模块输出给外部/其他组件使用,代码如下:

export default Timer;

可在其他组件/外部中引入该组件并使用:

import Timer from 'c/test/timer';

组件实例化(组件创建并渲染到真实的dom),需要用到ReactDOM.render方法:

ReactDOM.render(

<Timer/>,

document.getElementById('example')

);

2.4 ReactDOM.render与组件内的render方法比较

注意 :

| 区别点 | ReactDOM.render | 组件内的render |
| :-----------------------: | :-------------------------------: | :----------------------------:|
| 依赖库 | react-dom.js | react.js |
| 依赖模块 | ReactDOM | 继承自React.Component|
| 使用场景 | 实例化组件并渲染到真实dom时使用,一般页面中最顶层组件才会使用,将所有组件一起实例化 | 定义任何组件时均使用 |
| 是否渲染到真实dom | 是 | 否,仅返回虚拟dom |

三、组件的props(属性)和state(状态)

React 是基于状态实现对DOM控制和渲染 ,将组件看成是一个状态机,每一个状态对应一个UI展现,组件状态分为两种:

组件间的状态传递

用props(属性)表示,用于从父组件到子组件的数据传递。

组件的内部状态

用state表示,组件私有,state状态只能在组件内部修改。

3.1 组件属性props

属性props是什么?

可以把props当作组件的数据源,props“属于”父组件,只会从父组件传递到子组件,是父子组件间进行状态传递的接口。React中的数据流是单向的,当父组件传递的props改变时,React会向下遍历整个组件树,并重新渲染使用这个props的组件。

使用注意:

可用setProps()方法(几乎不用)修改组件属性,但是只能在组件外调用, 组件内部的this.props属性是只读的,不能用于修改组件自身的属性。

3.2 组件内部状态state

状态state是什么?

React的组件用state来表示内部状态,可随用户的互动而对其修改,state只应该用于存储简单的视图状(如用于控制下拉框的可见状态)。

使用注意:

state可读可改,通过this.state访问和初始化,只能通过setSate()方法修改,且只能在组件内部使用,属于组件私有。

3.3 Props与state的比较

相似点 :都是纯JS对象、都会触发render更新、都具有确定性。

组件的render() 方法依赖于 this.props 和 this.state ,React会确保渲染出来的 UI 界面总是与输入( this.props 和 this.state )保持一致。

| props、state的共同点与区别 | props | state |
| :-------------------------------: | :--------: | :--------:|
| 能否从父组件获得初值 | Yes | No |
| 是否能由父组件修改 | Yes | No |
| 能否在组件内部设置默认 | Yes | Yes |
| 能否在组件内部修改 | No | Yes |
| 是否设置子组件的初始值 | Yes | No |
| 能否修改子组件的值 | Yes | No |

四、组件的生命周期

React中一个组件就是一个状态机,在组件的生命周期中,随着组件props或state的改变,其DOM表现形式也会有所变化。组件的生命周期如下图所示:

 

组件生命周期主要包括3个阶段,React 为每个生命周期阶段都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

  • Mount(创建期):已加载到真实 DOM
  • Update(更新期):正在被重新渲染
  • Unmount(销毁期):已移出真实 DOM

此外,React 还提供两种特殊状态的处理函数:

  • componentWillReceiveProps( nextProps):当已加载组件收到新的props时调用
  • shouldComponentUpdate( nextProps, nextState):组件判断是否重新渲染时调用

4.1实例设计

本文将以具体例子的形式讲解生命周期函数,设计图如下图所示,主要包括两个组件:

  • 父组件Timer_controller,向子组件传递子组件的props.content
  • 子组件Timer,包含1个button和1个p,1个props2个state

  1. p的文本使用this.props.content
  2. button的文本用到this.state.seconds
  3. button的颜色用到this.state.buttoncolor
  4. button的点击事件会改变this.state.buttoncolor
  5. 子组件Timer的定时器会改变this.state.seconds,每2分钟变化一次

实例的结构示意图

实例设计效果图

 

 

用于定义子组件Timer的timer.js文件完整代码如下:

class Timer extends React.Component {


constructor(props) {

super(props);

this.state = {

seconds: 0,

buttoncolor: ''

};

console.log("constructor","仅一次,组件被创建时执行");

//console.log("可在此设置组件的初始state");

}


componentWillMount() {

let self = this;

self.setState({

seconds: 1

});

console.log("componentWillMount", "仅一次,组件第一次被渲染到真实dom前调用,执行完会调用一次render")

//console.log("在第一次render之前,最后一次机会修改state,修改后第一次render会依照更新后的state");

}


componentDidMount() {

let self = this;

self.DOMNode = ReactDOM.findDOMNode(self);//获取真实dom

self.handleclick();

self.timer=setInterval(self.tick.bind(self), 7200);//设置定时器,并绑定到响应函数tick

console.log("componentDidMount", "仅一次,组件第一次render之后,且已插入到真实dom之后调用")

//console.log("可在此操作真实dom、添加计时器、绑定监听事件等");

}


//定时器响应函数tick

tick() {

let self =this;

self.setState({

seconds: self.state.seconds + 1

});

}


//按钮点击事件响应函数handleclick

handleclick() {

let self = this;

if (!self.DOMNode) return;

//为按钮绑定click事件监听函数

self.DOMNode.addEventListener('click', function(e){

let button = e.target;//指向被点击的按钮

let parent = self.DOMNode;

if (button.tagName.toUpperCase() === 'SPAN') {

if (''==self.state.buttoncolor){

self.setState({

buttoncolor:' btn-content-another'

});

} else {

self.setState({

buttoncolor: ''

});

}

}

}, false);

}


componentWillReceiveProps(nextProps) {

console.log("componentWillReceiveProps", "组件接收到新的props的时候调用")

//console.log("可在此修改state或更新/不更新props");

}


shouldComponentUpdate(nextProps, nextState) {

console.log("shouldComponentUpdate","组件接收到新的props或者state时调用,默认返回true")

//console.log("可在此根据props、state判断返回true或false,若为false,更新期生命周期函数不继续往下执行");

return true;

}


componentWillUpdate(nextProps, nextState) {

console.log("componentWillUpdate","组件在接收到新的props或state后,render方法进行渲染之前调用")

//console.log("不能在此处更改state");

}


componentDidUpdate(preProps, preState) {

console.log("componentDidUpdate","组件的更新已经同步到真实DOM中之后立刻被调用")

//console.log("可访问真实DOM节点并操作之");

}



componentWillUnmount() {

let self = this;

console.log("componentWillUnmount","组件销毁");

}


render () {

let self=this;

console.log("render","渲染返回虚拟dom");

//debugger;

return (

<div>

<button id= 'button' className = {"btn-content" +self.state.buttoncolor} >

React has been running for {self.state.seconds} seconds.

</button>

<p>

self.props.content from Timer_controller is {self.props.content} now! </p>

</div>

);

}

}

4.2 创建期(Mount)

创建期可认为是组件的实例化,页面的初始化:每当组件被创建、首次渲染时,都会有一系列会被调用,调用顺序、时间以及函数用途分别如下表所示,在创建期,表中函数均只调用一次。

| 按序各调用一次 | 调用时间 | 用途 |
| :-----------------------: | :-------------------------------: | :---------------------------:|
| constructor | 构造函数,组件被创建时执行 | 可访问this.props和设置初始化state|
| componentWillMount | 组件首次渲染前调用 | 可在组件被首次render前最后一次修改state|
| render | componentWillMount执行完后| 返回虚拟dom |
| componentDidMount |组件已在真实DOM中首次渲染后调用 | 可使用ReactDOM.findDOMNode ()获取真实dom并操作 ,如为事件绑定监听函数、设置定时器,发送 AJAX 请求 |

创建期程序流程图

 

实例操作与解析

操作 :首次打开页面2分钟内,无其他操作
效果 :页面组件初始化,button颜色为灰,内容中的数字为1;p中的数字为9999。依次调用:

  • constructor (初始化this.state.seconds=0)
  • componentWillMount (this.state.seconds被置为1)
  • render
  • componentDidMount

组件创建期效果图

 

4.3 更新期(Update)

当组件创建并首次渲染完成之后,组件进入更新期,当由于用户与界面的交互或者界面元素的自更新造成组件props或state发生改变时,会有以下方法按顺序根据调用条件而被触发,这些方法除render以外均只在更新期调用,而不会在组件初始化渲染时调用:

| 按序据条件调用 | 调用条件 | 用途 |
| ------------------------- | :-------------------------------: | --------------------------: |
| componentWillReceiveProps | 组件收到新的props时调用| 可修改state及决定是否更新props |
| shouldComponentUpdate| 接收到新的 props 或者state,将要重新渲染之前调用 | 可用于优化react渲染速度,返回true,继续向下执行,返回false,停止向下执行,等待下一次props 或state发生变化 |
| componentWillUpdate| shouldComponentUpdate返回为true后调用 | 不能在此使用this.setState()修改state |
| render |componentWillUpdate之后调用 | 生成虚拟dom |
| componentDidUpdate | 组件已在真实DOM中重新渲染后调用 | 与componentDidMount类似,可操作真实dom |

更新期程序流程图

更新期程序流程图

实例操作与解析

1、 样例1-state改变

操作 :页面打开后2分钟内,点击button(造成this.state.buttoncolor改变)
效果 :button颜色变红,其他跟初始页面一致,依次调用:

  • shouldComponentUpdate (返回true)
  • componentWillUpdate
  • render
  • componentDidUpdate

组件更新期效果图-点击按钮改变this.state.buttonholer

组件更新期效果图-点击按钮改变this.state.buttonholer

2、 样例2-props改变

操作 :页面打开后,无操作,等待2分钟后(定时器改变this.state.seconds),第3分钟时(父组件传递的this.props.content改变)
效果 :button颜色为灰,内容中的数字为2;p中的数字为9998。第2分钟时调用的函数及顺序与样例1一致,不同的只是样例2改变的是this.state.seconds,而样例1改变的是this.state.buttonholer。第3分钟props变化时,会依次调用:

  • componentWillReceiveProps
  • shouldComponentUpdate (返回true)
  • componentWillUpdate
  • render
  • componentDidUpdate

组件更新期效果图-设置定时器改变this.state.seconds,父组件传递过来的this.props.content改变

组件更新期效果图-设置定时器改变this.state.seconds,父组件传递过来的this.props.content改变

3、 样例3-shouldComponentUpdate返回false

如果依然按样例1、2一样分别操作,只是将shouldComponentUpdate返回改为false,则生命周期函数停止向下执行,props、state的变化也不会重新渲染到真实dom中。

4.4 销毁期(Unmount)

componentWillUnmount:在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理,比如无效的定时器,或者清除在 componentDidMount 中创建的 DOM 元素

五、组件间的通信

详细介绍请点这里或去官网查看

组件之间的通信可分为三种:

  • 无父子关系的组件间通信
  • 父组件->子组件
  • 子组件->父组件

5.1 无父子关系的组件间通信

对于事件系统,这里有 2 个基本操作步骤:订阅(subscribe)/监听(listen)一个事件通知,并发送(send)/触发(trigger)/发布(publish)/发送(dispatch)一个事件通知那些想要的组件。

5.2 父组件->子组件传递props

   通过设置props的值,父组件把数据通过props传递给子组件,如在父组件Item的render方法中调用子组件Itemimage,并设置子组件的picture、content属性值

class Item extends React.Component {

//具体代码省略

render () {

return (

<Itemimage picture={this.props.itemimage} content="这是图片" />

);

}

}

5.3 子组件->父组件回传数据供父组件使用

  本质上,子组件不能向父组件通信。但是可以使用回调函数作为子组件的属性实现子组件向父组件的数据传递:

  • 在父组件定义回调函数,并在父组件的 render 方法中将回调函数作为子组件属性的值传递给子组件。
  • 在子组件中可通过该属性向父组件回传数据。

代码示例如下:

父组件定义

在父组件(Questionlist)中定义回调函数(handleSelect),并在父组件的render方法中将handleSelect作为子组件(Starquestion)属性(callbackParent)的值

class Questionlist extends React.Component {

/*本例不是完整代码,仅用于展示子组件如何向父组件通信

父组件Questionlist在render方法里使用了子组件Starquestion

子组件中自定义的属性callbackParent绑定到了父组件的handleSelect方法

父组件将在handleSelect方法对子组件通过callbackParent传回的数据进行处理

*/

handleSelect(questionid,selection,questiongoto) { }


render() {

return (

<Starquestion callbackParent={this.handleSelect.bind(this)} />

);

}

}

子组件定义

在子组件中可通过this.props.callbackParent属性向父组件回传数据:

class Starquestion extends React.Component {

//非完整代码,监听事件等代码已省略,仅演示子组件如何向父组件回传数据,例如将this.props.callbackParent写在componentDidMount()函数中

componentDidMount()

//回传的参数需在子组件中能访问到,参数名自定义

this.props.callbackParent(参数1,参数2,参数3);

}

render() {

return (

<p>非完整代码</p>

);

}

 

标签

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 前端学习路线
    文章目录 前端模板下载Html+cssHtml+css 基础教程Html+css 实战教程 JQueryJQuery视频教程 JavaScriptJavaScript基础教程JavaScript实战教程 AjaxAjax教程 BootStrapBootStrap基础教程BootStrap实战教程BootStrap模板BootStrap文档教程 LayUiLayUi教程 ES6ES6基础教程 EchartsEcharts基础教程Echarts实战教程 百度地图学习AngularAngular教程 Node.jsNode.js基础教程Node.js实战教程 React(推荐的视频有可能一样,但是要有没有资料)React基础教程React实战教程 WebpackWebpack教程 AxiosAxios教程 Vue(重中之重)Vue基础教程Vue实战教程 APP开发APP开发教程 微信小程序开发微信小程序基础教程微信小程序实战教程 微信公众号开发微信公众号开发教程 项目实战 推荐学习1 推荐学习2 推荐学习3 前端模板下载 https://www.mycodes.net/search.php?keyword=%D7%A2%B2%E1 滑动的登录注册页面 HTML5实例推荐 Html+css Html+css 基础教程 网页高级编程(青鸾云) HTML+CSS 基础入门教程全套视频 |
  • 2018上半年掘金微信群日报优质文章合集:前端篇
    在掘金微信交流群里的小伙伴们,你们每天都还在坚持读小报吗?如果你的回答是yes,那真的要给你点一万个赞了?能坚持这么久,真的很优秀噢!(嗯,每天坚持给大家收集文章的小饼也很优秀?)2018不知不觉已经过了一半了,这里是上半年的小报优质文章合集,做了一些简单分类,希望对大家有用! 编程语言相关 JavaScript 如何在疲劳的JS世界中持续学习 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 几道JS代码手写题以及JavaScript数据结构与算法资源分享 JavaScript:面试频繁出现的几个易错点 JavaScript 运行原理解析 TypeScript 实践分享 理解Underscore中的去抖函数 html2image原理简述 深入JavaScript继承原理 Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A 规范) 我们需要注意的 immutable 操作 身份证号码的正则表达式及验证详解(JavaScript,Regex) 前端模块化:CommonJS,AMD,CMD,ES6 简单快速理解js中的this、call和apply ES6 的几个小技巧 面试官:请你实现一个深克隆 ES6会这些就够了 入门babel--实现一个es6的class转换器 JavaScript 装饰器极速指南 学会了ES6,就不会写出那样的代码
  • uni-app跨端开发H5、小程序、IOS、Android(一):太强了,一次性搞定全端开发
    大家好,我是黑马腾云。 这是一个原创系列连载文章,基于企业真实项目案例分享经验,带你快速入门uni-app开发!欢迎点击头像关注,避免迷路!同时如果觉得文章不错,欢迎转发帮助更多人。 文章断更了段时间,之前大半年一直在忙创业的事情,期间带领团队从0到1用uni-app+java开发了二款商城类商业级应用,产品形态覆盖H5、微信小程序、IOS、Android。目前产品已成功发布到各大电子市场。 难得有空静下来对项目做下总结,本系列文章先站在公司的的角度对产品技术选型进行分析,然后再根据我们项目实际开发经验进行汇总,供大家参考。 一、我们为什么选uni-app? ​ 一个项目从立项开发到推向市场,开发只是其中占比很小的一个板块,尤其是对于初创企业来说,把每分钱都花在刀刃上显得尤为重要,因此产品开发的过程要够快、成本要够低。 ​ 基于一些特殊的原因,项目启动之初,团队对产品要求就是需要包含:微信小程序、H5、Android、Ios,并且尽可能多的覆盖其它平台。 ​ 单从技术角度去考虑,实现方式还是挺多的。 1、采用原生开发的模式 ​ 微信小程序:微信官方提供了原生的开发模式。 ​ Android:采用java或Kotlin进行原生开发。 ​ Ios:采用Object-c或Swift进行原生开发。 ​ 采用原生开发模式,小程序、Android、Ios每个岗位都至少需要一位人员,成本较高。
  • 2020年最新黑马Web大前端之3天学会jQuery
    2020年最新黑马Web大前端之3天学会jQuery 【课程目录】 jquery01 01.jquery的简介.mp4 02.jquery的基本使用.mp4 03.jquery和js的代码对比.mp4 04.jquery的$的本质.mp4 05.jquery对象和dom元素互转.mp4 06.jquery的基本选择器.mp4 07.jquery的基本&过滤&层级选择器.mp4 08.jquery的筛选选择器以及补充.mp4 09.案例讲解.mp4 10.上午总结.mp4 11.京剧小人的案例.mp4 12.360开机动画.mp4 12.jquery的显示与隐藏.mp4 12.自定义动画.mp4 13.修改下拉菜单.mp4 13.淡入淡出轮播图.mp4 14.jquery的fade动画队列.mp4 15.jquery的class相关操作以及选项卡.mp4 16.jquery的css方法.mp4 jquery02 01.jquery的回顾.mp4 02.stop方法.mp4 03.dom元素创建以及添加方式.mp4 04.attr属性操作方法.mp4 04.表格创建案例.mp4 05.美女相册案例.mp4 06.留言框案例.mp4 07.this指向问题.mp4 08.jquery的offset&position位置方法.mp4 09.scrollTop方法.mp4 10.表格全选案例
  • web前端学习大纲
    一、HTML5 + CSS3 目标:能够独立把美工提供的PSD效果图还原成PC端静态代码页面 HTML5 浏览器与浏览器内核 语法及使用 常用标签 语义化 表单元素 HTML 新增标签 CSS3基础 CSS基本语法规范 常用的选择器用法与规范 复合选择器使用 数值与单位 文字文本样式 CSS3新增选择器 CSS3进阶 CSS盒子模型 CSS背影技巧 圆角/阴影/过渡 定位和浮动 伪类和伪元素 Chrome调试工具 CSS高级技巧(精灵图、CSS三角、图标字体等) CSS常见布局技巧大全 网页开发常见问题以及解决方案 CSS常见兼容性问题以及解决方案 CSS新增属性 Photoshop切图 cutterman插件一键切图 电商项目 代码组织原则 项目开发实战流程 电商类复杂页面布局规范 CSS初始化技术选择(normalize.css使用) CSS字体图标使用 CSS属性书写顺序规范 万恒的多页面开发 网页语义化设计 CSS页面模块化开发 favicon图标制作 复杂网页结构排版技巧 常见动画过渡特效 电商类常见布局问题解决方案 将电商项目部署到web服务器 二、移动WEB网页开发 目标:能够独立开发移动端页面,并适配不同的移动端终端 CSS3动画 CSS3的2D和3D变化 animation动画 炫酷页面开发(地图大数据热点图、大风车、旋转木马轮播图等) 移动端页面开发
  • 黑马网页开发前端基础班+就业班+中级进修班课程大纲/前端学习路线
    最近开始学前端,关注到黑马的学习大纲,写得非常详细,转载过来给大家参考下,稍微编辑了一下,去除了其中的广告。 课程版本:6.5 原网址http://www.itcast.cn/course/web.shtml HTML&JS+前端基础班课程大纲学习对象 1.0基础0经验的小白人员,想转型到高薪编程行业或对此行业有浓厚兴趣的人员; 2.在校大学生,希望充实自身技能,毕业后能顺利就业并有更强的市场竞争力; 3.不满足目前工作现状,想要得到更好的发展空间。上课方式 全日制脱产,每周5天上课(实际培训时间可能因法定节假日等因素发生变化) HTML&JS+前端基础班课程大纲 所处阶段 主讲内容 技术要点 学习目标 第一阶段:HTML5 + CSS3 HTML5 1、 浏览器与浏览器内核2、语法及使用、3、 常用标签4. 语义化5、 表单元素6、 HTML 、7 新增标签 可掌握的核心能力:掌握 HTML5 常用标签;掌握 CSS 语法及使用技巧;掌握CSS3新增选择器;掌握CSS3新增样式属性;掌握 DIV+CSS 布局方式;掌握常见网页布局技巧;掌握企业级、电商级网页开发基本的流程、规范;掌握语义化、模块化、兼容性的PC端网页开发;掌握 Photoshop 切图以及插件切图;熟练使用调试工具进行页面调试;掌握基本的动画效果。可解决的现实问题
  • 零基础web前端学习路线,前端入门到精通看这个就够了
    零基础怎么学web前端?下面就跟着小编一起来看看吧! 想学好web前端,该从哪里入手学习呢?零基础学习web前端学习路线图从哪里可以找到呢?这里为大家整理完整的零基础 前端学习路线分享给大家。 适合零基础学员的web前端学习路线分享给大家: 1、HTML5介绍 内容包括:(互联网发展趋势、H5语言的优势、简单易学人人都能编程 H5就业和薪资情况、H5常见的项目与产品、H5的未来与方向) 2、HTML基础 内容包括:(HTML简介与历史版本、常用开发软件、常见标签与属性、 表格与表单、标签规范与标签语义化、实战:网页结构布局) 3、CSS基础 内容包括:(css简介与基本语法、常见的各种样式属性、CSS选择器与标签类型、理解盒子模型与CSS重置、浮动与定位、利用photoshop工具测量样式、HTML+CSS开发网页、实战:高仿电商首页效果) 4、CSS3基础 内容包括:(css3常见样式、CSS3选择器、变形与动画、3D效果与关键帧、弹性盒模型) 5、移动端布局 (移动端基本概念、viewport窗口设置、移动端布局方案、rem、vh、vw等单位、响应式布局、bootstrap框架) 在学习过程中有什么不懂得可以加我的WEB前端学习交流扣扣qun,前面是328,中间400,后面是314。群里有不错的学习教程与开发工具、项目源码分享,专业的老师解答问题
  • 聊聊React-Native 、Weex、QT Mobile和Flutter跨平台技术
    1、跨平台技术简介 跨平台技术主要为三类: H5+原生(Cordova、Ionic、微信小程序)JavaScript开发+原生渲染 (React Native、Weex、快应用)自绘UI+原生(QT for mobile、Flutter) 2、Hybrid技术简介 2.1 H5+原生混合开发 这类框架主要原理就是将APP的一部分需要动态变动的内容通过H5来实现,通过原生的网页加载控件WebView (Android)或WKWebView(iOS)来加载(以后若无特殊说明,我们用WebView来统一指代android和iOS中的网页加载控件)。这样以来,H5部分是可以随时改变而不用发版,动态化需求能满足;同时,由于h5代码只需要一次开发,就能同时在Android和iOS两个平台运行,这也可以减小开发成本,也就是说,H5部分功能越多,开发成本就越小。我们称这种h5+原生的开发模式为混合开发 ,采用混合模式开发的APP我们称之为混合应用或Hybrid APP,如果一个应用的大多数功能都是H5实现的话,我们称其为Web APP 。 目前混合开发框架的典型代表有:Cordova、Ionic 和微信小程序,值得一提的是微信小程序目前是在webview中渲染的,并非原生渲染,但将来有可能会采用原生渲染。 2.2 混合开发技术点 如之前所述,原生开发可以访问平台所有功能,而混合开发中
  • web前端的主要学习什么,2020年还有前途吗?一般工资是多少?
    首先,你想知道前端是个啥,那么你一定要知道前端是怎么来的!回答比较长......大家有耐心的可以看下去,综合了一些权威论坛上的资料而来。 前端其实是个很大的范畴。我这里只针对 web 开发的前端而言(下文统称前端)。简单点说,针对浏览器的开发,浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成:HTML(超文本标记语言)、 CSS(级联样式表)、htm JavaScript。如图: 前端开发工程师就业机会多,创业机会多,且就业范围广,几乎各行各业都有需要,互联网公司、金融,贸易等等都能进。 1、前端工程化 在前端工程程化中,开发者最重要的基本素养就是通过工具提升效率,前端开发者在这些工具下会持续迭代和优化。 展望2020年前端的发展,前端工程体系一定会更加闭环,不再是一个脚手架这么简单,而是会结合 IDE,打通业务属性,从项目初始化、到编写代码、到 CI、到灰度、到发布 形成一个完成的闭环。 2、跨端开发 今年很多团队转战谷歌常态的 Flutter,特别是 Flutter for Web 的第一个 Release,这让 Web 前端重燃希望、跃跃欲试。 同时,苹果公司也发布了全新的 UI 系统——SwiftUI,同时,开源社区中 SwiftUI for Web已经在路上了,SwiftUI for Android 还会远吗?
  • 掘金站内 webpack 优秀文章汇总
    本文使用 juejin-spider 生成 👍 点赞数,📌 标签 (1)[👍 2667][📌 JavaScript][腾讯IVWEB团队] webpack详解(2)[👍 2196][📌 CSS][chenhongdong] webpack4-用之初体验,一起敲它十一遍(3)[👍 1726][📌 前端][尼古拉斯李三] 妈妈再也不用担心我不会webpack了(4)[👍 1705][📌 Node.js][jerryOnlyZRJ] Webpack揭秘——走向高阶前端的必经之路(5)[👍 1500][📌 Webpack][蚂蚁金服数据体验技术] Webpack 4 配置最佳实践(6)[👍 1471][📌 JavaScript][yck] webpack:从入门到真实项目配置(7)[👍 1286][📌 CSS][hello等风来] 手写一个webpack4.0配置(8)[👍 1108][📌 React.js][张不怂] webpack4 的30个步骤打造优化到极致的 react 开发环境,如约而至(9)[👍 932][📌 JavaScript][张不怂] 关于webpack4的14个知识点,童叟无欺(10)[👍 904][📌 JavaScript][百命] 脑阔疼的webpack按需加载(11)[👍 866][📌 Webpack][心谭] 📚免费的渐进式教程
  • 云开发多端用户模块实战(三)---uni-app基础(一)---uni-app简介以及项目搭建
    uni-app是什么? 一个基于Vue.js的前端开发框架 可以跨平台开发,即一套代码多个平台 可以打包安卓/iOS,多个平台的小程序 以往我们开发一个应用,如果想让它能跑在安卓/iOS,小程序等平台,就需要相应开发人员去开发不同平台应用。或者使用移动H5。 有了uni-app即可开发多个平台,且后端可以使用uniCloud云开发来做。而uniCloud环境为nodeks,即只需要前端人员即可完成整个项目的多平台开发。 在上一篇文章中,我们已经讲过了环境搭建和项目搭建 为什么要使用uni-app? uni-app拥有丰富的插件库,在插件市场我们可以找到很多别人写好的组件 通过集成别人的组件,我们可以很快的完成应用开发。 而且uni-app有丰富的API接口,可以获取手机的一些状态。 可跨平台开发,且入门门槛低。 如果你是一个小型企业,那么你只需要一个前端开发人员即可完成项目的开发以及维护。 如果你想创业,那么你的项目组只需要前端开发人员即可。 不需要购买服务器,不需要担心安全,可弹性扩容,大大的节省了成本。 如果你是学生,那么你在学习中做的网站类项目都可以通过页面托管放置网上。这些都是免费的。 本课程也会给大家讲一些css动画,让你的程序更加的丰富多彩。 比如顶部的进度条,鼠标移动到图片,图片会晃动。 以下是一些演示, 来源:https://blog.csdn.net/qq
  • React16.4开发简书项目 从零基础入门到实战-笔记-01
    第1章 课程导学 本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。 1-1 课程导学 使用react的公司有: React:易上手,难精通 React入门->React工程师(靠谱) 基础内容、环境搭建、基础语法、原理进阶、动画 Redux、Redux进阶 实战项目、环境搭建、Header、首页、详情页 登录校验、上线 简书:https://www.jianshu.com create-react-app组件化思维JSX开发调试工具虚拟DOM生命周期React-transition-groupReduxAntdUI,容器组件无状态组件redux-thunkredux-sagaStyled-componentsImmutable.jsredux-immutableaxios 学习前提:.js、ES6、webpack、npm讲授方式 通俗易懂的案例讲解基础借助基础知识实现项目带着你编写每一行代码图文讲解复杂知识点 课程收获 彻底入门React的使用完整了解React的工具全家桶上手大型项目的前端开发规范的代码编写20K以上的工作薪资 第2章 React初探 本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。 2-1 React简介 React.js简介 React JS、React
  • 2021年web前端开发视频教程零基础自学HTML/VUE/JS全栈项目实战全套课程
    【web前端开发课程介绍】: 随着移动互联网的深入发展,多屏互动和多端兼容友好的界面成为目前系统重要的需求,让前端开发工程师一跃成为目前市场紧俏的人才。 本课程内容包含目前的Vue、React前端框架,把全栈工程师要掌握的前端技术、Node.js相关后台技术、HTML5移动方向开发技术做了系统整合, 致力于培养中高等前端工程师。 为什么选择前端开发? 1、专业无限制:计算机专业、非计算机专业占比3:4 2、适合零基础:专业、性别不限,没有基础也能学习 3、技术上手快:4个月,快速学习、系统掌握 4、职业生涯稳:软件项目都需要前端开发,it在,前端在 【课程亮点】 亮点1: 七大阶段 五大拓展 提炼七大阶段, 五大拓展课程,紧扣市场需求, 实现全栈开发 亮点2 380+课时 内容系统,贯通前后端, 课程设计循序渐进, 380+课时从理论到实战层层深入 亮点3 11大项目 30+案例 11大实战项目和30+经典案例, 模拟真实企业项目开发 【学完收获】: 熟练掌握前端开发HTML、CSS、JavaScript等核心技术,熟练掌握Vue、React 熟练使用面向对象思想进行编程,掌握应对业务编程的能力以及常见兼容性方案 熟练掌握前后端分工开发流程、原生 Ajax 请求流程与细节,掌握常见跨域技巧 能够基于jQuery相关 API 熟练开发网页功能 熟练运用H5实现项目的开发
  • 移动动态化方案在蜂鸟的架构演进(含React Native与Weex对比)
    当下,移动动态化已经成为各大公司都回避不了的问题,产品的快速迭代对技术提出了更高的要求,而移动端的动态化方案也是层出不穷:Hypid、结构化 Native View、React Native、Weex,什么样的方案才是适合自己团队的呢?本文将分享饿了么蜂鸟团队在过去两年多业务快速增长过程中,移动动态化方面的实践和探索。什么是移动动态化?移动指的是移动端,包括安卓、iOS。动态化则是动态部署和逻辑下发到客户端的能力。移动动态最好的状态就是让移动应用和 Web 一样,想发就发!为什么移动端要强调动态化的能力?原因有如下三大点: 业务迭代太快。当下大部分团队都是敏捷开发的模式,即使两周做一次迭代,产品周期还是会觉得长,有些应用不能及时上线。 应用市场审核慢。安卓基本当天发应用市场,当天就能够有更新。但 iOS 需要约 3-4 天来审核。假设有些功能需要定时上线,iOS 审核时间必须要考虑进去。 用户升级周期长。统计表明,每一个安卓版本发布,一周内会有 70% 的用户更新,一个月其余用户才能陆续完成更新。移动动态化方案共性,有如下三点: 跨平台。 布局。约定 DSL,保证渲染性能。 逻辑。Android 和 iOS 必须共用解释器。蜂鸟团队的现状与业务特点蜂鸟团队现状蜂鸟团队于 2014 年成立,初衷是为了承接饿了么的物流业务。随着时间推移,订单量从每日几千单到百万单,配速员也达到百万数量
  • 6年全栈工程师回答:web前端的主要学习什么,现在还有前途吗?一般工资是多少?
    首选我不明白你为啥没有对前端工程师这个行业在有一定了解之后再展开学习,下面备注是说正在学习这个,我就一脸问号了(?????) 可能你还是大学生吧,对于工资多少,不同地区,一线二线,三线四线城市都是有差异的,你可以通过招聘网站去看,眼见为实嘛!(这里推荐:智联招聘,拉勾网,BOSS直聘等…别去58同城,之前有些伙伴跟我说他去58同城上看前端的招聘,惊呆我了!) 首先,你想知道前端是个啥,那么你一定要知道前端是怎么来的!回答比较长…大家有耐心的可以看下去,综合了一些权威论坛上的资料而来。 前端其实是个很大的范畴。我这里只针对 web 开发的前端而言(下文统称前端)。简单点说,针对浏览器的开发,浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成:HTML(超文本标记语言)、CSS(级联样式表)、JavaScript。如图: 前端发展历程 前端也算是经历了一个比较漫长的发展过程,大致历程可以分为以下几个阶段: 上古时代: 这个节点不得不说一下,世界上第一款浏览器 NCSAMosaic,是网景公司(Netscape)在1994年开发出来的,它的初衷是为了方便科研人员查阅资料、文档(这个时候的文档大多是图片形式的)。那个时代的每一个交互,按钮点击、表单提交,都需要等待浏览器响应很长时间,然后重新下载一个新页面给你看,大概是这样: 同年
  • 开源跨平台移动项目Ngui【入门】
    Ngui简介 这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目,至此JavaScript成为了真正意义上前后端通吃的语言。 Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。 开源跨平台移动项目Ngui【简介】 开源跨平台移动项目Ngui【入门】 开源跨平台移动项目Ngui【视图与布局系统】 开源跨平台移动项目Ngui【Action动作系统】 开源跨平台移动项目Ngui【CSS样式表规则及用法】 Ngui API 文档 同宗不同派 这有点类似Reac-Native可能你们会问为什么你要写一个与React-Native一样的东西,虽然表面上看见确实有相似之处,都使用jsx语法,都是跨平台的,都能实现热更新,也都不是基于浏览器webview。但不同之处是Ngui不依赖操作系统的GUI组件,完全调用标准OpenGLAPI进行绘图渲染,并且给它编写了一套布局引擎,这有点类似浏览器的div+css。几年前在开始构思这个框架时效率就一直做重中之重来考虑,虽然现在有很多地方不足,还达不到理想目标,但我相信在不久的将来一定可以。基于这几个特点做为一个GUI系统Ngui能快速的移植到任何操作系统
  • 300多本web前端书籍推荐
    从事前端开发十余年,收集了300多本前端电子书,在这里分享给大家 电子书获取地址 1、javascript 21天学通javascript ECMAScript 6入门 Effective JavaScript中文 ES6标准入门 第3版 Functional-Light JavaScript JavaScript ES6 函数式编程入门经典-试读 JavaScript Promise迷你书 javascript 权威指南 JavaScript.DOM高级程序设计 JavaScript_DOM编程艺术第二版 JavaScript编程精解 JavaScript编程实战 JavaScript程序的188个建议 JavaScript高级程序设计 javascript高效图形编程 JavaScript函数式编程 JavaScript基础教程 JavaScript脚本特效编程给力起飞 javascript捷径教程 JavaScript快速全栈开发 JavaScript框架高级编程 应用Prototype、YUI、Ext JS、Dojo、MooTools Javascript框架设计 javascript秘密花园 JavaScript面向对象编程指南 JavaScript模式.Stoyan Stefanov JavaScript权威指南 JavaScript忍者秘籍
  • 2019年9月技术栈情况汇总
    java初级程序员一枚,回顾技术掌握情况,记录成长蜕变过程. 2019年9月技术栈情况汇总 基础概况 具体应用技能一.掌握javaEE开发常用类库,组件,框架,中间件等使用.1.基础2.数据库3.常用框架及技术核心技术:持久层:视图层及接口: 4.分布式,SOA及微服务技术5.其他框架及技术权限及会话控制:日志管理:任务及异步:应用业务技术: 二.了解主流web前端开发技术三.掌握常用工具软件1.IDE:2.DevOps开发相关工具3.其他设计办公软件等 参与项目情况一.互联网租房平台项目本项目中主要负责以下内容:1.1、项目介绍1.2、项目结构及路线图1.3、技术架构1.4、后台系统1.5、前台系统 二.互联网在线学习平台项目2.1、项目介绍2.2、项目结构2.3、技术情况技术架构业务流程举例:各模块说明如下: 重点学习微服务技术栈: 2.4、项目CMS系统2.4.1 SSI服务端包含技术2.4.2 页面管理与静态化 本项目学习中未完待续...课程管理与分布式文件系统媒资管理与在线学习系统认证授权与Spring Security Oauth2深入开发 三.SaaS-Export项目3.1、需求描述3.2、项目技术架构简介在本项目中主要开发职责: 本人情况概况,近期求职中 基础概况 熟悉基本数据结构及算法,关系数据库原理,互联网协议等. 熟练面向对象编程,熟悉常见设计模式
  • 最全Python培训课程,基础班+高级就业班+课件(数据分析、深度学习、爬虫、人工智能等) 精品课程
    最新版Python全套培训课程视频,绝对零基础到Python大牛。包括:零基础得python基础班, 高阶进阶就业篇完整版(含:数据分析、机器学习、网络爬虫、数据挖掘、深度学习、人工智能等)课程共108.9G。本套课程价值2万元以上。文章底部附加全套课程下载地址,由于文件较大,保存时可选择分卷保存。 全套课程文件目录:Python全套一、python基础班 1-1 Linux基础01-课程简介 02-操作系统简介 03-linux命令简介 04-目录相关命令 05-文件相关命令 06-远程管理命令 07-用户权限 08-组管理 09-用户管理 10-系统信息 11-其他命令 12-打包压缩 13-ubuntu软件安装 14-vi编辑器 1-2 python基础 01-Python简介 02-第一个程序 03-Python执行方式和Pycharm设置 04-程序的注释和算术运算符 05-程序执行原理 06-变量的使用以及类型 07-变量的计算和输入输出 08-变量的命名 09-if判断语句 10-石头剪刀布 11-while循环基本使用 12-循环嵌套 13-函数的基本使用 14-函数的参数和返回值 15-函数的嵌套调用 16-模块的简介 17-列表 18-元祖 19-字典 20-字符串 21-容器类型公共方法 22-名片管理系统 23-变量的引用以及是否可变 24
  • 微信小程序 vs 支付宝小程序(钉钉小程序) 区别 api大全
    钉钉小程序简介 参考系列文章 钉钉小程序&微应用 参考官网 钉钉开放平台–第三方企业应用-快速入门 参考网站 uni-app 开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。 参考网站 uni-app 钉钉小程序 demo 参考 支付宝的小程序 和钉钉的是一套 钉钉小程序 和 钉钉H5微应用区别 区别项小程序H5微应用加载性能首次使用略慢,后续加载快受到很多因素影响,优化不够好,容易慢使用体验非常顺滑,接近 Native容易卡顿页面跳转,返回和 Native 的效果一样做不到和 Native 一样的体验开发环境搭建提供 IDE,快速创建项目未提供 IDE,需开发者搭建,成本高调试提供 IDE,可以在电脑上调试大部分功能在电脑上只能调 UI,涉及到钉钉的 JSAPI,必须真机调试使用开源 UI 组件目前不支持支持使用 npm 包支持支持模块化组织代码支持 小程序 特有的模块化使用 Vue, React 等框架可以获得模块化支持灰度发布钉钉提供(第三方企业应用支持发布灰度版本)CDN小程序包默认在 CDN需要开发者自己购买相关服务开发个人应用支持不支持应用离线化支持不支持 微信小程序和钉钉小程序区分 指标微信小程序钉钉小程序生态坐拥12亿用户,社交优势极大社交用户2-3亿