- 博客(142)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 实现静态资源访问的几种方法
什么是静态资源？静态资源是指在服务器端存储的不会变化的文件，如HTML、CSS、JavaScript、图片、音频、视频等文件。这些文件一般不包含动态内容，每次请求时返回的内容都是固定的。为什么要使用静态资源？提升网站性能：静态资源可以被缓存到客户端，减少了服务器的负载和响应时间，提升了网站的加载速度和性能。减少网络流量：由于静态资源可以被缓存，客户端只需要在初次请求时下载，后续的请求可以直接使用缓存，减少了网络流量的消耗。
2023-08-09 12:38:37
678
原创 自定义字体服务 - 基于Node的Web字体解决方案
在前端开发中，字体是非常重要的组成部分，因为字体可以为页面提供良好的可读性和设计感。在设计中，经常需要使用一些特殊的字体，以突出设计效果或满足特殊的审美需求。但是，在使用一些奇怪字体的需求下，使用图片来替代字体可能会影响页面性能，特别是图片大小和加载时间的问题。
2023-07-26 13:40:07
253
原创 导读：为什么选择 React Native
在所有的技术选型之前都有一个为什么。为什么我选择了 React-Native？选择这个技术到底给我带来了什么样的技术福利？如果你正在考虑 React-Native，或者还在研究选择什么样的技术实现自家的 App，不妨看看这个课程，说不定你就有了不一样的感受。注：React-Native 以下简称 RN。优点选择 RN 之前我也看过了其他的几种技术，之前也使用过其他的技术做 App，...
2020-09-22 12:26:46
404
原创 第01课：项目初始化
知识点：快速创建 RN 项目添加使用路由功能不要在 RN 中使用的功能从这里开始，我们将一步一步的创建一个可以真正使用的 App：第一部分讲述开发一个 App 的大致过程，第二部分将开始优化性能、开发效率等，第三部分介绍添加热更新、支付、分享这些功能。大多数第三方组件可以很方便的 link 到项目里，部分需要手动导入甚至主动开发一些东西，这里也会在用到的时候讲出来。创建项目的前提条件...
2020-09-22 12:26:45
408
原创 第02课：封装自己的库
知识点：封装一个自己的日志，代替原生的 console封装一个自己的请求库，代替原生的 fetch自适应方法，兼容各种手机屏幕封装一个本地存储集成 Toast 弹出提示让 iOS 支持 HTTP 地址安卓需要证书才能编译在正式开始之前，我们先封装几个要用到的库。自定义本地日志自定义日志的一个好处就是省的每次都要手动注释 console，而且还可以同时将日志存在本地，或者发到...
2020-09-22 12:26:43
203
原创 第03课：首页模板和商品列表
知识点：给首页添加 Banner给首页添加运营模板获取接口的商品给顶部加一个搜索条从这篇开始正式案例的开发，Git 仓库的地址会放到下一篇中显示，需要的读者可以直接去 Git 上看每一次提交的代码。本文先从最早的代码形式开始一步一步的讲下去，开始开发的 App 会在某些情况下很卡，后面会将优化需要做的东西讲出来，这里先从简单的实现 App 界面开始讲，如果觉得手机反应慢，请看后面的...
2020-09-22 12:26:42
178
原创 第04课：组件和商品详情
知识点：使用路由跳转内页开发完整的商品详情页弹出选择数量前面的代码已经加入 Git 仓库，链接地址详见这里，将项目放在本地的同学也可以试着将代码放到仓库里，这个地方可以使用单独的分支合并到 master，也可以直接覆盖带 master 分支。为了能够更直观的看到每次提交的代码，我尽量把每一节的内容都做一次提交，备注也会写的非常清楚，另外我也会不定时的增加各种注释到代码里。一般情况只需...
2020-09-22 12:26:41
2160
原创 第05课：使用 WebView 和运营页通讯
知识点：创建一个浏览网页的组件注入 JS 并和网页通讯RN 默认提供了一个 WebView 组件，可以使用这个组件在 App 内打开一个网页，就像在微信里做的那样。但是电商 App 其实需要这个页面有很多和 App 的交互，比如打开商品详情页、加入购物车、分享等操作，这里就需要使用自定义 App 和 WebView 通讯协议的手段了。网页浏览页在 home 下新建一个 browse...
2020-09-22 12:26:39
152
原创 第06课：个人中心设置及 Debug 日志
知识点：改造顶部组件添加个人中心页添加设置页和日志页这一篇内容我们写一个简单的个人界面，由于接口不能用，这里就使用假的接口去做数据请求。设置 header旧的 header 默认有一个返回按钮，但是在个人中心是不需要的，我们要做一个兼容处理，将左侧的按钮隐藏掉，同时还添加了两处自定义样式的地方。接下来在个人中心页把这个组件引入并且设置好标题、右侧的齿轮等。整体是放入到一个滚...
2020-09-22 12:26:38
172
原创 第07课：添加自定义组件
知识点：开发一个分享组件。这节开始介绍怎样自定义我们自己的组件。分享组件我们单击分享的时候需要弹出一个单独的层，并且这一层里有几个可配置的显示的分享内容和渠道。这里利用 Modal 组件来实现，Modal 是一个单独的弹出，默认就遮盖在原有界面的上面，利用这点我们可以非常方便的做出一个遮罩。在 component 下创建一个新文件ShareView.js，使用一个完整的 view 来做背...
2020-09-22 12:26:36
231
原创 第08课：注册登录
这篇内容首先会教大家一个原生在启动 RN 的时候传参数的方法，该方法需要少量的更改原生代码即可，实现非常简单，接着会正式讲解怎么开发一个登录注册界面。初始化参数传递加入项目需要用到几个 App 一起上线，但是使用的是一套前端代码，这里就可以通过原生传入参数的方式改变前端的行为，这个方式使用到场景也不算少了，有需要的可以了解一下。``` javascrptimport { AppRegist...
2020-09-22 12:26:35
126
原创 第09课：全局状态管理购物车
知识点：添加 mbox。全局 mbox 组件执行添加命令npm i --save mobx mobx-react添加我们后面用到的组件。在之前的时候已经修改了 babelrc 了，这里提一下，修改配置文件 .babelrc让babelrc 支持 @ 修饰符。npm i babel-plugin-transform-decorators-legacy babel-preset-react-n...
2020-09-22 12:26:33
261
原创 第10课：实现购买（1）
知识点：App 添加微信支付添加订单 UI 和事件调起微信支付加入微信支付App 的微信支付只能在微信的开放平台申请，同时还要申请一次支付能力，微信的官方文档给出了微信支付的流程。App 的支付比较简单，支付的时候向服务器请求数据，此时服务器会拿到预支付 ID，然后 App 端通过这个 ID 和别的参数一起调起微信发起支付请求。我们使用 RN 的一个微信支付库，目前是 1.9....
2020-09-22 12:26:32
235
原创 第11课：实现购买（2）
知识点：地址列表地址编辑添加下单结果页地址列表页下单需要选择地址，这里我们再做一个地址列表页，点击选择地址的时候跳转到这个页面，选择完成之后回调选择好的地址结果。新建文件 /src/center/addressList.js，在文件中创建一个简单的列表，这里把列表和内容分开，使用几个空的方法替代。{/*地址列表*/} <FlatList ...
2020-09-22 12:26:30
197
原创 第12课：订单管理
知识点：订单列表订单详情添加订单列表订单列表是每个涉及到购买的 App 都会有的东西，这里就将开发一个功能比较全面的订单列表，订单一般涉及到几个状态的订单列表，订单的几个操作、状态变更，有的还会涉及到物流信息。首先要添加一个第三方的库 npm install --save react-native-scrollable-tab-view。在个人中心把订单的跳转加上去，这里使用的是之前...
2020-09-22 12:26:29
603
原创 第13课：添加优化动画
知识点：首页动画动画组件说明动画优化首页加入动画我们在首页加入这样一个动画，在默认情况下首页顶部是透明的，当内容往下滚动的时候，将顶部的背景颜色变成白色，搜索框颜色变成其他颜色。在首页的 state 中加入默认的位置值，这里使用动画库的单项值，设置默认值为 0。scrollTop: new Animated.Value(0)修改 FlatList 组件的滚动监听频率，这里的意...
2020-09-22 12:26:27
121
原创 第14课：优化 App，提升10倍效率
知识点优化渲染频率优化长列表渲染效率优化长列表图片缓存不知道各位在调试首页的时候有没有发现首页还是比较卡的，如果这个时候调起 RN 的调试窗体，就会发现在滑动的过程中 js 线程的帧率会很低。如果首页再加上一个 tab 组件的话，这个渲染的帧率会下降的更加厉害。这里就教大家怎么优化首页这里的性能，其他页比较简单，原理也都是一样，就不再赘述了。优化刷新次数这里有一个非常主要的优化逻...
2020-09-22 12:26:26
142
原创 第15课：使用 ESlint 规范化代码
知识点安装 ESlint配置规则兼容多数 IDE安装 ESlintnpm install -g eslinteslint --init根据提示安装选择需要的配置，这里我选择的是 json 格式的文件。最后就在根目录下生成.eslintrc.json。配置规则ESlint 是基于规则在检测代码的。env：你的脚本将要运行在什么环境中；globals：额外的全局变量；pa...
2020-09-22 12:26:24
442
原创 第16课：使用 TypeScript 编写代码
知识点：安装 TypeScript修改配置VSCode 自带 TypeParcel 自动处理Webpack 自动处理很多人已经在用 TypeScript 做开发了，这种方式确实有很大的优势，在开发和测试阶段给前端提供了非常大的助力，如果你还没有使用过，不妨试一试。安装 TypeScript在项目跟目录下运行 npm install -g typescript 即可安装好 Typ...
2020-09-22 12:26:23
327
原创 第17课：集成极光
知识点：集成极光集成友盟集成极光极光设置创建一个新的应用，名字可以随便。配置“推送设置”信息，这里 Android 输入框中填写我们自己的包名，默认是 com.；项目名称，这里的项目名称就是使用 RN 命令创建的时候输入的名称；iOS 的设置只需要上传证书，这里就不展示了。安装包极光有一个官方维护的 npm 包，单击这里查看 Github 地址。在项目根目录执行 npm ...
2020-09-22 12:26:22
208
原创 第18课：热更新
知识点：原理React-Native-Pushy自定义 Android 下载自定义 iOS 下载原理RN 的热更新非常简单，在 App 打开的时候检测 JS 文件是否需要升级，如果需要升级就下载最新的文件，然后使用新的 JS 启动 App 就可以达到更新最新的 UI 的目的。第三方热更新ReactNative 中文网推出了一个热更新的包，这个更新方式比较简单，所有新更新全部提...
2020-09-22 12:26:20
144
原创 第19课：总结
知识点：适配 iPhone X添加额外的线程缓存关于 Alert、Modal样式自定义组件适配 iPhone XRN 版本 0.52 之后提供了适配 iPhone X 的组件 SafeView，不过单独这个是不行的，还需要在 iOS 中修改配置，把视图从一个短小的区域拉伸到全屏的大小。这里通过修改设置打开默认的安全区域。由于之前使用的还是旧版的 RN，这里为了兼容旧的版...
2020-09-22 12:26:19
113
原创 react-native中生成二维码和分享图片
在react-native中展示二维码是一个非常麻烦的过程。最好的方法莫过于原生支持画二维码。但是这有一个副作用，需要在原生中添加新的代码。对于不打算很快升级的项目是一个很通过的选择。这里我介绍一种不使用原生的方式来生成二维码，副作用仅仅是需要联网下载一个js文件。当然可以使用本地缓存了，这样就和原生几乎一致了。npm地址实现自定义二维码不添加原生代码的情况下实现react-native...
2018-12-06 12:12:33
1438
1
原创 轻量级配置中心Nodejs版
项目地址单项目的时候只需要一个简单的配置文件即可完成配置管理。假如多个项目多个环境同时配置就会产生非常复杂的配置管理情况。这个时候就需要用到配置中心了，它的原理其实类似于redis缓存这种。不同之处在于配置中心只关注配置，并且有更多的有利于配置的功能。大概的功能如下：同时这些功能也是这次要开发的配置中心需要包含的功能。本次开发的配置中心是基于nodejs的版本。客户端获取配置的方式可...
2018-11-20 13:02:42
1184
原创 centos7安装rabbitmq3.7.7
安装erlang安装教程安装下面的提示新建一个文件，内容就是代码。To use Erlang 21.x on CentOS 7:# In /etc/yum.repos.d/rabbitmq-erlang.repo[rabbitmq-erlang]name=rabbitmq-erlangbaseurl=https://dl.bintray.com/rabbitmq/rpm/erlang...
2018-11-01 21:05:41
1040
原创 julia安装1.0教程
julia是一个新型的语言，它高性能、使用简单、面向广大的开发者。这注定了我们将会在适当的时候使用它来开发各种东西。比如深度学习之类各种框架。网上的教程大多是基于0.4之类的版本，高一些的也是0.6的。新手接触的时候免不了各种迷茫，完全不知道怎么安装julia。这里提供一份教程给大家。当前使用版本是1.0，api有一些改动，同时pkg也使用了新的方式加载包。安装julia的安装wi...
2018-08-11 14:05:42
3420
原创 使用Sequelize连接数据库
Sequelize.js是一款针对nodejs的ORM框架。使用nodejs连接过数据库的人肯定对数据库不陌生了。如果是直接链接，需要自己建立并管理连接，还需要手动编写sql语句。简单的项目到是无所谓，可是一旦项目设计的东西比较复杂，表比较多的时候整个sql的编写就非常的消耗精力。在Java、c#等语言中已经有轻量的数据库框架或者解决方案了。在nodejs中我推荐Sequelize。它是一...
2018-08-09 11:04:57
9130
原创 react-native动态tab组件
在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换.这些组件分成下面两种. 第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间.准备我们先来分析一波.一个滑动组件在APP上是一种什么状态. 这里可以看出,tab组件需要考虑到长度超过A...
2018-07-06 15:33:09
1405
原创 react-native中实现定时任务
react-native中有时候需要定时执行一些后台任务,比如定时发送消息,定时统计数据等.这个时候就需要使用另外注册一个视图来做这些东西了,不然在同步任务中做这些任务,一旦任务比较耗时就会卡住后面的进程,甚至导致后面的进程不再渲染页面.注册另外一个入口在合适的位置:页面启动或者某个需要的时候,注册并启动我们的另外一个视图.这个时候其实相当于启动了另外一个线程.这里注意一下,这个视...
2018-05-13 15:22:46
4631
3
原创 使用js开发数据库
前端很多时候还是需要保存一些数据的，这里的保存指的是长久的保存。以前的思想是把数据保存在cookie中，或者将key保存在cookie中，将其他数据保存在服务器上。这几个场景用处很多，也非常的成熟好用。但是我还是想要一种能够长久的保存在本地的数据，类似数据库或者类似web sql。新一代浏览器基本都支持了本地数据库，需要用的时候直接使用就好了。实在不行还可以使用Storage将就一下。...
2018-03-30 12:43:50
3270
2
原创 RN的缓存策略探索
最近使用RN做APP，时间长了总是觉得接口请求是在太频繁。遂想到，不如给接口做个缓存吧。这里申明一下，我是从前端开始接触RN，然后到APP的。对于APP原本是使用什么样的缓存策略还真的没有去深入了解。这里本着将前端的思想带入APP的原则来探讨一下使用RN来做接口部分的缓存策略。服务器接口缓存最开始的时候只是希望减轻服务器压力，减少不必要的计算过程。比如用户数据没变化的时候就不需要去...
2018-03-28 19:41:56
1754
原创 微信小游戏引擎
今日微信出了一个小游戏,就是非常火的跳一跳和坦克大战.我看的非常眼热啊,之前就特别想做微信的游戏.奈何微信的环境做游戏效果还是不如APP好啊.不过现在有了微信小游戏,还开发什么APP啊.下面就介绍一下wechat-game这个神器.微信小游戏引擎介绍这是一个使用js来抽象化微信组件的游戏引擎.该组件封装好了微信的几个画板接口,同时在这个的基础上抽象出了对象/视图/渲染器等多个不同功能的元件.开发者只
2017-12-30 18:25:39
6393
1
原创 react-native功能支持汇总
0.47之前的功能就不再说明了，以下主要说明之后新出但是没有来得及写到文档的功能0.47添加SwipeableRow 组件(实验)改进 <ImageBackground>将 jest、jest-repl、jest-runtime 版本更新到 20.0.40.48为 WebSocket 添加 Blob 实现 ，使 WebSocket 支持二进制数据的...
2017-12-07 12:46:40
1264
原创 更新package.json的方法
每次提交代码都要更新一个版本号。。。好麻烦。不如将这个东西做成一个命令，加在每次提交或者发布新版本的时候。这样就可以自己更新版本号了。。。/** * 更新package.json的服务 */var fs = require('fs'), path = require('path');const packageFile = __dirname + '/package.json';con
2017-11-29 18:49:51
4315
原创 AppRegistry详细解析
在React-native中有一个api叫AppRegistry。这是RN中的一个重要api。接口介绍static registerComponent(appKey, componentProvider, section?)注册组件，js中非常重要的一步，只有这里注册了，native code中才会找到要执行的js。static registerRunnable(appKey, run)注册一个
2017-11-16 17:30:15
5587
原创 使用typings给vscode添加更多的智能提示
vscode真的是一个非常好用的IDE，但是智能提示这块还是不能提示所有的东西，这个真的是非常的麻烦的。下面就教大家使用typing来给没有提示的关键字、对象、方法等添加提示。安装typings1.前提是有npm 2.在项目目录下执行npm install typings -g全局安装更放心初始化项目1.在项目下执行typings init项目下会自动生成文件typings.json这个文件给ty
2017-09-15 11:04:55
11197
1
原创 使用react-native-image-crop-picker上传图片
使用reac-native的图片上传插件image-crop-picker上传图片的时候遇到了好多坑，真是把我坑惨了。安装安装可以参考插件提供的方法去安装。需要注意的是，如果android或者ios是有人负责的话就不要link了。link会自动关联代码会把客户端的代码变的不是你想要的。调用相册import ImagePicker from 'react-native-image-crop-picke
2017-09-11 14:10:01
4068
6
原创 利用node伪造请求数据
需求核心：ajax请求该接口，使用设置的访问方式，传入可配置的参数，输出对应的，经过计算的json数据或者其他东西。传入的请求类型可配置，默认GET传入的header可配置，默认不处理传入的参数可配置可校验，默认不处理返回的对象和类型可配置，可使用参数参与计算。默认json格式，空对象思路使用nodejs搭配一个简单的后台模板使用express实现http服务使用中间件处理各种请求
2017-08-29 15:41:15
2445
原创 创建一个简单的代码发布服务
每次发布代码的时候都要提交一堆文件，还要执行一堆命令，麻烦不？下面教你怎么逐步摆脱这种苦恼。写脚本使用脚本是一个行之有效的方法。 在linux上直接写bash脚本，把要执行的逻辑都写在里面。具体的语法可以自行学习，这里只教你基本的。1.声明这是一个脚本。#!/bin/bash 2.写简单的注释，以后也可以明白这个文件是干嘛用的。 3.切换目录，这样不管是进入了什么目录都可以执行脚本 4.执行
2017-08-21 18:11:45
431
原创 ES6特性解释
let和constlet在块级作用域有效。不存在之前的var的作用域提升。const意思是只读的变量。不可以在声明之后再改变值。const指向对象的时候，对象可以改变属性，但是对象不能变。{ let a=1;}for(let i=0;i<10;i++){}变量的解构1.数组的解构。左边的变量对等于右边的值。值的长度可变，不存在则等于undefined
2017-08-21 14:44:01
756
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人