javascript技巧

微信小程序web-view环境下H5跳转小程序页面方法实例代码

2022-08-21
目录 引言 1.在H5页面引入JSSDK 2.跳转至小程序页面方法 总结 引言 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转.但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了.那么这个问题应该如何解决呢? 1.在H5页面引入JSSDK 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执行微信小程序的部分API命令.H5页面引入JSSDK的代码如下所示. <script src="

ThreeJS从创建场景到使用功能实例详解

2022-08-21
目录 前言 创建场景以及相机 创建一个平面 添加图片 创建线 添加轴线 缩放.定位.以及旋转 添加文字 正交摄像机和透视摄像机的区别 总结 前言 最近公司要做一个2.5D插件,然后自己学旋转角度不太好,然后就使用了THREEJS, 用起来还是比较繁琐的,整体支持不太好,整体都是自己研究,看到写的不好地方勿怪 创建场景以及相机 首先,要创建一个场景,以及一个相机(相机分为透视相机和正交摄像机,区别在后面会解释),代码如下 export default class ThreeComponent ex

微信小程序uploadFile接口实现文件上传

2022-08-21
目录 写在前面 创建前端页面 写入js事件-完成上传操作 配置后端php接口文件 实现上传功能 完善上传功能 写在前面 上节中我们讲到小程序的request请求,掌握了基本的网络请求方式,这节我们通过小程序的uploadFile接口能力完成对小程序上传操作(uni.uploadFile,后端php接口),通过这一节你可以学习到php的上传接口的写法,以及如何配合前端完成一个小程序上传操作 创建前端页面 我们默认使用创建新项目进行讲解,在index.vue最上方写入代码 <template> &

uniapp微信小程序获取当前定位城市信息的实例代码

2022-08-20
目录 一.事先准备 二.正式代码使用 补充:UNIAPP获取当前城市和坐标 总结 一.事先准备 此处用的是腾讯地图的jdk 1.在腾讯地图开发上申请key 2. WebServiceAPI选择签名校验获取SK 3. uniapp上勾选位置接口 4.在腾讯地图上下载微信小程序javaScript SDK放入项目里 二.正式代码使用 提示:可能会出现引入jdk时报错 解决方法: *把jdk最后一行暴漏方式改为export default 引入时用import就行了* // 1.首先在需要用到的地方引

Web&nbsp;js实现复制文本到粘贴板

2022-08-20
本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一.简述 记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果 三.代码 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>js复制内容到粘贴板</title>     <script type="text/j

在微信小程序中使用iconfont的最新图文教程

2022-08-19
目录 一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他 总结 一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 2.将挑选的图标添加到自定义的项目中 3.选择生成font class的代码 4.点击链接进入代码并复制全部 二.在微信小程序中使用iconfont 1.在项目下创建style文件夹,并建立所需要的wxss文件 然后在wxss文件中将在iconfont上生成的css代码全部复制进去 2.在app.wxss内引用 3.使用ico

三分钟带你快速学会微信小程序的条件渲染

2022-08-19
目录 前言 1.wx:if实现条件渲染 2.block结合wx:if使用 3.hiden实现条件渲染 4. wx:if vs hidden 补充:hidden 和 wx:if 的区别 总结 前言 这篇文章是三分钟学会小程序的条件渲染教程,所谓的条件渲染就是判断是否需要把代码渲染到展示页面上.使用以下三种方式可以实现条件渲染,各自有不同的应用场景,只有熟练掌握其用法,在使用时才能得心应手. 1.wx:if实现条件渲染 在框架中,使用 wx:if="" 来判断是否需要渲染该代码块: <

利用JavaScript实现仿QQ个人资料卡效果

2022-08-19
目录 前言 思路 实现代码 HTML CSS 背景音乐 JavaScript 最终效果 前言 最近在学习前端的知识,无意间发现QQ 那个个人资料卡还挺好看的,就想着自己能不能照着原版搞出一个高仿出来,话不多时直接开始先睡上一觉,找找灵感,睡醒来又饿了,出去吃个饭,回来天tm都黑了,哈哈哈哈,金今天又是摆烂的一天,啊啊啊,不行至少今天这篇博客得写个前言部分…于是乎我们来到第二天,开始干(要干啥来着,幸亏昨天还写了个标题,要不然都忘了——HTML+CSS+JS实现仿QQ个人资料卡) 不多逼逼直接上干

微信小程序长按识别二维码的几种情况分析

2022-08-19
目录 一.image标签 + show-menu-by-longpress=“{{true}}” 二.wx.previewImage 三. web-view 支持长按识别的码 补充:扫码中有几个可配置的参数注意下 总结 小程序中的图片已支持长按识别了,总结一下几种情况下: 一.image标签 + show-menu-by-longpress=“{{true}}” <image src="{{qrcode}}" mode="widthFix" show-menu

ES6中Set和Map数据结构的简单讲解

2022-08-19
目录 Set Map 总结 Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 上面代码通过add()方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的

解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

2022-08-18
目录 问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移 解决思路: 设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起

Rxjs 中处理错误和抓取错误的代码案例

2022-08-18
目录 场景 使用 try-catch 订阅中谁抓取错误 使用 Rxjs 的操作符 catchError throwError EMPTY 总结 使用 Rxjs,对于初学者来说,当我们处理 observables 错误的时候容易疑惑,因为我们会考虑使用 try-catch 方式捕获.但是,Rxjs 是通过操作符来管理错误. 我们通过代码案例一步步来了解.案例是使用 angular httpClient 模块来讲解,当然这适用于任何数据流. 场景 我们的应用中使用了一个服务,用来获取啤酒列表数据,然

微信小程序生命周期和WXS使用实例详解

2022-08-18
目录 引言 生命周期 生命周期分类 生命周期函数 生命周期函数分类 WXS wxs 和 JavaScript 的关系* 内嵌 wxs 脚本 外联 wxs 脚本 WXS特点 总结 引言 经过web前端开发的学习,相信大家对于前端开发有了一定深入的了解,今天我开设了微信小程序专栏,主要想从移动端开发方向进一步发展,而对于我来说写移动端博文的第一站就是小程序开发,希望看到我文章的朋友能对你有所帮助. 生命周期 生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段,强调的是一个

three.js中正交与透视投影相机的实战应用指南

2022-08-18
目录 前言 1 正交投影相机 2 投射投影相机 3 实例 总结 前言 一个场景之所以会呈现在我们眼前是因为我们具有眼睛,眼睛提供了视觉.换句话说,如果three.js场景中没有这双眼睛,就像电影没有摄像机一样,场景就无法呈现在我们面前?这双眼睛就是相机,可见相机是Three.js场景中不可或缺的一个组件.Three.js库提供了两种不同的相机:正交投影相机和透视投影相机,接下来分别讲解这两种相机以及结合实例的应用. 1 正交投影相机 我们先来看一张示意图: 由图可知正交透视相机总共有6个面,其具

JSON.stringify(递归)与 JSON.parse(有限状态自动机)的实现代码

2022-08-17
JSON 的 stringify 和 parse 两个方法在平时的工作中也很常用,如果没有一些特殊的类型,是实现数据深拷贝的一个原生方式. 下面就这两个方法的一个手动实现思路. JSON.stringify JSON.stringify 方法用于将 JavaScript 值转换为 JSON 字符串.该方法有三个参数: data: 需要转换的数据 replacer:用于转换结果的对象或者数组,可以函数或者数组 space:文本添加缩进.空格和换行符,可以是数字或者字符串,数字的最大值是 10,字符

一文详解JavaScript 如何将 HTML 转成 Markdown

2022-08-17
目录 npm script 参数配置 前言: 本篇带来:在 JavaScript 如何将 HTML 转成 Markdown?先收藏,总有一天要用到!! npm 我们主要是借助 Turndown这个库来实现的 npm 安装 npm i turndown es6 import 引入: import TurndownService from 'turndown' CommonJs require 引入: const TurndownService = require('turndown'); 接下来我

JavaScript本地存储与会话存储的实现介绍

2022-08-16
目录 一.简单介绍 二.localStorage本地存储 三.sessionStorage会话存储 总结 一.简单介绍 本地存储和会话存储的目的,是将所输入的文件存入到浏览器中,在需要的时候,直接调用,但是本地存储和会话存储有着一定的区别,本地存储,在不主动删除的情况下,会一直保留在浏览器中,会话存储是,当前保存的内容,页面刷新还会保留在浏览器中,但是关闭页面在打开时,会发现没有数据了.这是他们两的用处和区别. 二.localStorage本地存储 如下代码 我们先给button一个监听事件,让

JavaScript getter setter金字塔​​​​​​​

2022-08-16
目录 引言 函数 getters setters getter-getters setter-setter iterables promises Observables GetterSetterFunctionValue async iterables operators 引言 英文链接: staltz.com/javascript-… 函数是JavaScript的基石. 它是一种灵活的.抽象的,可作为其他抽象的基础, 如:Promise.Iterables.Observables等. 之前我在

Mock.js的安装与使用教程(摆脱后端同学的束缚)

2022-08-16
目录 前言 Mock概述 mock.js安装 1.创建vue项目 2.项目中安装mock.js和axios 3.安装成功后我们运行项目 Mock规范 Mock的使用 总结 前言 当下采用前后端分离模式开发Web应用已经成为气候,在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们,难道在搭建完页面后只能等待后端的接口么?这样的话我们则完全被后端开发限制住了. 但其实我们只需要同后端同学商议决定好接口返回的数据格式我们就可以并行开发.很多同学则在开发中则会使用定义变量写

TypeScript对于Duck类型和模块命名空间应用

2022-08-16
目录 一.TypeScript 鸭子类型 二.TypeScript 命名空间 三.TypeScript 模块 四.类型脚本声明文件 一.TypeScript 鸭子类型 Duck类型是一种动态类型和多态形式.在这种风格中,对象的有效语义不是通过从特定类继承或实现特定接口来确定的,而是通过“当前方法和属性的集合”来确定的. var object_name = { key1: "value1", // 标量 key2: "value", key3: function()