DcTbnk的博客

把网络请求封装成一个promise对象的形式/** * 封装request请求为一个Promise对象 * @param {*} url * @param {*} data * @param {*} method */function request(url, data, method = "GET") { return new Promise((reslove, reject)=>{ wx.request({ url, data,

小程序目前主流的是指微信小程序。微信小程序是腾讯出的一款轻应用，运行在微信中。和网页公众号不是一个类型的东西，小程序有自己的开发语言和框架，不是基于浏览器运行的。小程序开发使用的还是web前端技术一般情况下公司ui设计师给到的小程序设计稿宽度为750px，我们在做小程序开发的时候长度单位使用rpx。在750px的设计稿中，1px=1rpx，这样写的代码可以实现自适应小程序发起网络请求使用的是自带的api，由于小程序不是web项目没有浏览器环境，所以没有跨域问题小程序开发使用小程序开发者工具进行

微信公众号开发----官网链接

app开发原生开发,使用java做android，使用oc做iso开发。原生开发在公司里是单独的一个岗位，正规软件公司如果有app开发业务，那么公司会有原生开发人员。一般情况下android和ios的比例是2:1。android现在会用在很多手机之外的智能终端上面，就是目前流行的物联网项目。目前很多软件公司是没有app开发人员的，只有服务器端和前端开发。如果这种公司要打包app的时候，一般有两种选择：公司有一个或者两个全栈，他们会做app打包外包给其他公司进行打包现在很多的原生app中都会加

纯网页技术开发 appPhongap 又叫 Cordova (最早是叫 Phongap 后来改名了 叫 Cordova)https://cordova.axuer.com/是一个 nodejs 模块，可以非常方便的使用纯网页的形式包一个壳子创建一个 app可以把我们的 web 页面放在服务器上，直接打包生成安装包的时候把网址路径放进去。以后更新项目的时候直接修改我们的服务器中的网页就好，十分省成本步骤：npm install -g cordova ：全局安装npx cordova creat

混合开发1️⃣ 以前端为主导进行开发(Hybrid app)（即所有的页面部分都是用网页 h5 的技术来做的，Hybrid 是做编辑器的）uniapp、mui 是国内主流的小公司做混合开发的技术。他们是纯前端技术做 app 的一种方案Cordova、ionic 是国际上主流的一些混合开发技术。更成熟使用 h5 技术开发手机 APP，它有一个特点就是一次开发多端运行，就是可以跨平台发布。做一次开发可以发不成 android、ios、windowsphone。开发成本低，但是性能差，不利于更深度的硬

antd-mobileantd-mobile可以在web和react native中同时使用的一个移动端ui框架可以直接在umi生成的项目中进行使用import { Button } from 'antd-mobile'如果使用的是create-react-app创建的项目需要手动安装插件进行使用...

页面跟数据是分开写的demo1list.js 页面import React, { useEffect, useRef } from 'react';import { connect } from 'dva';import { Form, Input, Button } from 'antd';const List = props => { console.log(props); const { dispatch, book } = props; const { list

umiumi是一个react的企业级开发框架，内置了dva、路由等插件。可以实现零配置的方式开发一个react项目https://umijs.org/zh-CN创建项目npm create umi first-umi-app # 创建一个first-umi-app项目cd first-umi-app # 进入目录npm inpm start # 启动项目目录src 表示源代码.umirc.js 是配置文件src/models 此文件夹中的内容是redux数据model的代码示例e

ReactReact 是 facebook 出的一款针对前端 view 视图层的 library 库。react 使用了 jsx 语法(就是在 js 中写 html 标签)https://zh-hans.reactjs.org/ react 官网地址7/27 第一天react js 文件的引入<div id="app"></div><script src="./libs/babel.min.js"></script><!-- js文件引入的

Gulp前端自动化构建工具webpackhttps://www.webpackjs.com/前端模块化打包工具。他能做前端模块化开发，还能实现代码的打包(就是把css、js、img等文件进行编译输出)webpack中最核心的内容叫loader加载器webpack中的四个重要概念入口entry出口outputloader插件npm init -y # 初始化一个package.json文件npm i webpack -D # webpack主文件npm i webpack

vue打包的时候如何做性能优化:第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会特别的耗时。这里简单总结一下自己用到的一些优化的方案。也就是第一次加载的文件内容太多，解决的办法就是将文件变小第一个是使用动态路由的方式引入路由组件，用import方式引入，第二种是就是把我们的一些第三方资源库放在外部不进行打包的方式进行引入（把一些第三方库通过cd

基础文件的初始化书写格式模板

/src/api/movies.js 封装接口export function loadMovies() { return fetch( "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=4&data_type=1&mode=24&page_id=1&ret_num=48" ).then((res) => res.json());}/src/store/actions/prod.

redux里所有的action都必须是一个简单地数据类型比较复杂的话，就需要借助一个插件 redux-thunk这个插件是用来解决异步处理的安装： npm i redux-thunkredux-thunk是redux里最知名的插件承接前几篇文章的代码描述/store/index.jsimport { createStore, compose, applyMiddleware } from "redux";import thunk from "redux-thunk";import root

就是将上篇文章中的/src/store.js文件放到一个目录下进行多个拆分原store.jsimport { createStore, combineReducers } from "redux";function counter(state = { count: 1 }, action) { console.group("counter reducer"); console.log(state); console.log(action); console.groupEnd();

redux状态管理工具，遵循的是单项数据流.reducer是用来改变数据的action是用来组织数据，每一个action需要包含一个type属性state是用来存储数据的如果要改变数据是通过dispatch派发一个action在reducer中改变数据redux和vuex的区别：​ vuex只能在vue中使用​ redux可以和任何一个前端框架进行结合命令安装npm i redux # 安装依赖项npm i react-redux # react和redux 关联结合使用//

1.Link和NavLink的区别NavLink比Link多了一个class=“active”, 可以在App.css为他们设置样式function App() { return ( <Router> <div className="App"> <ul> <li> {/*1️⃣ Link <Link exact to="/">首页&l

mePrivateRoute.jsx 私有路由import React from "react";import { Route, Redirect } from "react-router-dom";function PrivateRoute(props) { const isLogin = localStorage.getItem("token") ? true : false; return isLogin ? ( <Route path={props.p

react 路由npm i react-router-dom # 安装路由插件Router 表示所有需要使用路由的部分都必须包含在此节点内部，一个项目只需要有一个此节点就好此Router有两种常见的形式hash browser， hash路由，连接处有个＃，不需要配置，没有兼容，可以直接使用； 而浏览器历史记录路由需要在web服务器中做特殊配置，兼容性也不好， 因此不建议使用浏览器历史记录路由。Route 表示一个路由对象，需要属性 path component

People.jsximport React, { useState, useEffect } from "react";import { Table, Button } from "antd";import { loadDMList } from "../api/iqiyi";const columns = [ { title: "序号", align: "center", width: 80, render: (text, record, index) =

使用的都是爱奇艺电影接口demo1–承接上上篇脚手架生成的react来继续的修改了List.jsx和创建文件 src/api/favs.jsfavs.jsexport function onCollection(id) { const favs = getCollections(); if (favs.indexOf(id) === -1) { favs.push(id); } localStorage.setItem("favs", JSON.stringify(favs)

antd官网链接1.安装：npm i antd2.在index.js文件中写入：import 'antd/dist/antd.css’3.然后在对应的组件中引入标签并使用（查看antd官网详细使用步骤，cv）继上篇博客，仅修改了部分内容List.jsximport React, { useState, useEffect } from "react";import { loadDMList } from "../api/aiqiyi";import { Button, Card } from

脚手架搭建项目npx create-react-app movie-app # 使用react脚手架搭建项目npm start # 启动项目,先进入文件夹组件中react中function和class两种快速创建的快捷键， function是页面中输入： rfce 回车 class是页面中输入： rcc 回车 组件的后缀名既可以是js也可以是jsx因为用到了axios，所以先安装在引入 npm i axios import axios from 'axios' App

<title>全选/反选</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d...

context在react—function中的用法重点代码： const mainContext = React.createContext(); const { Provider } = mainContext; const c = React.useContext(mainContext); // 写在组件内部 <title>context-2</title> </head> <body>

<title>待办事项</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-dom.js.

从两者的使用情况来看，function明显比class使用起来 更方便简单react—class中this.refs + ref的使用 <title>ref操作</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./li

this.refs + ref的使用 <title>ref操作</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src

React组件生命周期初始化阶段挂载阶段更新阶段当状态或者属性发生改变之后会触发更新阶段的钩子函数在更新阶段不能修改状态数据卸载阶段 <title>生命周期</title> <style> .ball { width: 100px; height: 100px; border-radius: 50%; background-color: ora

hooksuseState 可以定义一个局部状态数据useEffect 副作用,当一个数据或者属性发生改变之后会引起的一些变化

<title>子组件向父组件传参</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/react-d.

<title>Document</title> <!-- 输入bs3-cdn:css --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> </head.

<title>父组件动态向子组件传参</title> <style> .ball { width: 200px; height: 200px; border-radius: 50%; display: block; margin: 1rem auto; /* background-color: deeppink; */ transi...

如果不想用this.state.list 想要直接用list的时候，就需要解构一进页面，render（）会先执行两次，一次是初始化的时候，一次是加载成功的时候 <title>获取数据</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <sc.

<title>组件定义-class定义的组件</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./li...

<title>react组件定义</title> </head> <body> <div id="app"></div> <script src="./libs/babel.min.js"></script> <script src="./libs/react.js"></script> <script src="./libs/rea...

<title>第一个循环数据</title> <style> .person { background-color: #999; } </style> </head> <body> <div id="app"></div> <script src="./libs/react.js"></script>

json和js之间的相互转换如果是在框架里用import引入，也可以，但是如果在页面中写个js，也是非常简单的方式将json文件修改为js 文件后，在页面中用script引入，然后就可以直接使用使用起来相对非常简便基础使用方法先引入三个js文件，上一张有写怎么使用引入连接的步骤<title>第一个react组件</title> </head> <body> <div id="app"></div> &

在bootcdn.cn中引入三个网络文件，在是由于在bootcdn.cn中搜索到的babel文件加载很慢还容易使用不了，同时又试了babel网站文件链接的引入也很慢无法正常执行，就将其文件下载了下来，放入文件目录下来引入使用此处代码不是最终使用的方法，仅仅此时展示过程,连接最终用法在文章最后面<body> <!-- 所有的内容一会都将挂载#app这个节点上 --> <div id="app"></div> <script sr