微信小程序开发小程序web前端必须运行在浏览中
微信小程序开发流程
注册微信小程序开发帐号 微信公众平台
下载微信开发工具 下载微信开发工具
编写代码
上传代码 提交审核
审核通过 发布小程序
微信小程序设计指南
友好礼貌
重点突出
流程明确
清晰明确
导航明确,来去自如
减少等待,反馈及时
异常可控,有路可退
便捷优雅
减少输入
避免误操作
利用接口提升性能
统一稳定-
视觉规范
字体
字体颜色
列表
表单输入
按钮
图标
项目目录结构
pages 存储小程序页面
utils 全局的功能函数
app.js js主入口
app.json 主配置文件
小程序中所有页面都必须在 app.json pages中进行配置
小程序会默认显示 pages第一个成员
app.wxss 公共样式
project.config.json 项目配置
小程序配置
全局配置 :配置所有页面及小程序相关设置
页面配置 :只在当前页面配置。
基础语法
数据绑定: {{}}
组件内容插入数据
属性中插入数据,({{} ...
react 简介
React 用于构建用户界面的 JavaScript 库,React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。
react中文网
react特点
声明式设计:React采用声明范式,可以轻松描述应用。
高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。
灵活:React可以与已知的库或框架很好地配合。
react不同于vue的mvvm,react只负责视图层view层
react 脚手架使用
Node >= 8.10 和 npm >= 5.6
安装脚手架 npm install create-react-app -g
查看脚手架版本 create-react-app --version
创建项目 create-react-app xxxx
进入项目目录 cd xxxx
启动项目 npm start
编译打包 npm run build
第一个rea ...
vue 2.0
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。
Vue 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层。使用 Vue 可以快速高效的搭建出单页面应用程序。
vue中文网
npm官网
MVC
M:致据层,处理数据的增删改查
V:视图层,前端页面
C:业务逻辑层
MVVM 双向数据绑定MVVM是前端分层开发理念,总共分为3层,包括M层、V层、VM层,其中 VM层是核心,也是M层和V层的调度者。
M层是每个页面中存储的数据,也称作数据层Model;
V层是每个页面中的 HTML代码,也叫作视图层View; 一般是把M层中的数据渲染到V层。M层中的数据并不能直接渲染到V层,需要通过VM层调度,同样地,在V层中修改了数据,也不能直接同步到M层,还是需要VM层来调度,所以VM层是M层和V层的调度者是核心。
12345678910111213141516171819202122232425262728<body> <di ...
移动端开发移动端是指手机,平板电脑等移动设备,移动端开发是指将网页运行在移动端设备上。
rem+ flex移动端适配rem相对长度单位,相对于根元素(即html元素)font-size计算值的倍数。rem 移动端屏幕适配是通过计算屏幕尺寸设置根元素字体大小,页面中所用单位统统使用 rem作为单位,这样只要改变根元素字体大小页面中所有元素都会发生改变。flex可以简便、响应式地实现各种页面布局。
为了便于计算 rem 在使用 vscode 编辑器时可以安装 cssrem 插件
移动端设置1234567891011121314<head> <meta charset="UTF-8"> <!-- 第一步:视口 width=device-width 初始化比例为1 不缩放 禁止用户缩放 --> <!-- viewport-fit=cover" iphoneX 前刘海的适配问题 --> <!-- name="format-detection" --> ...
CSS3 简介
CSS 用于控制网页的样式和布局,CSS3 是最新的 CSS 标准。
CSS3速查手册使用
新增选择器关系选择器
E~F 选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。
属性选择器
E[att^="val"] 选择具有att属性且属性值为以val开头的字符串的E元素。
E[att$="val"] 选择具有att属性且属性值为以val结尾的字符串的E元素。
E[att*="val"] 选择具有att属性且属性值为包含val的字符串的E元素。
伪类选择器
E:not(s) 匹配不含有s选择符的元素E。
E:first-child (匹配父元素第一个子元素E)。
E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E,假设该子元素不是E,则选择符无效。
E:enabled 匹配用户界面上处于可用状态的元素E。
E:disabled 匹配用户界面上处于禁用状态的元素E。
E:checked 匹配用户界面上处于选中状态的元素E。(用于 ...
HTML5
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5新特性由HTML、CSS、DOM 以及 JavaScript构成。
声明html文档为HTML5<!DOCTYPE html>
新增语义化标签
<article> 定义页面独立的内容区域
<aside> 定义页面的侧边栏内容
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<header> 定义了文档的头部区域
<footer> 定义 section 或 document 的页脚。
…
以下的 HTML 4.01 元素在HTML5中已经被删除,不推荐使用:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<fra ...
jquery 是javascript的类库jQuery是一个快速,小型且功能丰富的JavaScript库。借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性,jQuery改变了数百万人编写JavaScript的方式。
jquery官网
jquery中文在线文档
引入jquery
jquery下载
生产版:就是部署服务器供用户使用的版本。
开发版:开发过程中使用的版本。
cdn https://code.jquery.com/jquery-3.5.0.js
npm 包管理工具安装
下载nodenodejs官网
安装完毕输入命令:node -v npm -v
npm 官网
使用npm 安装jquery npm i jquery
多库共存jQuery.noConflict()
12//返回值为新的jquery函数名称 let j = jQuery.noConflict();
文档就绪12345678910 // 文档就绪$(document).ready(function( ...
推送技术
在HTML5之前 服务器要实现向网页中推送数据,所用的技术都是 Ajax 轮询。轮询(心跳)是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
WebSocket介绍
WebSocket 协议本质上是一个基于 TCP 的协议。
为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息,其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以 ...
AJAX
Asynchronous JavaScript + XML(异步JavaScript和XML)在 Ajax 出现之前页面上数据发生改变的话就需要重新加载整个页面。而 Ajax 可以只对内容变化的区域进行数据的更新。使用Ajax可以减少与服务器数据的交互,从而提高效率,改善用户体验。
尽管X在Ajax中代表XML, 但由于JSON的许多优势,比如更加轻量以及作为Javascript的一部分,目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。
浏览器与服务器之间的关系
服务器 存储编写好的网页程序。服务器在网络端,用户不可见。
浏览器 用户电脑上的浏览器可以通过网络获取页面程序,并将页面显示。
协议协议是定义了数据如何在计算机内和之间进行交换的规则的系统。设备之间通信要求设备接受正在交换的数据的格式。定义格式的一组规则称之为协议。
TCP/IP
TCP:
传输控制协议(TCP)是主要的网络协议之一。它使两台主机能够建立连接并交换数据流。TCP 能保证数据的交付,维持数据包的发送顺序。
TCP 使用三次握手来建立一个连接和四次挥手来中 ...
Symbol
Symbol,新增数据类型,表示独一无二的值
Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
Symbol 函数前不能使用 new 命令,否则会报错。因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
1let s = Symbol();
Symbol()参数
字符串: Symbol函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分
12345678let s1 = Symbol('foo');let s2 = Symbol('bar');s1 // Symbol(foo)s2 // Symbol(bar)s1.toString() // "Symbol(foo) ...










