javascript
文章平均质量分 64
camellias_
这个作者很懒,什么都没留下…
展开
-
小程序(二十六)微信小程序解析富文本的几种方式
微信小程序解析富文本html大概有两种方式(我发现的)。两种方法,各有各的优缺点。一:使用小程序内置标签rich-text这个标签解析的富文本会保留你在pc端编辑的样式,也就是说,你在pc端编辑的是什么样子,小程序端显示的也是什么样子。示例:Html<view class="container"> <view class="page-body"> <view class="page-section"> <view class="p原创 2022-01-13 16:55:18 · 11857 阅读 · 0 评论 -
小程序(二十五)微信小程序富文本编辑器editor上传图片
官方给出的示例代码中图片上传功能是将图片上传至小程序的缓存中,代码如下所示: insertImage(e) { console.log(e); const that = this wx.chooseImage({ count: 1, success: function (res) { console.log(res); that.editorCtx.insertImage({ src: res.tempF原创 2021-09-26 16:59:16 · 2154 阅读 · 0 评论 -
小程序(二十三)微信小程序左上角返回按钮触发事件
微信并没有为我们提供左上角返回上一页触发的事件。但是有的时候这个操作我们还是需要监听一下。下图红框标注的返回上一页按钮。最后实现的效果:点击返回上一页的时候,我需要重新加载上一页的数据:返回上一页按钮只会触发上一页的onShow生命周期函数,并不会触发onLoad函数。因此我们需要在onShow函数中做一些设置:大概是操作流程,从日程页跳转至实验列表页,再点击实验列表页 左上角的返回键,返回日程页重新获取页面数据。我这里直接上代码:实验列表页代码:onShow: function ()原创 2021-08-04 16:23:54 · 12193 阅读 · 6 评论 -
VUE3(三十一)html单页面使用VUE3
之前一直在VUE3的框架中使用VUE3。但是我们在做一个小页面的时候,没有必要独立创建一个VUE项目的时候,我们该如何使用VUE3呢?下边我这边直接放出一个示例,复制粘贴就能用这里我使用了VUE3+element-plus<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten原创 2021-07-26 09:39:21 · 8466 阅读 · 2 评论 -
Typescript(十三)泛型
泛型:[generic - 通用、泛指的意思],那最简单的理解,泛型就是泛指的类型。一:函数中的泛型1:定义一个泛型方法// 泛型function query<T>(param:T){ console.log(typeof param); console.log(param);}query<string>('sucess');// 输出:// string// sucess从上边的代码我们就可以看出,其实泛型这个很容易理解,就是我们在调用方法的原创 2021-05-24 08:54:45 · 523 阅读 · 0 评论 -
Typescript(十二)Enum 枚举类型
Typescript中的枚举(enum)可以参考C#中的枚举(enum)类型,毕竟都是微软开发的语言。枚举这个数据类型在原生javascript中是没有的。在编译成js之后其实就是一个键值对形式存储的对象。像官网介绍的,枚举是对 js 标准数据类型的补充,声明一组带名字的常量;一:数字枚举数字枚举,声明了一个枚举成员均不带初始化器的枚举,该枚举的成员值从 0 开始,依次递增(+1)// 定义一个数字枚举enum enumConst{ up = 1, down, left原创 2021-05-20 09:06:17 · 666 阅读 · 0 评论 -
Typescript(十一)联合类型和类型守护
联合类型:通俗点说就是一个变量可能有多种类型。比如:一个人(person)有可能是老师(teacher),也有可能是服务员(waiter),但是不可能同时是老师和服务员。interface teacher{ type:string; say:()=>{};} interface waiter{ type:string; run:()=>{};}// 调用function person(animal: waiter | teacher) {}an原创 2021-05-19 09:26:33 · 184 阅读 · 0 评论 -
Typescript(十)compilerOptions 配置项
1:removeComments 属性removeComments是complerOptions里的一个子属性,它的用处是告诉TypeScript对编译出来的js文件是否显示注释(注解)。比如我们现在把removeComments的值设置为true,就是在js中不显示注释。我们把上节课文件没有的Demo2.ts和生成的 JS 文件都删除掉,只留Demo.ts文件,然后再Demo.ts文件里,加入一个注释。// I‘m xhconst person: string = "xh";写完注释后,直接再原创 2021-05-18 16:57:43 · 3030 阅读 · 0 评论 -
Typescript(九)配置文件 tsconfig.json
TypeScript 使用 tsconfig.json 文件作为其配置文件,当一个目录中存在 tsconfig.json 文件,则认为该目录为 TypeScript 项目的根目录。通常 tsconfig.json 文件主要包含两部分内容:指定待编译文件和定义编译选项。1:生成 tsconfig.json 文件这个文件是通过tsc --init命令生成的,在桌面上新建一个文件夹TsDemo,然后打开VSCode,把文件托到编辑器中,然后打开终端Terminal,输入tsc --init。输入完成后,就原创 2021-05-14 09:25:41 · 1852 阅读 · 2 评论 -
Typescript(八)类的概念和使用
类是一个功能的集合。一:类的定义及基本使用1:定义一个类class lady{ content = "你好啊,我是camellia"; say(){ console.log(this.content); }} 2:调用类// 类的使用let camellia = new lady();camellia.say();// 输出:你好啊,我是camellia 二:类的继承1:定义一个girl类继承lady类class girl extend原创 2021-05-13 09:05:21 · 285 阅读 · 2 评论 -
Typescript(七)interface接口
1:接口作为约束与规范我们可以根据需求来定义接口,然后我们再定义类来实现这个接口。接口为一个或多个类提供规范。2:优化程序设计面向对象设计中我们追求的原则之一就是高内聚,低耦合。可是类与类之间往往会有千丝万缕的关系,比如泛化、实现、组合、聚合、关联、依赖。而接口则可以将一个类对另一个类的依赖性降到最低,这就是【接口隔离】以上是面向对象编程中接口的两个主要作用。1:普通定义举个例子:我们计划招聘几个女服务员,要求年龄30以下,身高165以上。正常我们是这样实现的:const normal =原创 2021-05-12 08:52:24 · 340 阅读 · 2 评论 -
Typescript(六)元组的使用和类型约束
TypeScript 中提供了元组的概念,这个概念是JavaScript中没有的。但是不要慌张,其实元组在开发中并不常用,也可能是我的精力还不够。一般只在数据源是CVS这种文件的时候,会使用元组。其实你可以把元组看成数组的一个加强,它可以更好的控制或者说规范里边的类型。1:元组的基本应用我们先来看一个数组和这个数组注解的缺点,比如我们有一个小姐姐数组,数组中有姓名、职业和年龄,代码如下:const xiaojiejie = ["dajiao", "teacher", 28];这时候把鼠标放到xia原创 2021-05-11 14:07:38 · 154 阅读 · 0 评论 -
Typescript(五)数组类型定义
1:一般数组类型的定义现在我们可以定义一个最简单的数组类型,比如就是数字类型,那么就可以这么写:const numberArr = [1, 2, 3];这时候你把鼠标放在numberArr上面可以看出,这个数组的类型就是 number 类型。这是 TypeScript 通过类型推断自己推断出来的。 如果你要显示的注解,也非常简单,可以写成下面的形式。const numberArr: number[] = [1, 2, 3];同样道理,如果你的数组各项是字符串,你就可以写成这样。const s原创 2021-05-10 09:49:43 · 2132 阅读 · 0 评论 -
Typescript(四)函数参数和返回类型的注解
Typescript其实我觉得就是强语法类型的javascript。当然,他也不彻底算是一种强类型的语言,他有类型推断这个功能。我们在开发过程中,最好是给其都显式的声明类型,增加代码的一个健壮性,有规矩才成方圆。我们在定义函数的时候,也是需要制定输入参数及返回值的类型的。1:简单类型定义/** * 简单类型定义 */function getTotal(one:number,two:number):number{ return one + two;}console.log(get原创 2021-05-08 15:03:07 · 696 阅读 · 2 评论 -
Typescript(三)类型注解和类型推断
1:type annotation 类型注解就是在声明变量的时候,显式的声明他的类型let count: number;count = 123;这段代码就是类型注解,意思是显示的告诉代码,我们的count变量就是一个数字类型,这就叫做类型注解。是不是一下就明白了,其实程序这东西就这么简单,真正复杂的是人。2:type inferrence 类型推断let countInference = 123;这时候我并没有显示的告诉你变量countInference是一个数字类型,但是如果你把鼠标放到原创 2021-05-07 08:56:22 · 299 阅读 · 0 评论 -
Typescript(二)静态类型
静态类型:就是你一旦定义了,就不可以再改变他的类型了。一:定义静态类型1:定义let count:number = 1;2:赋值count = "str"; // 这样写会报错,count只能接受number类型的数据count = 55; // 这个样子写是没有问题的3:使用对应类型的方法你讲变量定义成了何种类型,那么这个变量对应就可以使用其类型对应的方法console.log(typeof count.toString());二:自定义静态类型你还可以自己去定义一个静态类型原创 2021-05-06 17:41:36 · 249 阅读 · 1 评论 -
Typescript(一)简单的介绍及安装
TypeScript 是由微软公司在 2012 年正式发布,现在也有 8 年的不断更新和维护了,TypeScript 的成长速度是非常快的,现在已经变成了前端必会的一门技能。TypeScript 其实就是 JavaScript 的超集,也就是说 TypeScript 是建立在 JavaScript 之上的,最后都会转变成 JavaScript。一:编辑器我这里推荐使用微软的vscode编辑器,目前,无论是开发PHP,前端,python基本上都是在使用这款编辑器。主要是他同时支持windows,lin原创 2021-04-28 08:45:02 · 576 阅读 · 0 评论 -
VUE3(三十)自定义抽屉组件Drawer
我这里计划做一个即时聊天的小功能,计划是在一个抽屉组件中实现这个功能。但是最后能不能成功我也不知道,毕竟我没做过,但是抽屉组件可以提前做一个嘛,这个不是很难。代码:Drawer.vue:<template> <div class="drawer"> <!-- 遮罩层 --> <div class="mask-show" v-if="drawerShow" @click="close()" ></div> <原创 2021-04-26 09:10:09 · 4020 阅读 · 0 评论 -
VUE3(二十九)自定义点击图片显示大图bigImg组件
上一篇中介绍了如何使用onclick为动态添加的dom元素绑定事件。我现在就可以自定义大图组件了。为ueditor编辑的html添加onclick这个步骤,我是在后端做的,后端返回到前端的值,就是已经拼装好的html。最后效果如下图所示:代码:BigImg.vue<template> <!-- 过渡动画 --> <div name="fade"> <div class="img-view" @click="bigImg"&g原创 2021-04-25 10:01:24 · 965 阅读 · 0 评论 -
VUE3(二十八)页面加载完成后,使用onclick为动态添加的dom元素绑定点击事件
博客做的比较早,那个时候还不知道有markdown编辑器这个玩意。所以我的文章都是用ueditor编辑的。我这里大概想做一个大图的自定义组件:需求是,点击文章中的图片,显示大图。那么这里就有一个问题,我怎么在页面加载完成之后给html绑定事件呢?Jquery有$.on方法,但是,我不想再vue里边使用jquery。哎呀,迷糊了,原生javascript有onclick呀。上代码:1:要有一段在页面加载完成之后添加的html代码let conten=`<button οnclick="c原创 2021-04-23 08:52:36 · 2672 阅读 · 1 评论 -
VUE3(二十五)自定义Modal对话框组件
接着自定义组件,这里是我自定义的一个modal对话框组件。效果如下图所示:Modal.vue<template> <div class="modal-backdrop" v-if="modalShow"> <div class="modal" > <div class="modal-header"> <div><h3>{{title}}</h3></div>原创 2021-04-20 08:46:06 · 1693 阅读 · 2 评论 -
VUE3(二十)VUE自定义指令v-preventReClick,防止多次点击,重复请求
VUE不仅为我们提供了自定义组件,还提供了自定义指令。当然,这个玩意我在VUE2中是没有用到过的。VUE3中我大概试一下这个自定义指令:官方文档:https://vue3js.cn/docs/zh/guide/custom-directive.html#动态指令参数一:注册全局指令在main.ts中加入如下配置:// =======================================================// 注册一个全局自定义指令 `v-focus`app.direc原创 2021-03-29 10:11:36 · 2337 阅读 · 0 评论 -
VUE3(十九)服务端开启gzip加速网站打开速度
一:压缩的好处压缩可以减小HTTP回复的大小,从而降低web服务器的响应时间。gzip是web服务器广泛使用的压缩工具,可以将HTTP回复的大小降低到原来的50%~30%。既提高了网页的加载速度,又可以节约服务器流量。二:Nginx服务器启用Gzip压缩的方法打开nginx.conf文件,将一下的代码粘贴到文件中:#开启gzip功能gzip on; #开启gzip静态压缩功能gzip_static on; #gzip缓存大小gzip_buffers 4 16k;#gzip http版本原创 2021-03-27 14:36:02 · 350 阅读 · 0 评论 -
VUE3(十八)vue 路由history 模式去掉 URL 中的 # (nginx)
这部分内容比较少。其实更多的是参考一下vue-router4的官方文档就好。但是,这部分还是拿出来说一下。1:router.ts// 官方文档:https://vue3js.cn/router4/guide/#html// 引入vue-router对象import { createRouter, createWebHistory, createWebHashHistory, ErrorHandler } from "vue-router";/** * 定义路由数组 */const rout原创 2021-03-25 17:42:12 · 2371 阅读 · 0 评论 -
VUE3(十七)使用reactive ref 替代VUEX状态管理
之前在使用VUE2的时候有用到VUEX状态管理系统。我用的比较多的地方是子父组件传值,或者爷孙组件传值。就是共享状态。VUEX在我这里的作用主要还是为了简化组件中的代码的复杂度。所用的值使用VUEX统一管理,对后期的维护以及扩展性都有很大的帮助。Vuex为我们提供了大概以下几个功能: 集中式存储管理应用的「所有组件」的「状态」 保证状态以「可预测」的方式「发生变化」 与调试工具集成,提供功能:time-travel、状态快照导入导出共享状态必须符合两个条件:响应式:当状原创 2021-03-19 09:56:28 · 1687 阅读 · 0 评论 -
VUE3(十六)封装axios
一:axios 基础从浏览器中创建XMLHttpRequest从node.js发出http请求支持Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止CSRF/XSRF二:axios封装关于Axios的封装这部分涉及到与后端的一些约定。什么约定呢?就是在我们请求接口的时候,后端会返回给我们一个code。在我开发的时候,一般约定code:-200为登录失效状态code:-100为接口发生错误状态。(为了避免服务器端接口报错导致前端无法运行原创 2021-03-18 17:09:53 · 9234 阅读 · 4 评论 -
VUE3(十二)provide和inject函数
父传更深的后代一般往深度层级传递值,有这两种方式:· provide / inject· vuexprovide / inject一看到“深”这个字,大家肯定第一想到的就Vue2中的provide / inject选项。没错,这套逻辑在vue3中同样适用,这两个选项变成了两个方法。provide允许我们向当前组件的所有后代组件,传递一份数据,所有后代组件能够通过inject这个方法来决定是否接受这份数据。大致的示意图如下:实际应用场景主要应用的场景有两中,一种深度传递原创 2021-03-10 10:23:58 · 1205 阅读 · 0 评论 -
VUE3(十一)自定义组件子父传值
在创建项目的时候,官方给出的页面,其实就给出了一个自定义的组件helloworld,里边包含了父传子传值,VUEX的使用,计算属性computed使用,方法的定义以及自定义组件的使用。计算属性computed和方法的定义,这里使用的并不是VUE3的新语法。在《VUE3(八)setup与ref函数》这篇中,setup的第二个参数context对象为我们提供了可触发事件emit,我们可以利用emit将子组件中的值传递给父组件。我这里仍旧使用上一篇中使用的项目来做测试,多说一句,使用VITE来搭建的项目其实原创 2021-03-08 14:21:40 · 851 阅读 · 0 评论 -
VUE3(八)setup与ref函数
Setup是VUE3.0中为我们新提供的的组件选项。创建组件实例,然后初始化props,紧接着就调用setup函数,从生命周期钩子的视角来看,他在beforecreate之前调用。setup()是函数,具有return,return函数中定义的变量,把其暴露给模板。一:setup1:Setup可以替代VUE2中的data和method函数。(1):使用VITE创建一个空项目,默认会给我们一个helloworld组件,我们使用这个组件做测试。项目搭建,请移步《VUE3(一)安装+使用vite创建一原创 2021-03-01 09:25:51 · 4665 阅读 · 0 评论 -
VUE3(三)项目配置插件支持
上一篇中我们创建了项目并成功运行。这里为我的项目添加依赖,我这里使用的是yarn。1:安装vue-routeryarn add vue-router@next2:安装vuexyarn add vuex@@next3:安装组件库Ant Design Vueyarn add ant-design-vue@next4:安装typescriptyarn add -D typescript使用 TypeScriptmain.js 重命名为 main.tsindex.html 里把 /s原创 2021-02-18 13:48:33 · 469 阅读 · 4 评论 -
小程序(二十二)子组件调用父组件方法,父组件调用子组件方法
制作了一个自定义组件,底部弹出菜单。显示这个菜单的时候,首先,父组件需要调用子组件的方法,显示子组件。点击子组件的菜单,需要调用父组件的方法进行逻辑处理。1:组件代码如下:popup.wxml<!--components/popup/popup.wxml--><view class="half-screen"> <!--屏幕背景变暗的背景 --> <view class="background_screen" bindtap="hideModa原创 2020-12-11 16:13:01 · 1816 阅读 · 1 评论 -
小程序(二十一)小程序登录获取openid和unionid
在微信小程序中,因为各种各样的原因我们会需要获取到用户的openid或者unionid下面就简单来讲一下在小程序中如何获取openid和unionid。步骤一:微信登录获取登录凭证wx.login({ success: res => { // 微信临时登录凭证 let _code = res.code; // 进行网络访问,将 _code 提交给服务端,服务端返回 openid 和 unionid, // 服务端对 _code 的处理机制参照 步骤二 .原创 2020-10-28 18:07:30 · 1304 阅读 · 0 评论 -
小程序(二十)小程序转发
微信小程序默认是没有转发和分享功能的。这个要注意。我之前一直给其他人分享的时候一直都是用的二维码,那天突然想起来,这个玩意应该有转发的功能吧。试了一下,我还真没有。这里大概记录一下转发的代码:转发的函数,其实在创建文件的时候(用微信开发者工具创建)已经生成好了。代码如下:/** * 用户点击右上角分享 */ onShareAppMessage: function (options) {var self = this;// 获取当前页面链接 var pages = get原创 2020-10-27 16:02:35 · 653 阅读 · 0 评论 -
小程序(十九)utils文件的使用
想封装一些公共函数文件,这个其实放到哪里都可以,app.js等等但是,本着专用的原则,我们还是使用小程序为我们提供的公共代码的存放模块utils/utils.js,当然,你还可以在这个目录下边新建其他的文件,但是用法大同小异。首先要注意一个问题,utils是一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。所以当你在util.js里封装的方法想要在外部使用的话,必须通过 module.exports 或者 exports 对外暴露module.expor原创 2020-10-23 16:11:03 · 6130 阅读 · 0 评论 -
小程序(十八)小程序维护登录态
现阶段小程序系列的最后一篇。我们来看下小程序十如何维护登录态的,这个玩意,早应该说了,但是,直到我小程序做成现在这个状态,我也没有用到微信官方所说的使用sessionkey维护的登录态,所以,这个最后来看一下。一:何为登录态?所谓登录态,就是程序在运行时,能够识别当前用户,能够证明自己的唯一性且合法。我们知道,WEB服务器通过浏览器携带的cookie获取session来判断是否是同一用户(或浏览器);Restful服务通过客户端传过来唯一ID,来识别调用用户。放一张从网上下载的图片:二:使用s原创 2020-10-22 13:46:11 · 483 阅读 · 0 评论 -
小程序(十七)小程序监听返回键跳转事件(安卓返回也适用)
做用户信息授权的时候,我是通过调授权页面,让用户点击授权按钮来实现用户授权。但是,小程序有自带返回键,还有安卓手机自带返回键。这个当初做的时候没有想到,天真了。解决方案是使用onUnload 监听页面卸载之后发生的事情onUnload:function(){ wx.redirectTo({ url: '../index/index' }) wx.navigateTo({ url: '../index/index' }) wx.switch原创 2020-10-21 15:55:24 · 5051 阅读 · 0 评论 -
小程序(十六)小程序仿微信聊天页面及功能
后期打算在小程序中添加即时聊天的功能,但是目前这个还没有考虑好以一种什么样的形势去实现,先接入一个腾讯AI提供的免费闲聊接口。先做一个大概的页面及功能。腾讯AI地址:https://ai.qq.com/doc/nlpchat.shtml#基础闲聊接口有兴趣,可以试一试,当然,这种免费且不限次数的机器人肯定不会太聪明,期望值别太高。我这里实现的效果是,可以发文字,表情,图片以及语音,,当然如果你还想要更多的功能,就需要自己去拓展了。最后的效果:其余的就不多介绍了,感兴趣的同学可以自行研究下代码:原创 2020-10-13 14:50:43 · 5257 阅读 · 10 评论 -
小程序(十五)小程序回到顶部
程序回到顶部的原理和web网站的原理是一样的,都是通过滚动条的位置来判断。关于web网站的回到顶部设置,请移步《JavaScript实现网页带动画返回顶部》废话不多说,直接上代码:Index.wxml<image wx:if="{{visual}}" src="/images/timg.png" class="go_top" bindtap="scrollToTop" />这个就一行代码,放哪都行。Index.wxss.go_top{ position: fixed; b原创 2020-10-12 11:15:50 · 234 阅读 · 0 评论 -
小程序(十四)小程序自定义弹窗组件
上一篇中说的是小程序自带的弹窗组件,今天,我们来试试小程序的自定义组件,我们自定义一个带确定取消的弹窗组件。首先,放一下,最终的效果图:这是我们最后要实现的效果:那么,首先,我们创建一个组件:新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wxss、wxml、json、js,如图剩下的,就是不废话了,上代码:一:编写组件代码:Dialog.wx原创 2020-10-10 14:36:05 · 2951 阅读 · 1 评论 -
小程序(十三)小程序弹窗wx.showToast及wx.showModal
我这版的小程序中,没有使用到确定取消那样的弹窗,基本上用到的就是,加载中,成功或者失败那种消息提示类的弹窗。微信本身给我们提供了一个这样的弹窗wx.showToast(Object object),挺好用的,我也没有再去折腾第三方组件的消息提醒弹窗。Object object这些事官方给出的参数。注意,icon设置为none的时候,就是没有图标纯文字的状态,这个就很好了。这个玩意既能有图标,又能没有图标,百变小能手啊。注意一下,自定义显示图标不能是动图,他这是只加载图片的第一帧,所以,动图是原创 2020-10-09 11:56:31 · 1329 阅读 · 0 评论