- 博客(210)
- 收藏
- 关注
RSS订阅原创 angular 路径参数和查询参数
总结一下路径参数和查询参数，为了方便大家对比观察 写在一起方便对比路径参数的配置--查询参数的配置{ path: ':tabLink',component: HomeDetailComponent,}{path: 'home',component: HomeContainerComponent,}路径参数的跳转--查询参数的跳转1.<a [routerLink]="['/home',tablink]"></a>2.this.router.navig
2022-04-27 17:45:47
847
原创 Angular 子路由及动态路由
路由的模块写法_MIKE-zi的博客-CSDN博客首先参考上篇文章angular 路由基础_MIKE-zi的博客-CSDN博客1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(
2022-04-27 17:17:15
1615
原创 路由的模块写法
首先参考上篇文章angular 路由基础_MIKE-zi的博客-CSDN博客1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。 * 启用路由的 de
2022-04-27 16:43:49
602
原创 angular 路由基础
1.首先根节点 app-routing.module.tsconst routes = [{ path: 'home', component: HomeContainerComponent}]@NgModule({ /** * 根路由使用 `RouterModule.forRoot(routes)` 形式。 * 而功能模块中的路由模块使用 `outerModule.forChild(routes)` 形式。 * 启用路由的 debug 跟踪模式，需要在根模块中设置
2022-04-27 16:36:11
567
原创 angular 脏值检测基础流程
脏值检测需要我们知道的1.单项数据流，从根节点检查到当前页面节点2.脏值检测时候的声明周期更新dom以后 脏值检测需要走两次。下面我们配置一个demo演示。首先配置我们需要的demorouting里面路径配置const routes: Routes = [ { path: 'home', component: HomeContainerComponent, }, { path: 'change-detection', path..
2022-04-26 17:45:41
713
原创 nvm node版本切换无效
使用nvm经常发现切换node版本以后，就没有node环境了解决方法：看了很多方法，配置环境变量，先清空node环境再重新安装nvm等，在我这台电脑都无法解决问题。应该是下载的node包有问题。 打卡nvm查看，发现可以切换的版本node.exe是绿色的，而有问题的是没有图标的（上图）所以最简单的解决方法到，node网站下载一下对应版本然后下载下来的解压替换nvm目录里的全部内容。然后就可以...
2022-04-15 10:17:08
6938
原创 NVM的使用 （windows）
nvm是解决多版本node环境管理最好的方式1.首先卸载以前的node环境 打开命令行工具 where node 查看位置 完整删除。或者使用控制面板卸载程序删除。2.下载nvmReleases · coreybutler/nvm-windows · GitHubA node.js version management utility for Windows. Ironically written in Go. - Releases · coreybutler/nvm-windowshttps:/.
2022-04-14 18:55:17
670
原创 angular拦截器的使用
引入拦截器 ngModule中引入拦截器@NgModule({ declarations: [AppComponent], imports: [ ], providers: [ { provide: HTTP_INTERCEPTORS, useClass: NotificationInterceptor, multi: true }, ], bootstrap: [AppComponent]})使用方法1 拦截修改请求头
2022-01-26 17:35:02
1263
原创 angular 网络请求HttpClient的使用
使用方法类似服务，就是引入之后直接注入，只不过不用providers引入，使用module的方式引入@NgModule({ declarations: [AppComponent], imports: [ HttpClientModule, ],})使用的地方：import { HttpClient } from '@angular/common/http';@Injectable({ providedIn: 'root'})export class Hom
2022-01-26 17:03:32
1209
原创 angular核心概念快速入门
1.指令 directive指令就像是属性 需要宿主元素 改变宿主元素的样式 appGridItemImage appGridItemTitle <img appGridItemImage="2rem" [src]="item.icon" alt="" /> <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>详细参考anglar指令的使用_lee727n的博客-CSD
2022-01-24 10:57:02
281
原创 angular 服务 .service.ts
首先理解一下angular的服务的本质就是依赖注入 我们写在一个ts文件中 其实service就是一个Injector@Injectable()class Product { constructor( private name: string, private model: string, private color: string, private price: number, private type: string ) { }}export
2022-01-24 10:41:32
1084
原创 anglar指令的使用
指令其实就像是自己给组件添加的一个属性使用的地方 .html中 <span appGridItem *ngFor="let item of channels"> <img appGridItemImage="2rem" [src]="item.icon" alt="" /> <span appGridItemTitle="0.6rem" class="title">{{ item.title }}</span>
2022-01-24 10:22:48
282
原创 angular 投影概念
投影的概念 就是组件里面的ng-content部分 可以被组件外部包裹的元素替代。 <ng-content select="[appGridItem]"></ng-content>例如，我们现在有个组件 <app-horizontal-grid> <span appGridItem *ngFor="let item of channels"> <img appGridItemImage="2rem" [src]="
2022-01-24 10:12:40
138
原创 angular 管道pipe
使用的地方 模板.html<p> {{ date | appAgo }}</p>使用的地方 .ts this.date = this.minusMonths(new Date(), 24); minusMonths(date: Date, months: number) { const result = new Date(date); result.setMonth(result.getMonth() - months); re
2022-01-24 10:02:47
390
原创 taro 指定行数显示 多余...
效果如上~实现代码如下： <View className='headline'>靠phone和createTime俩字段，能大大降低数据重复度，抛开别的字段不说，这俩字段基本能保证没有重复数据，所以我们最终的数据很真实，没有一条是重复的，而且，最后还能通过createTime来统计每秒插入条数，nice~</View>css样式： .headline{ margin-top: 70px; margin-left...
2021-12-10 09:32:18
276
原创 taro 文本多行显示
不要使用text组件，使用view组件可以更随心应手 <View className='headline'>靠phone和createTime俩字段，能大大降低数据重复度，抛开别的字段不说，这俩字段基本能保证没有重复数据，所以我们最终的数据很真实，没有一条是重复的，而且，最后还能通过createTime来统计每秒插入条数，nice~</View>css样式 .headline{ margin-top: 70px; mar
2021-12-10 09:24:28
938
原创 taro图片上加图片 taro引入背景图语法
需求在一个大图片上，对应的位置贴上一个小图片，打算用relative和absolute方式实现。但是发现image标签上无法加载出image标签所以才用外层view，view引入背景图，在view上贴图片 <View className='home-top-bg-img' style={{ backgroundImage: `url(${hometop})`, backgroundSize: '100% 100%' }}> <Text c
2021-12-08 19:16:15
1438
原创 taro小程序屏幕适配那些事
关于小程序的屏幕适配。我们首先需要分清以下几个概念，pt px rpx这是我们进行屏幕适配的基础，如果对于上述概念还不清楚的同学可以参考这篇文章微信小程序 px和rpx px和pt 深度解析_lee727n的博客-CSDN博客_px rpx通过这篇博客我们深入的研究一下rxp。想要理解rpx首先看一张图，理解一下pt和px如图所以 pt和px是有对应关系的 不同的机型 会有1倍2倍3倍的对应关系：pt 称为逻辑分辨率 和 和屏幕的尺寸有关系 屏幕大 逻辑分辨率就多 ，屏幕小 逻辑分辨率就小px 称为物理
2021-09-10 11:09:22
2947
原创 微信小程序分享功能
微信小程序分享功能。1.打开分享功能按钮。可以显示出分享按钮wx.showShareMenu(Object object)官方文档如下https://developers.weixin.qq.com/miniprogram/dev/api/share/wx.showShareMenu.html实现代码wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline']})
2021-08-30 14:45:49
8478
原创 taro小程序 函数组件实现分享功能
taro小程序的函数式组件实现微信小程序的分享功能。看到网上的帖子都是类组件实现的。函数式组件资料很少。爬完坑，写一个方便大家查阅首先，需要打开显示转发按钮，这个时候即使没有做任何设置。也是可以点击发送给好友的。最开始的默认状态打开转发按钮 useEffect(() => { Taro.showShareMenu({ withShareTicket: true }) }, [])然后继续 如果想要分享给好友或是朋友圈 需要监听分享按钮..
2021-08-30 14:34:45
5039
原创 taro获取时间戳 小程序时间戳
taro获取时间戳和微信的还不太一样。有些方法taro里并不支持，会报错。这里整理了taro小程序可以用的获取时间戳方法。如下 var timestamp = (new Date()).valueOf();//获取当前毫秒的时间戳，准确！ const timestamp = parseInt((new Date().getTime() / 1000).toString()); //秒级时间戳 console.log('开始答题时间戳-----', timestamp ).
2021-08-26 18:54:26
1028
原创 taro计时器的实现 taro跨页面计时
需求中，需要对考试记录答题时间，需要跨越多个页面。答题，签名，交卷，多个页面需要一个统一的计时器。这里我们采用时间戳的方式解决。计时开始 const temp = parseInt((new Date().getTime() / 1000).toString()); //当前时间 console.log('开始答题时间戳-----', temp) setstartstamp(temp)计时结束，计算全部时间 const nowDate1 = parseInt(
2021-08-26 18:50:38
485
原创 TARO小程序canvas签名图片上传服务器
taro小程序实现签名上传，发现介绍的很少，所以整理出来给大家一些帮助。首先canvas画板会生成一个图片。这个图片只是一个路径。不同于自己写的上传接口。将图片data发送给后台。这里我们看不到临时路径里的路径。所以需要借助uploadfile的方法。将路径的内容传到指定位置 // 生成图片 Taro.canvasToTempFilePath({ canvasId: 'canvas', success: res => { console.l
2021-08-26 18:45:06
1081
2
原创 taro判断所有选项都没选
答题卡需求，如果对应题目没有作答。答题卡上显示出未作答状态。效果如下 contentList.map((item, index) => { let isAnswer = item.optionList.every(checkIsAnswer); return ( <View className='DataCi.
2021-08-26 18:36:01
122
原创 taro获取eventChannel
const pages = getCurrentPages() const current = pages[pages.length - 1] const eventChannel = current.getOpenerEventChannel() eventChannel.emit('someEvent', { queNumber: idx });TARO中需要用上述方法才能获取到eventChannel 具体的使用参考另一篇博文https://blog.cs...
2021-08-24 19:57:13
2419
原创 Taro 函数组件navigateBack传参 eventChannel的使用
需求如下A页面考试题，B页面答题卡。当我们从答题卡选中一道题，跳回上一个页面并且滚动到对应的题目。通常来说，往上一个页面传值我们可以用getCurrentPages 拿到上一个页面 然后去setstate上一个页面的值。但是函数组件没有setstate我们就需要换中思路。使用eventChanelhttps://taro-docs.jd.com/taro/docs/apis/route/EventChannel官方文档如上，写的非常简单。没有基础的基本看不懂。这里我们可以参考一下微信的文档h
2021-08-24 19:55:27
3888
3
原创 jsx中字符串换行
在jsx中实现字符串换行，首先需要换行的核心属性就是css中的white-space首先我们先设置样式css .DetailsTitle{ width: 100%; word-wrap: break-word; white-space: pre-wrap; }为了方便对比，我们写3种实现的方式<View className='DetailsTitle'>{'1、20210817全流程测试试卷\n2、考试须知
2021-08-20 19:21:16
1807
原创 react 函数组件useState异步变同步
需求 函数组件实现一个下拉上拉的列表，列表支持分页。最开始我们使用setstate的方式去报错当前页数。这样做的问题，就是有一个异步的延迟。上代码 const [pageNo, setpageNo] = useState(1) const onPullUpRefresh = () => { console.log("上拉加载内容") console.log("上一次的pageNo", pageNo) setpageNo(pageNo + 1) consol
2021-08-18 10:16:40
6113
原创 微信小程序opensetting对比getsetting
对于微信小程序的这两个api的介绍官方文档写的比较简单，好像都是来获取当前用户的授权状态。官方文档https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.openSetting.htmlgetsetting:获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。opensetting:调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限。
2021-08-05 14:11:22
1257
原创 angular中括号的原理[]
angular中括号的意义，还是通过我们之前封装的tabbar来分析<app-scrollable-tab [menus]="topMenus" backgroundColor="green" titleColor="#fff" tilteActiveColor="yellow" (tabSelected)="handleTabSelected($event)"></app-scrollable-tab>组件内部接收background的属性 接收颜色的字符串.
2021-07-22 18:40:18
460
原创 angular样式绑定
总结angular中的几种样式绑定方法，先上代码，自定义组件tabbar<ul [ngStyle]="{ 'background-color': backgroundColor }"> <li *ngFor="let menu of menus; let i = index ; let even = even; let odd = odd" [ngClass]="{ even: even, odd: odd }" > <br>
2021-07-22 17:45:50
842
1
原创 angular组件传值 输入输出
还是利用tabbar来介绍，上代码<app-scrollable-tab [menus]="topMenus" (tabSelected)="handleTabSelected($event)"></app-scrollable-tab>组件内部js selectedIndex = -1; @Input() menus: TopMenu[] = []; @Output() tabSelected = new EventEmitter(); co
2021-07-21 17:42:20
196
原创 angular ngif指令
还是用topbar演示 ngif的使用 上代码<ul> <li *ngFor="let menu of menus; let i = index"> <a href="#" [class.active]="i === selectedIndex" (click)="handleSelection(i)"> {{ menu.title }} </a> <span class="indicator" *ngIf=
2021-07-21 17:25:50
405
原创 angular重要指令ngfor
通过一个顶部导航栏看下一ngfor的使用。上代码<ul> <li *ngFor="let menu of menus; let i = index let one = first let final = last"> <a href="#" [class.active]="i === selectedIndex" [class.first]='one' [class.final]='final' (click)="selectedIndex = i
2021-07-21 16:26:39
934
原创 react目录结构解析
通过脚手架搭建好最简单的react程序以后，结构目录如上图，对于有前端基础的同学来说，package.json gitignore 这些都很熟悉了。我们主要介绍一下react中的核心文件1.public中 index.html 这个文件是主页面 主页面的结构，后面我们写的页面都是加载到这个h5页面上。也就是说这个文件是我们程序的主结构页面<!DOCTYPE html><html lang="en"> <head> <meta chars...
2021-05-26 17:33:11
1858
2
原创 react搭建环境
react搭建环境非常简单，首先参考官网https://reactjs.org/docs/create-a-new-react-app.html1.首先安装 react脚手架工具npm install -g create-react-app2.用脚手架工具创建我们的工程 create-react-app sinplesinple为工程名 叫什么口可以3.进入到sinple文件夹下 启动程序 cd sinple npm start4.编译完成 效果如下.
2021-05-26 17:18:40
86
原创 packge.json版本依赖详解
"dependencies": { "@angular/animations": "~8.0.0", "@angular/common": "~8.0.0", "@angular/compiler": "~8.0.0", "@angular/core": "~8.0.0", "@angular/forms": "~8.0.0", "@angular/platform-browser": "~8.0.0", "@angular/platform-b...
2021-05-12 19:43:05
166
原创 angular项目搭建 脚手架
1.安装node.js 直接官网下载https://nodejs.org/en/2.安装之后查一下 node 版本npm -v3.装好node 就有了npm npm中可以找到各种框架 网址：https://www.npmjs.com/package/@angular/cli4.安装angular cli 上面网址中 可以直接拷贝命令npm install -g @angular/cli5.如果网速慢 讲npm替换为cnpmnpm install cnpm -g --reg.
2021-03-02 14:34:45
317
1
原创 react折叠显示更多
显示效果如上图 <div className='introView' > <div className='deptname'>骨科</div> <div className='deptphone'>门诊电话: <span>010-8888 8888</span></div> <div className={get...
2020-12-08 15:38:06
1466
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人