前端 - 简忆博客

echarts生成中国地形图，中国地图数据统计

2020-08-23 前端

基于echarts实现中国地图显示，省份区域地区鼠标悬停显示区域数据，数据从低到高，显示不同的颜色，主要用于数据统计。效果如下图所示：步骤1：引入相关地图文件引入 echarts.min.js 和 china.js附件下载及案例：扫码关注“简忆博客”，回复“echartcn”，获取。步骤2：用于存放地图的盒子<div;id="region";style="width:;700px;height:600px;"></div> 步骤3：js实例化代码:<script> var;myChart2;=;echarts.init(document.getElementById('region')); ;;;;var;option2;=;{ ;;;;;;;;backgroundColor:;'#FFFFFF', ;;;;;;;;t

flutter常见命令整理收藏

2020-07-01 前端

2736 0

1、帮助命令：flutter -h2、显示本机的模拟器：flutter emulators3、启动本机的模拟器：flutter emulator --launch apple_ios_simulator4、远程更新package：flutter packages get5、运行应用到模拟器上：flutter run6、热重载：先保存代码ctrl+s,，然后在 terminal中输入r，执行后界面内容更新7、停止运行：ctrl+zVSCode中常用的快捷键R 键重新启动r 键热重载q 退出p 显示网格P 显示帧率o 切换Android与iOS的预览模式

flutter搜索功能实现

2020-07-01 前端

7521 0

搜索功能在每个app里面必不可少，也是常见的功能，以下是个案例。效果图展示：说明：本功能实现，点击搜索框跳转至搜索页面，搜索联想功能import;'package:flutter/material.dart'; import;'detail_page.dart'; ; class;HomePage;extends;StatefulWidget{ ;;_TvPageState;createState();=>;_TvPageState(); } ; class;_TvPageState;extends;State<HomePage>;with;AutomaticKeepAliveClientMixin{ ;;@override ;;void;initState(){ ;;;;super.initState(); ;;} ;;@override ;;Widget;build(BuildCon

flutter页面间跳转和销毁方法

2020-07-01 前端

5995 0

1、push方法：直接跳转到下个页面，可以传递参数Navigator.of(context).push( ;;;;new;MaterialPageRoute(builder:;(BuildContext;context);{ //TextWdigetPage要跳转的页面 //title要传递的参数 ;;;;;;return;TextWdigetPage(title:;"传递的参数"); ;;;;})) ; ),或者Navigator.push(context, ;;;;new;MaterialPageRoute(builder:;(BuildContext;context);{ ;;;;;;return;TextWdigetPage(title:;"传递的参数"); ;;;;}) )2、页面的销毁：跳转后的操作，route == null 为销毁当前页面Navigator.pushAndRemov

futter页面跳转，列表跳转至详情页介绍

2020-07-01 前端

2915 0

1、使用InkWell（）包裹元素，onTap(){}点击跳转onTap:;(){ ;;Navigator.of(context).push( ;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;eachVodId:;val['id'], ;;;;;eachVodName:;val['vod_name'], ;;;;;p:1 ;;;;;)) ); }1.1、demo代码：;;;;;;return;InkWell( ;;;;;;;;onTap:;(){ ;;;;;;;;;;Navigator.of(context).push( ;;;;;;;;;;;;;;MaterialPageRoute(builder:;(context)=>DetailPage( ;;;;;;;;;;;;;;;;;;eachVodId:;val['id'], ;;;;;;;;;;;;;;;;;;eachVodName:;val[

flutter网络编程之dio封装

2020-07-01 前端

4645 0

一、添加依赖pubspec.yamldependencies: dio:;^3.0.9二、dio封装2.1、创建http_service.dart文件（/lib/service/http_conf.dart），用于dio请求封装import;'package:dio/dio.dart'; import;'dart:async'; import;'dart:io'; import;'../config/index.dart'; import;'../config/http_conf.dart'; ; Future;request(url,{formData})async{ ;;try{ ;;;;Response;response; ;;;;Dio;dio;=;new;Dio(); //;;;;dio.options.contentType;=;ContentType.parse('application/x-www-form-url

Flutter视频播放器推荐

2020-07-01 前端

7162 0

fijkplayer 是一个 Flutter 生态的媒体播放器，是对 ijkplayer 的 Flutter 封装，支持 Android 和 iOS。 fijkplayer 使用 ijkplayer 作为播放器内核。ijkplayer 使用 ffmpeg 进行音视频解封装和解码，同时添加了 Android 和 iOS 平台特有的硬件加速解码能力。;fijkplayer 具有和 ijkplayer 一样的播放能力，并且开箱即用，不需要使用者再去编译 ijkplayer，API易用，易于在 Flutter 项目中集成。;fijkplayer 通过纹理方式将播放器视频画面渲染接入 flutter 中，性能上优于 PlatformView 的接入方法。 fijkplayer 有内置的编译好的ffmepg

Flutter使用 Wakelock 插件控制屏幕常亮方法

2020-06-25 前端

5908 0

有时我们在播放视频是需要使屏幕处于常亮状态，这时可以使用Wakelock 插件。;wakelock在android的电源管理系统中扮演一个核心的角色，wakelock是一种锁的机制, 只要有task拿着这个锁, 系统就无法进入休眠, 可以被用户态进程和内核线程获得。这个锁可以是有超时的或者是没有超时的, 超时的锁会在时间过去以后自动解锁。如果没有锁了或者超时了, 内核就会启动标准linux的那套休眠机制机制来进入休眠。github介绍：https://pub.flutter-io.cn/packages/wakelock安装使用说明：1、添加到pubspec.yaml 文件dependencies: ;;wakelock:;^0.1.4+1

Flutter学习修改app名称和icon图标

2020-06-25 前端

3055 0

一个app应用开发到最后，也就剩下上线的步骤了，上线之前除了测试之外还有一个重要的步骤也就是app信息的修改，最近笔者刚好做好了app，以下记录下个人人修改app应用信息和图标流程，供大家参考一、图标icon修改1.1、android应用icon修改（路径：项目/android/app/src/main/res）把各个文件夹下图片换成你想要的尺寸，还有格式必须是.png后缀。1.2、iso应用图标icon修改：（路径：项目/ios/Runner/Assets.xcassets/AppIcon.appiconset/）注意：ios应用图标必须是圆角透明png图标，相比安卓，安卓只需png图标，不需要圆角。二、修改应用名

android studio flutter打包，踩坑，填坑详细过程。

2020-06-25 前端

4516 1

笔者第一次学flutter,踩坑不少，填坑也不少，不得不说官网在打包的这块留太多坑了。以下是笔者做好flutter项目中遇到的一些问题。一、SDK篇1、修改flutter.gradle 和;resolve_dependencies.gradle路径：flutter/packages/flutter_tools/gradle/flutter.gradle;;;;;;;;;;flutter/packages/flutter_tools/gradle/resolve_dependencies.gradle1.1、flutter.gradle文件修改buildscript部分buildscript;{ ;;;;repositories;{ ;;;;;;;;maven;{;url;'https://maven.aliyun.com/repository/google';} maven;{;url;'https://maven

mac flutter 环境搭建、安装教程记录

2020-06-24 前端

2576 0

本文主要说的是mac系统下的flutter环境安装。如果是window系统的伙伴，可以参考另一篇文章：Win10下 Flutter环境完整安装记录、教程安装步骤说明：1.打开终端，cd到你要安装的目录2. 下载flutter：;git;clone;-b;beta;https://github.com/flutter/flutter.git3.下载好flutter后就在当前目录下执行： export PATH=`pwd`/flutter/bin:$PATH;或者：此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将Flutter添加到PATH中,需要修改 .bash_profile 文件vim;~/.bash_profileexport;PATH=/Users/huipu/Downloads/work/flutter/bin:$P

解决Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/问题

2020-06-24 前端

4536 0

mac终端执行flutter -h命令后，出现过Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/flutter/91a63d6a44c56ca13baadccedc46fd66b001fdbc/dart-sdk-darwin-x64.zipIf you're located in China, please see this page:; https://flutter.dev/community/china 这个问题。解决办法执行flutter -h之前，先执行一下命令export;PUB_HOSTED_URL=https://pub.flutter-io.cn export;FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn成功之后：

Win10下 Flutter环境完整安装记录、教程

2020-06-10 前端

3325 0

本文主要说的是win10系统下的flutter环境安装。如果是mac系统的伙伴，可以参考另一篇文章：mac flutter 环境搭建、安装教程记录flutter开发SDK使用git克隆仓库下载。至于git的使用不是本篇文章介绍的内容，不熟悉git的请移步git使用详细教程一、下载flutter在git命令行下输入如下命令：git;clone;-b;alpha;https://github.com/flutter/flutter.git 注意: flutter的下载路径要全英文并且路径不能有空格！执行完命令后等待下载即可。二、配置环境变量在系统环境变量path中添加刚刚下载的flutter的路径。将bin文件路径添加至path中Win10添加

解决 androidStudio4.0 Settings->Plugins下载插件，插件列表加载不出来

2020-06-07 前端

12591 0

解决 androidStudio Settings->Plugins下载插件，插件列表加载不出来点击设置，勾选Auto-detect proxy settings，输入网址 https://plugins.jetbrains.com/在进行搜索，如下，可以看到对应的安装列表。

vs code px自动转换rem

2020-06-01 前端

3185 0

在开发手机端页面时，我们需要使用到rem单位，那么vscode中如何将px转rem呢？安装px to rem插件；然后在设置->用户设置中->扩展中找到**px to rem **

vscode 常用插件、常用必备插件推荐

2020-05-31 前端

2653 0

vs code常用插件（24个）1、Auto Close Tag; ;html自动闭合标签插件　2、Auto Rename Tag; ;html 自动重命名标签插件3、Beautify; 格式化插件; ; ; ; ; ; ; ; ;4、Prettier - Code formatter; ;代码格式化5、Chinese (Simplified) vscode; ; 汉化插件6、Code Runner; ;在编辑器里运行js代码，同时可在terminal里显示打印结果的工具7、ESLint; 代码规范检查工具8、HTML Snippets; ; 快速生成html代码工具9、Live Server; 快速启动一个本地服务，方便html文件预览调试等10、npm Intellisense; 导入语句自动补全 npm 模块名称11、CSS Peek;

npm ERR! missing script: serve 报错解决方法

2020-05-15 前端

27091 0

npm ERR! missing script: servenpm ERR! A complete log of this run can be found in:npm ERR!; ; ;C:\Users\HuiPu\AppData\Roaming\npm-cache\_logs\2020-05-15T13_59_05_166Z-debug.log这是因为vue 版本问题，使用 npm run start 来运行项目;npm;run;start

百度 Echarts showLoading 和 hideLoading 使用方法

2020-04-26 前端

5527 0

百度 Echarts showLoading 和 hideLoading 使用方法在使用ECharts渲染数据时，由于从后台执行获取到前台需要3-4s，想要通过增加正在执行，请等待这类提示信息提升用户体验，myChart1;=;echarts.init(document.getElementById(ipArr[idx]+'echarts'))； myChart1.showLoading({ ;;text;:;'正在加载数据' });;;//增加提示 ···;//省略通过ajax异步获取数据，获取数据完成后，调用下面function //function中echarts部分代码 var;option;=;{···} myChart1.hideLoading();;;//提示关闭 myChart1.setOption(option);ECha

js合并两个数组生成合并后的key：value数组方法

2020-04-23 前端

3670 0

js合并两个数组生成合并后的key：value数组方法// var activeSubjectsName = ["JAVA", "PHP", "Android", "IOS", "Python"];// var activeSubjectsNum = [46, 2, 2, 28, 29];// var activeSubjectsArr = [];for (var i = 0; i < activeSubjectsName.length; i++) { console.log(i); var activeSubjectsObject = {}; for (var j = 0; j < activeSubjectsNum.length; j++) { ;if (i == j) { ; activeSubjectsObject.name = activeSubjectsName[i]; ; activeSubjectsObject.value =

npm 和 cnpm的区别和安装

2020-04-19 前端

3069 0

npm允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用npm命令npm -v 来测试是否成功安装查看当前目录已安装插件：npm list更新全部插件： npm update [ --save-dev ]使用 npm 更新对应插件： npm update <name> [ -g ] [ --save-dev]使用 npm 卸载插件： npm uninstall <name> [ -g ] [ --save-dev ]cnpm淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步

创建vue项目实例

2020-04-17 前端

2874 0

前提步骤1：安装脚手架工具vue-cli，常见问题参考：这边文章,;Vue cli 安装慢的解决方法npm;install;-g;@vue/cli前提步骤2：安装Webpack;npm;install;-g;webpack一、创建项目;vue create 项目名称vue create vue-admin二、选择配置，默认的配置还是自定义的配置，这里选择自定义的配置三、这里选择需要的模块：四、是否需要添加history提供的路由模式，选择 Y ，回车五、预编译的css选择，这边选择第一个回车六、要不要写入到package，选择第二个，回车输入N，回车。至此，我们脚手架已经安装成功了，进入到项目 cd vue-admin，启动项目np

echarts生成中国地形图，中国地图数据统计

flutter常见命令整理收藏

flutter搜索功能实现

flutter页面间跳转和销毁方法

futter页面跳转，列表跳转至详情页介绍

flutter网络编程之dio封装

Flutter视频播放器推荐

Flutter使用 Wakelock 插件控制屏幕常亮方法

Flutter学习修改app名称和icon图标

android studio flutter打包，踩坑，填坑详细过程。

mac flutter 环境搭建、安装教程记录

解决Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/问题

Win10下 Flutter环境完整安装记录、教程

解决 androidStudio4.0 Settings->Plugins下载插件，插件列表加载不出来

vs code px自动转换rem

vscode 常用插件、常用必备插件推荐

npm ERR! missing script: serve 报错解决方法

百度 Echarts showLoading 和 hideLoading 使用方法

js合并两个数组生成合并后的key：value数组方法

npm 和 cnpm的区别和安装

创建vue项目实例

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

echarts生成中国地形图，中国地图数据统计

flutter常见命令整理收藏

flutter搜索功能实现

flutter页面间跳转和销毁方法

futter页面跳转，列表跳转至详情页介绍

flutter网络编程之dio封装

Flutter视频播放器推荐

Flutter使用 Wakelock 插件控制屏幕常亮方法

Flutter学习修改app名称和icon图标

android studio flutter打包，踩坑，填坑详细过程。

mac flutter 环境搭建、安装教程记录

解决Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra/问题

Win10下 Flutter环境完整安装记录、教程

解决 androidStudio4.0 Settings->Plugins下载插件，插件列表加载不出来

vs code px自动转换rem

vscode 常用插件、常用必备插件推荐

npm ERR! missing script: serve 报错解决方法

百度 Echarts showLoading 和 hideLoading 使用方法

js合并两个数组生成合并后的key：value数组方法

npm 和 cnpm的区别和安装

创建vue项目实例

置顶推荐

代码版本管理工具Git常用命令操作

html前端按钮效果

swiper插件的使用

管理服务器常见的几个命令

标签云

浏览排行

最近热文

打赏本站

如果你觉得本站很棒，可以通过扫码支付打赏哦！

微信扫码：你说多少就多少~

支付宝扫码：你说多少就多少~

友情链接

关于简忆

官方公众号

官方小程序

技术闲聊

架构统计

使用以下账号登录