- 博客(18)
- 收藏
- 关注
RSS订阅原创 React - 密码框
基于 antd Input 密码框场景你可能有这样的需求，要求的 Input 密码框 在控制台上不明文显示；随即尝试，该方案是使用 dom 的操作（removeAttribute）来隐藏 value 属性，与 antd Input 使用一致。组件jsx 编写使用 antd Input 加上 Icon 来控制显示文本框内容，并在该类中传入props：id 及 onChange；如无传 id，默认id=“password”。import React from 'react';import Pro
2021-09-06 18:42:42
1289
原创 umi 分包
umi 分包简介Umi 是蚂蚁金服推出的一个围绕React技术栈的底层前端框架， 配合antd的UI组件库能极大的提高项目开发效率。官网地址umi 拆包简的来说在 umi 框架中，我们会用到其他的组件库（类如：antd，moment，echarts等），当我们打包构建时，可以看到 umi.js 3M多 的包超大，它把其它组件的都集成到了 umi.js 中了，这样就会造成项目运行耗时长的影响。使用 analyze 指令运行（使用 cross-env 运行，说明在下个标题： cross-e
2021-04-17 11:14:16
6822
原创 React - mobx
项目搭建搭建全局脚手架npm install -g create-react-app在 cra 中使⽤⾮ eject ⽅式启⽤ decorator初始化npx create-react-app mobx-demo安装改变 create-react-app 中 webpack 配置插件yarn add -D react-app-rewired customize-cra @babel/plugin-proposal-decorators mobx mobx-react在项⽬根⽬录创建
2020-12-12 10:26:37
203
原创 小程序之自定义顶部导航
小程序之自定义顶部导航原由：根据UI图的设计开发，小程序自带的顶部导航并不适合项目开发的需求，所以需要封装一个组件来实现。步骤1.根据文档字段，隐藏自带的导航 ---- 文档地址属性类型默认值描述最低版本navigationStylestringdefault导航栏样式，仅支持以下值： default 默认样式 custom 自定义导航栏，只保留右上角胶囊按钮微信客户端 7.0.02.使用API，获取状态栏以及胶囊按钮的数据系统信息 ---- wx.getS
2020-09-03 12:38:28
1125
原创 小程序之表单验证
小程序之表单验证使用 WxValidate.js 插件来校验表单数据常用实例方法：名称返回类型描述checkForm(e)boolean验证所有字段的规则，返回验证是否通过。valid()boolean返回验证是否通过。size()number返回错误信息的个数。validationErrors()array返回所有错误信息。addMethod(name, method, message)boolean添加自定义验证方法。思路
2020-07-24 18:05:13
4274
原创 express之安装及登录相关插件
node 环境安装地址查看是否安装成功node -v淘宝镜像npm set registry https://registry.npm.taobao.org/express安装npm install express --save创建express project (项目名称)查看cd projectnpm inpm start // 查看 http://localhost:3000/目录..│ app.js│ package.json│ ├─bin
2020-07-13 20:40:01
474
原创 git之分支与取消上一次提交
git branch分支使用首先，我们创建dev分支，然后切换到login分支：$ git checkout -b loginSwitched to a new branch 'login'git checkout命令加上-b参数表示创建并切换，相当于以下两条命令：$ git branch login$ git checkout loginSwitched to branch 'login'然后，用git branch命令查看当前分支：$ git branch* login m
2020-07-13 20:32:54
665
原创 小程序之底部弹出层+animation
需求：固定在底部的 显示/隐藏 按钮，当它点击时，从底部显示一开始设置了隐藏的 modal 层；然后再点击时隐藏modal 层。主要通过 modalStatus bool变量 来控制，若不用视觉效果只需设置 modalStatus；然而想要视觉效果，则就可以加入 animation 来设置了。小程序 动画对象 animation1.创建一个animation对象 ------ wx.createAnimation(Object object)包含以下属性：属性类型默认值必填说明
2020-06-20 08:03:53
643
原创 小程序之map组件(从我的位置到指定位置导航)
所用到的组件 + APImap组件wx.getLocation(Object object) – 获取当前的地理位置、速度。wx.openLocation(Object object) – 使用微信内置地图查看位置。 map地址 API地址app.json 配置"permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" }},.xml<view
2020-06-19 17:59:37
2007
原创 使用nginx配置从http到https
由于想做下小程序接口且因为小程序发起请求的API只能是Https形式的域名，所以为了能执行预开发的工作，逐步逐步的去注册购买以及配置。从域名注册 – 实名认证 – 域名解析（DNS解析DNSPod，解析后的可以通过 http://***.com访问）以下是域名解析配置nginx官网下载下载后解压注：不能解压到含中文的目录下配置 nginx.conf server { listen 80; server_name www.****.com
2020-05-30 09:03:19
315
原创 小程序6位密码模态框及验证组件
视觉效果其实是通过偏移了 input 输入框（input 设置最大长度），然后根据输入框的 value 值的输入设置六个方框的显示效果，最终所需要的只是 input 的 value 值，并判断当它到达最大长度时的输入校验。思路创建类名 container 作为最外层创建类名 inputWrap 作为内容层其包含 关闭（close），提示（tip），还有 6 个小框（itemWrap -> item）小框（item）通过 wx:for 实现，然后判断 input 的 value 值长
2020-05-26 20:03:05
775
原创 小程序之使用Iconfont
1.在 iconfont 官网 添加需要的字体图标2.找到添加了字体图标的项目，选择 下载到本地3.将压缩包解压，拿到 iconfont.css4.在 iconfont 官网 找到项目的 Unicode，复制 @font-face 的代码5.在 iconfont.css 中 将复制的代码替换到相应位置即可并修改 .css 为 .wxss6.在 iconfont.wxss 中可以根据自己项目要求修改 图标 class 名称...
2020-05-21 12:54:42
475
原创 小程序之fitler.wxs
通过使用.wxs 来实现数据的过滤创建 filter.wxs，使用 引入并使用代码如下：filter.wxsvar status = function(val) { switch(val) { case 1: return val = '报名中'; break; case 2: return val = '已截止'; break; case 3: return val = '已结束'; break;
2020-05-21 12:50:09
194
原创 小程序之基础介绍
小程序文件结构与传统web对比微信小程序传统web结构WXMLHTML样式WXSSCSS逻辑JavascriptJavascript配置JSON无项目基本目录模板语法数据绑定<view> {{ sayHello }} </view>Page({ data: { sayHello: 'Hello MooZiXiao!' }})组件属性<view id="item-{{id}}"&g
2020-05-21 09:02:27
320
原创 Flutter之路由配置
跳转与返回Navigator.push 方法是向路由堆中添加一个新的路由MaterialPageRoute的build方法返回一个新的组件并跳转Navigator.push(context, MaterialPageRoute( builder: (context) => Show()));Navigator.pop 方法是从路由堆里面拿出最前面的路由Navigator.pop(context);路由使用context参数传入 Navigator.of(co
2020-05-17 13:52:46
1385
原创 我的 VS Code 相应配置
VS Code 下载地址插件安装配置用户代码片段html.jsonvue.json{ "Print to ht": { "prefix": "v", "body": [ "<template>", "\t<div class=\"${fileDirname}\">$0</div>", "</template>\n", "<script>", "export default {",
2020-05-16 19:08:02
328
原创 Flutter之基本组件
Flutter1、介绍作为谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面，其目标是使同一套代码同时运行在iOS和Android系统上，并且拥有媲美原生应用的性能，使其App在细节处看起来更像原生应用。flutter 下载地址2、HelloWorld项目入口文件 main.js启动方法 void main()//定义入口方法void main(...
2020-05-06 17:37:47
232
原创 创建 swagger （一)
安装、创建swagger// 全局 安装 swagger 环境npm install -g swagger// 查看swagger -V// 下载项目swagger project create YourProjectName// 运行node app.js使用 express 框架运行cd ./FirstSwaggernode ./app.js浏览器视图目录...
2020-04-27 22:04:19
457
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人