1.WXML模板语法1.1数据绑定
在data中定义数据
在wxml中使用数据
在data中定义页面的数据
Page({
data:{
info:"Holle world",
## 如果是短横线声明数据,需要使用双引号包裹
"user-name": "xxx",
imgSrc:"xxxxxx",
## 生成10以内的随机数
randomNum:Math.random()*10
}
})
2. 在wxml中使用数据
<view>{{ info }}</view>
<image src="{{imgSrc}}"> </image>
<view> {{randomNum >= 5 ? '数字大于或等于5': ...
1.小程序简介
1.1.小程序与普通网页开发的区别运行环境的不同网页运行在浏览器小程序运行在微信环境
API 不同小程序无法调用 DOM 和 BOM 的 API但是小程序可以调用微信环境提供的一些 API地理定位扫码支付
开发模式不同网页的开发模式: 浏览器+代码编辑器小程序开发模式申请小程序开发账号安装小程序的开发者工具创建和配置小程序项目
2小程序代码的构成2.1.项目的基本组成结构
pages 用来存放所有小程序的页面,每个页面都是一个单独的文件夹
utils 用来存放工具性质的模块
app.js 整个小程序项目的入口文件
app.json 小程序项目的全局配置文件
app.wxss 小程序项目的全局样式文件
project.config.json 项目的配置文件
sitemap.json 用来配置小程序及其页面是否允许被微信索引
2.2.小程序页面的组成部分小程序官方建议把所有小程序的页面,都存放在 pages 目录中,以单独的文件夹存在,
每个页面由 4 个基本文件组成,它们分别是: .js 文件(页面的脚本文件,存放页面的数据、事件处理函数等) .json 文件( ...
React基础
未读全局状态管理-Redux01. 状态管理概述
目标:理解组件管理的局限性和全局状态管理的优势
1.1 组件状态管理React 只是一个用于构建用户界面的库,专注于数据驱动 DOM 的领域,虽然也提供了状态管理的能力,但是对于复杂项目的状态管理依然吃力。
React 采用组件的方式进行状态的管理,当组件与组件的关系比较疏远时传递状态和更新状态变的异常复杂。
1.2 全局状态管理Redux 是一个专业的面向 JavaScript 的状态管理工具,在使用了 Redux 以后状态可以被统一管理,不再完全依赖于组件。
状态被存储在 store 的对象中,所有组件直接在 store 对象中获取状态,所有组件通过统一的方式修改 store 对象中的状态。
当 store 对象中的状态被修改后,使用到了该状态的组件会自动更新。
全局状态管理解决了组件状态管理的弊端、避免了通过 props 的方式进行复杂的状态传递。
02. 状态管理 Redux
目标:掌握使用 Redux 管理状态的方式
npm install redux@4.2.0
2.1 概述在使用 Redux 管理状态之前,我们必须先理解 ...
TypeScript教程
未读TypeScript 教程1. TypeScript 概述1.1 TypeScript 是什么TypeScript 是一门基于 JavaScript 的编程语言,它是具有类型系统的 JavaScript,是一种解决 JavaScript 缺点的编程语言。
// 所有的 JavaScript 代码都是合法的 TypeScript 代码。
var a = 10;
function fn () {}
if (true) {}
for (var i = 0; i < 10; i++) {}
// TypeScript 是静态类型编程语言,即编译期间进行类型检查,变量、参数、返回值等都必须有固定的类型。
let x: number = 10;
x = 20; // ✅
x = "a"; // ❎
TypeScript 不能在浏览器环境或者 Node 环境直接运行,它在执行前需要先被编译为 JavaScript。
// TypeScript
let isLogin: boolean = false
...
安装Linux安装在终端输入:
$ sudo apt-get install redis-server
安装完后检查是正常安装
$ cd /usr/bin # 进入此目录
$ ls redis*# 查看是否有以下东西
启动第一次启动:(更新配置文件后也要输入这个,并且要重启服务)
# 授权 启动服务 服务配置文件
$ sudo redis-server /etc/redis/redis.conf
$ sudo service redis-server start # 启动
$ sudo service redis-server stop # 停止
$ sudo service redis-server restart # 重启
查看进程$ ps -aux|grep redis
进入$ redis-cli # 默认进入本机的redis
$ redis-cli -h <ip地址> -p <端口号>
# 例:
$ redis-cli -h 127.0.0.1 -p 6379
数据操作string(类型)字符串类型是Red ...
React基础
未读React 路由01. 路由概述
目标:理解前端路由的作用
在传统的 web 应用中前端都是由多页面组成的,用户可以通过链接在不同的页面之间进行跳转。
为了提升用户体验,在现代的 web 应用中前端大多都是单页面应用程序,也就是只有一个 HTML 页面的应用程序。
即使是单页面应用程序我们也要满足用户可以在”不同页面之间”跳转的需求,所以前端路由应运而生。
前端路由是指让用户从一个视图导航(跳转)到另一个视图,此处的视图指的是表示页面的组件,也就是使用组件代替传统 web 应用中的 HTML 页面。
前端路由实际上就是 URL 路径与组件之间的映射关系,即不同的页面组件对应不同的 URL 路径,用户可以通过不同的 URL 路径访问不同的页面组件。
02. 基本使用
目标:掌握路由的基本用法
下载 React Router 并准备页面组件
创建路由规则并在应用中使用
Route 组件的另一种语法格式
① 下载 React Router 并准备页面组件
npm install react-router-dom@5.3.3
// src/pages/Home.js
imp ...
React基础
未读React基础-组件进阶-类组件01. 组件属性校验
目标:掌握组件属性校验的基本使用方式
对于组件来说,组件属性 (props) 是组件的调用者传递的,如果组件调用者传递的组件属性不符合要求,将会导致组件内部的代码执行出错,所以为了组件运行的稳定性,我们需要在组件内部对接收的组件属性进行校验。
https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
class App extends React.Component {
render() {
return <Colors colors={100} />;
}
}
class Colors extends React.Component {
render() {
return (
<ul>
{this.props.colors.map((item) => (
< ...
React基础
未读React 基础-组件通讯-类组件01. 组件通讯概述
目标:掌握什么是组件通讯
对于不同的组件而言,组件通讯是指数据能够在不同的组件之间进行流动。
在使用组件构建用户界面时,我们会将一个完整的页面拆分为若干个独立的小的组件,这些组件在完成不同任务时通常需要协同工作,比如多个组件需要用到相同的数据,因此组件之间必须能够相互通信,即在不同的组件之间传递数据。
组件通讯包含父子通讯、兄弟通讯、远房亲戚通讯。
对于同一个组件而言,组件通讯可以实现差异化复用组件。
02. 组件通讯基础
目标:掌握在组件外部向组件内部传递数据的方式、掌握在组件内部获取外部传递进来的数据的方式
在调用组件时通过属性的方式向组件内部传递数据。
// src/App.js
import React from "react";
import Person from "./Person";
export default class App extends React.Component {
render() {
return <Perso ...
React基础
未读React 基础-组件-类组件01. 组件概述
目标:了解 React 组件的作用和创建组件的方式
什么是组件
组件设计思想
1. 什么是组件在前端开发中组件就是用户界面当中的一块独立的区域,在组件内部会包含这块区域中的视图代码、样式代码以及逻辑代码。
React 采用组件的方式构建用户界面,通过将多个组件进行组合形成完成的用户界面,就像搭积木。
2. 组件设计思想组件的核心思想之一就是复用,定义一次到处使用。
组件可以用来封装用户界面中的重复区块,复用重复区块。
组件的另外一个核心思想是解耦。
在传统的 web 页面开发中,一个 html 文件就是一个页面,就是说当前页面中的所有代码都被写在了同一个文件中,这就很容器导致代码的冲突。
在组件化开发中,每个组件都有自己的作用域,组件与组件之间的代码不会发生冲突,从而避免在传统开发模式中经常出现的改A坏B的问题。
02. 创建组件
目标:掌握创建类组件的方式
import ReactDOM from "react-dom/client";
import { Component } f ...
React基础
未读React 基础 - JSX01. React 概述
目标:了解 React 是什么
官方文档(英文)、官方文档(中文)、官方文档(新版、开发中、英文)
官方释义:A JavaScript library for building user interfaces ( 一个用于构建用户界面的 JavaScript 库 )。
React 是一个开源的 JavaScript 库,用于构建 web 应用中的视图层,就是 web 应用中的前端用户界面。
React 是目前最为流行的前端框架之一。
https://npmtrends.com/angular-vs-react-vs-vue
https://trends.google.com/trends/explore?q=react,vue,angular
React 是由 Facebook 的软件工程师在 2012 年创建,于 2013 年 5 月开源,目前由 Facebook 以及个人开发人员和公司组成的社区维护。
React 起源于 Facebook 的内部项目,因为当时该公司对市场上所有 JavaScript 框架都不满意,就决定自己写 ...