React 知识小记

认识React

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

基础知识

react中的受控组件和非受控组件的实现方式

技术选型

1. 基于React的umi框架
2. React Hooks
3. Ant Design
4. dva

框架介绍

React Hook 采用函数式组件，更轻量快速，更易于组件化的封装和通用，细化组件，Hook 使你在无需修改组件结构的情况下复用状态逻辑
umi 是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。
antd 也是一套成熟的ui，对于PC端的项目， 很适用

umi搭建项目

发现一些新改动

uni-app一直在更新,这边记录几点

样式单位改动

现在uni-app统一使用 rpx, 还支持了动态rpx

uni.$on, uni.$off, uni.$once, uni.$emit

项目背景

公司需要开发一个微信小程序,由我来负责前端,之前我学习过uni-app这个框架,说是多端通用,我看了文档,一些标签和api,都是接近小程序的,app端也可以通用,运用的是vue的写法,之前我是用过vue的,上手很快,而且uni-app更新和修复bug也是很及时的,我加上了一个uni-app入坑讨论群,宣布正式入坑uni-app.

项目搭建方式

我使用的是 HbuilderX 2.0.1.20190614,构建项目.

页面和样式

什么是uni-app

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，对于熟悉 Vue.js 和微信小序的人来说，uni-app 可以说是零成本。

官网地址：
https://uniapp.dcloud.io

uni-app基础

    首先，我把介绍的视频看了一遍，然后学习官方文档，本文是我学习uni-app官方文档整理的一些笔记。

express

保留了node.js原生的功能,添加了一些方法,增强原有的功能

use

监听

1
2
3
4
5
6

const express = require('express');
var server = express();
server.use('/', function (req, res) {
  res.send({a: 1, b: 2})
})
server.listen(8080);

node 概念

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

node request

request是node的服务器模块,用来处理请求

1
2
3
4
5
6
7
8
9

const request = require('request');
var server = http.createServer(function (req, res) {
    if (req.url === '/') {
        res.write('welcome to home');
    }
    res.end();
});
server.listen(8888);

小程序的一些问题( 二)

之前已经讲过了遇到的一些问题,现在是更新部分问题,主要是微信小程序B接口生成带参二维码和小程序模板消息的无限制发送.

B接口生成带参二维码

首先查看小程序官方文档,有三种模式的接口,我主要讲的是B接口,其他接口,请自行查看文档.

我的项目是后台获取二维码,前端将page参数传给后台,前端主要是传两个参数,
需要注意的是由于B接口生成的二维码暂时没有个数限制,很多项目都用这个,但是对于想进入对应的带参详情页面,scene是不可缺少的
现在官方文档对于scene的用法还是比较模糊的,我自己百度加线上测试了几次之后成功了.代码如下

谈谈我所遇到的小程序的问题

主要是记录一下在做的项目中遇到的一些问题和粗浅的解决办法,如果各位大神有更好的方法,希望能不吝赐教。

小程序登录拦截

现在官方的小程序路由拦截还没出现,都是要靠自己写的,我是在首页onLoad中判断储存的登录态是否存在，然后checksession，比较麻烦，最近知道一个可以运行在小程序的请求库，fly.js，有兴趣的可以自行学习使用。

Ios时间转换问题