前端
关注
分享
扫一扫
小王的进阶之路
这个作者很懒，什么都没留下…
展开
-
Dart 中的类、静态成员、操作符、类的继承
Dart 中的类、静态成员、操作符、类的继承1. Dart 中的静态成员1. Dart 中的静态成员使用 static 关键字来实现类级别的变量和函数静态方法不能访问非静态成员，非静态方法可以访问静态成员class Person { static String name = '张三'; int age = 20; static void show() { print(name); } // 非静态方法可以访问静态成员以及非静态成员 void printInfo原创 2021-11-17 10:19:20 · 479 阅读 · 2 评论 -
Dart 中类的创建、构造函数、类模块化、私有属性及私有方法、getter 和 setter 修饰符的用法、初始化列表
Dart 1. 创建类与使用类2. 自定义类的默认构造函数3. 自定义类的命名构造函数4. 把类单独抽离成一个模块5.6.7.8.10.11.1. 创建类与使用类// 定义类名，首字母要大写class Person { // 定义类的属性 String name = "张三"; int age = 23; // 定义类的方法 void getInfo() { print("${this.name}---${this.age}"); }}void main() {原创 2021-11-16 10:55:01 · 2070 阅读 · 0 评论 -
Dart 中的函数和闭包
Dart 中的函数1. 函数的定义2. 方法传参2.1 定义一个带可选参数的方法2.2 定义一个带默认参数的方法2.3 定义一个带命名参数的方法2.4 实现一个把方法当做参数的方法1. 函数的定义void printInfo() { print('我是一个自定义方法');}int getNum() { var myNum = 123; return myNum;}void main() { printInfo(); // 我是一个自定义方法 var n = getNum(原创 2021-11-15 21:15:11 · 417 阅读 · 0 评论 -
Dart 集合类型 List Set Map 详解
1. List （列表对象）常用属性void main() { List myList = ['香蕉', '苹果', '西瓜']; print(myList.length); //3 print(myList.isEmpty); //false print(myList.isNotEmpty); //true //翻转 print(myList.reversed); //(西瓜, 苹果, 香蕉) var newMyList = myList.reversed.toList();原创 2021-11-15 11:03:26 · 529 阅读 · 0 评论 -
Dart 运算符、条件判断、类型转换
Dart 运算符、条件判断、类型转换1. 算术运算符2. 逻辑运算符3. 赋值运算符4. 复合赋值运算符5. 逻辑运算符6. 三目运算符7. ?? 运算符1. 算术运算符void main() { int a = 13; int b = 5; // 取整 print(a ~/ b); //2}2. 逻辑运算符void main() { bool flag = true; print(!flag); //false}void main() { bool a = t原创 2021-11-12 22:04:29 · 636 阅读 · 0 评论 -
Dart 的数据类型
这里写目录标题1. 字符串类型1.1 字符串拼接2. 集合类型3. Maps（字典）4. 类型判断1. 字符串类型void main() { String str = '''this is str this is str this is str this is str'''; print(str);}void main() { String str = """this is str this is str this is str this is str""";原创 2021-11-12 19:30:09 · 356 阅读 · 0 评论 -
Dart 入门
Dart入门1. Dart 入口方法介绍2. Dart 变量3. Dart 常量1. Dart 入口方法介绍main(){ print('hello world');}// void 表示 main 方法没有返回值void main(){ print('hello world');}2. Dart 变量Dart 可以不预先定义变量类型，会自动推断类型Dart 中定义变量可以通过 var 关键字，也可以通过类型来申明变量// 错误，不可改变类型void main() {原创 2021-11-12 14:47:47 · 283 阅读 · 0 评论 -
three.js 透视投影相机 PerspectiveCamera 自适应渲染
// 窗口事件// onresize 事件会在窗口被调整大小时发生window.onresize = function () { // 重置渲染器输出画布canvas尺寸 renderer.setSize(window.innerWidth, window.innerHeight); // 全屏情况下：设置观察范围长宽比aspect为窗口宽高比 camera.aspect = window.innerWidth / window.innerHeight; // 渲原创 2021-09-29 10:40:14 · 387 阅读 · 0 评论 -
three.js 设置雾化效果（Fog）
这个类中的参数定义了线性雾。也就是说，雾的密度是随着距离线性增大的。构造器Fog( color : Integer, near : Float, far : Float )颜色参数传入Color构造函数中，来设置颜色属性。颜色可以是一个十六进制的整型数，或者是CSS风格的字符串。属性.name : String对象的名称，可选、不必唯一。默认值是一个空字符串。.color : Color雾的颜色。比如说，如果将其设置为黑色，远处的物体将被渲染成黑色。.near : Float开始应用雾的原创 2021-09-27 21:30:21 · 2296 阅读 · 0 评论 -
批量修改 gltf 材质
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>th原创 2021-09-27 21:18:37 · 937 阅读 · 0 评论 -
解决 three.js 模型颜色偏差问题
纹理纹理中包含的颜色信息（.map, .emissiveMap, 和 .specularMap）在glTF中总是使用sRGB颜色空间，而顶点颜色和材质属性（.color, .emissive, .specular） 则使用线性颜色空间。在典型的渲染工作流程中，纹理会被渲染器转换为线性颜色空间，进行光照计算，然后最终输出会被转换回 sRGB 颜色空间并显示在屏幕上。除非你需要使用线性颜色空间进行后期处理，否则请在使用glTF的时候将WebGLRenderer进行如下配置：renderer.outputEn原创 2021-09-27 20:57:39 · 8940 阅读 · 1 评论 -
加载 gltf 模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>th原创 2021-09-26 16:08:48 · 1763 阅读 · 1 评论 -
three.js 起步
three.js 下载特定版本：https://github.com/mrdoob/three.js/releases<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi原创 2021-09-23 16:34:31 · 352 阅读 · 0 评论 -
Vue --天气应用
自定义参数可以让代码的复用性更高methods 中定义的方法内部，可以通过 this 关键字点出其他的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-U.原创 2021-08-29 12:28:24 · 396 阅读 · 0 评论 -
Vue -- axios+Vue
axios 回调函数中的 this 已经改变，无法访问到 data 中数据把 this 保存起来，回调函数中直接使用保存的 this 即可和本地应用的最大区别就是改变了数据来源<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <.原创 2021-08-29 11:56:29 · 169 阅读 · 0 评论 -
axios 基本使用
axios 必须先导入才可以使用使用 get 或 post 方法即可发送对应的请求then 方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容，或错误信息使用 cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>语法格式：axios.get(地址 ? key = value & key2 = value2).then(function (respo.原创 2021-08-29 10:41:55 · 196 阅读 · 0 评论 -
Vue -- 记事本应用
列表结构可以通过 v-for 指令结合数据生成v-on 结合事件修饰符可以对事件进行限制，比如 .enterv-on 在绑定事件时可以传递自定义参数通过 v-model 可以快速的设置和获取表单元素的值基于数据的开发方式<html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>小黑记事本</title>.原创 2021-08-29 09:49:51 · 163 阅读 · 0 评论 -
Vue -- v-model指令
v-model指令的作用是便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联绑定的数据和表单元素的值是双向绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content.原创 2021-08-28 17:18:24 · 137 阅读 · 0 评论 -
Vue -- v-on指令
v-on使用文档事件绑定的方法写成函数调用的形式，可以传入自定义参数定义方法时需要定义形参来接收传入的实参事件的后面跟上 .修饰符 可以对事件进行限制.enter 可以限制触发的按键为回车事件修饰符有多种<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=原创 2021-08-16 18:49:45 · 129 阅读 · 0 评论 -
Vue -- v-for指令
v-for 指令的作用是：根据数据生成列表结构数组经常和 v-for 结合使用语法是 (item,index) in 数据item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=".原创 2021-08-16 18:06:56 · 350 阅读 · 0 评论 -
Vue -- 图片切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-08-15 17:08:07 · 223 阅读 · 0 评论 -
Vue -- v-bind 指令
v-bind 指令的作用是：为元素绑定属性完整写法是 v-bind:属性名简写的话可以直接省略 v-bind，只保留 :属性名需要动态的增删 class 建议使用对象的方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <.原创 2021-08-15 15:55:24 · 169 阅读 · 0 评论 -
Vue -- v-if
v-if 指令的作用是：根据表达式的真假切换元素的显示状态本质是通过操纵 DOM 元素来切换显示状态表达式的值为 true，元素存在于 DOM 树中，为 false，从 DOM 树中移除频繁的切换用 v-show，反之使用 v-if，前者的切换消耗小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com.原创 2021-08-15 12:04:03 · 156 阅读 · 0 评论 -
Vue -- v-show 指令
v-show 指令的作用是：根据真假切换元素的显示状态原理是修改元素的 display，实现显示隐藏指令后面的内容，最终都会解析为布尔值值为 true 元素显示，值为 false 元素隐藏数据改变之后，对应元素的显示状态会同步更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" .原创 2021-08-14 16:42:49 · 562 阅读 · 0 评论 -
Vue - 计数器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-08-14 16:18:54 · 142 阅读 · 0 评论 -
CSS 开发注意点
1. CSS 属性书写顺序2. 页面布局整体思路3. 导航栏开发注意点原创 2021-07-08 11:02:16 · 70 阅读 · 0 评论 -
微信小程序 image 组件保持图片原宽高比不变
<!--pages/XX/XX.wxml--><view> <!-- mode="widthFix" 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 --> <image mode="widthFix" class="imgView" src="/images/XX.jpg"></image></view>/* pages/XX/XX.wxss */.imgView{ width: 650rpx;原创 2021-05-21 11:23:44 · 1167 阅读 · 0 评论 -
JavaScript学习笔记---Set
1. 简介ECMAScript 6 新增的 Set 是一种新集合类型，为这门语言带来集合数据结构。Set 在很多方面都像是加强的 Map，这是因为它们的大多数 API 和行为都是共有的。2. 基本 API使用 new 关键字和 Set 构造函数可以创建一个空集合：const m = new Set(); // 使用数组初始化集合const s1 = new Set(["val1", "val2", "val3"]); alert(s1.size); // 3初始化之后，可以使用 add(原创 2021-05-20 21:27:35 · 164 阅读 · 0 评论 -
延迟执行 wx.showToast 接口调用成功的回调函数
wx.showToast({ title: '重置邮件已发送至邮箱，请稍后', icon: 'none', duration: 3000, success: function () { setTimeout(function () { //要延时执行的代码 wx.reLaunch({ url: '/pages/login/login' })原创 2021-05-19 17:26:09 · 3863 阅读 · 2 评论 -
前端进阶之路（一）HTML
前端进阶之路（一）HTML1. HTML标签分类 2. HTML标签关系 3. 字符集4. HTML标签5. 路径 6. 列表标签7. 表格8. 表单9. HTML5 新标签10. 参考手册原创 2019-07-09 16:32:36 · 1509 阅读 · 0 评论 -
微信小程序 template 的使用
编辑 template 中的 wxml 代码：<!-- 模板 --><template name="listTem"> <view class="list"> <view class="img"> <image src="/images/idCard.png"></image> </view> <view class="name"> <view>原创 2021-04-03 11:11:44 · 650 阅读 · 0 评论 -
js 获取当前日期
// 获取当前日期时间var myDate = new Date();myDate.toLocaleDateString(); //获取当前日期var mytime=myDate.toLocaleTimeString(); //获取当前时间myDate.toLocaleString( ); //获取日期与时间在微信小程序开发中，在电脑端测试时输出的日期格式为中文，但是在手机端测试的时候输出的日期格式为英文。解决方法：/原创 2021-04-03 10:58:51 · 1057 阅读 · 0 评论 -
微信小程序里 wx:if 与 hidden 区别
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。微信小程序里 wx:if 与 hidden 区别原创 2021-04-01 18:01:25 · 158 阅读 · 0 评论 -
解决 wx.switchTab 路径跳转不能携带参数
wx.switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。注意：路径后不能带参数。要解决跳转到 tabBar 页面携带参数的问题，可以使用全局变量的方法。首先在 app.js 中定义全局变量：App({ globalData: { id: '' }, /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { }, /** * 当小程序原创 2021-04-01 15:38:15 · 1248 阅读 · 0 评论 -
微信小程序中按钮样式无法设置解决方法
方法一：样式中加入!important，即：width: 100% !important;方法二：标签内，使用style，即<button class="login-btn" bindclick="login" style="width:100%">登录</button>方法三：删除app.json的配置"style": "v2"（不推荐）微信小程序的button按钮设置宽度无效...原创 2021-04-01 14:04:07 · 705 阅读 · 0 评论 -
felx 布局实现居中对齐
<view class="container"> <view class="top"> <view class="text">签到/view> </view> <view class="bottom"> <view class="text">签退</view> </view></view>.container { display: flex; fle原创 2021-04-01 13:57:39 · 249 阅读 · 0 评论 -
Vue 本地应用
Vue 本地应用目录1. v-text 指令2. v-html 指令3. v-on 指令1. v-text 指令v-text 指令的作用时：设置标签的内容（textContent）默认写法会替换全部内容，使用差值表达式 {{}} 可以替换指定内容内部支持写表达式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor原创 2021-01-05 17:50:35 · 158 阅读 · 0 评论 -
Vue 基础
1. Vue 官方文档Vue 官方文档链接2. 第一个 Vue 程序导入开发版本的 Vue.js创建 Vue 实例对象，设置 el 属性和 data 属性使用简介的模板语法把数据渲染到页面上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini原创 2021-01-05 15:54:35 · 136 阅读 · 0 评论 -
Emmet 语法快速生成HTML结构语法
生成标签，直接输入标签名，按 tab 键即可，比如 div 然后按 tab 键，就可以生成 <div></div>如果想要生成多个相同标签，加上 * 就可以，比如 div*3 就可以快速生成三个 <div></div>如果有父子级关系的标签，可以用 >，比如 ul>li如果有兄弟关系的标签，用 + 就可以了，比如 div+p如果生成带有类名或者 id 名字的，直接写类名或者 id 名就可以，这里默认为 div，比如 #two 或者 .de.原创 2020-12-30 21:07:05 · 166 阅读 · 0 评论 -
DOCTYPE和lang以及字符集的作用
1. <!DOCTYPE html><!DOCTYPE html>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPE html>这句代码的意思是：当前页面采取的是HTML5版本来显示网页。注意：<!DOCTYPE html> 声明位于文档中的最前面的位置，处于 <html> 标签之前。<!DOCTYPE html> 不是一个 HTML 标签，他就是文档类型声明标签。2. lan原创 2020-12-29 20:37:04 · 166 阅读 · 0 评论