Midk-优快云博客

原创 uni-app安卓、ios、小程序底部安全区域

uni-app安卓、ios、小程序底部安全区域 padding-bottom: calc(底部距离rpx); padding-bottom: calc(底部距离rpx + constant(safe-area-inset-bottom)); padding-bottom: calc(底部距离rpx + env(safe-area-inset-bottom));

2021-08-04 17:29:54 4360

原创页面v-for中修改item属性值后页面v-if不改变的问题

页面v-for中修改item属性值后页面v-if不改变的问题//在所写的事件函数中最底部添加下面这句话就解决了this.$forceUpdate();//因为数据层次太多，render函数没有自动更新，需手动强制刷新。添加this.$forceUpdate();进行强制渲染，效果实现。...

2021-07-05 17:51:36 568

原创 js十六进制color颜色，改变透明度opacity

js十六进制color颜色，改变透明度opacityfunction getOpacityColor(thisColor, thisOpacity) { var theColor = thisColor.toLowerCase(); //十六进制颜色值的正则表达式 var r = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; // 如果是16进制颜色

2021-07-05 13:53:12 1513

原创 uni-app实现web-view的app端根据安卓ios自定义动态显示导航

uni-app实现web-view的app端根据安卓ios自定义动态显示导航 <template> <view class="content">  <headers v-if="ishow" :title="statisticsPageTitle" :isShowShadow="false" :isShowBank="true"></h

2021-06-30 20:38:52 988

原创 js实现字符串数字金额每隔三位加，逗号

js实现字符串数字金额每隔三位加，逗号let len=金额.length; if(len<=3){return 金额;} let r=len%3; 金额 = r>0?金额.slice(0,r)+","+金额.slice(r,len).match(/\d{3}/g).join(","):金额.slice(r,len).match(/\d{3}/g ).join(",");...

2021-06-25 09:33:46 888 1

原创 uni-app的app端实现长按保存图片，保存二维码

uni-app的app端实现长按保存图片，保存二维码1.先给图片加一个长按事件：@longtab<image @longtap="bankImg" class="bankImgg" :show-menu-by-longpress="true" src="路径" mode=""></image>2.在methods中写如下代码methods: { //长按图片 bankImg(){

2021-06-24 10:44:47 2313

原创 app跳转小程序（可以指定页面传参）

1.先在manifest.json中的APP模块配置share（分享），打上对钩。2.在你需要跳转的方法中写如下代码（注意改id）plus.share.getServices(function(res){ var sweixin = null; for(var i=0;i<res.length;i++){ var t = res[i]; if(t.id == 'weixin'){ sweixin = t;

2021-06-21 15:38:28 1641 1

原创如果在自己程序里集成一个微信qq一样的聊天系统呢？腾讯云即时通讯IM(客户端API【部分】)

腾讯云即时通讯IM客户端APISDK API(Web&小程序)TIM（命名空间）方法create（）let options = { SDKAppID: 0 // 接入时需要将0替换为您的云通信应用的 SDKAppID，类型为 Number};let tim = TIM.create(options); // SDK 实例通常用 tim 表示如果需要海外通信：配置项oversea：true常量event:监听处理SDK 进入 ready 状态时触发，接入侧

2021-06-09 16:32:52 472

原创 uni-app最契合的组件库，uView组件库（使用）

uView组件库https://www.uviewui.com/1安装1、下载 https://ext.dcloud.net.cn/plugin?id=1593 下载插件zip2、把uview-ui文件夹复制项目目录下2配置1、在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。import uView from "uview-ui";Vue.use(uView);2、在项目根目录的uni.scss中引入此文件@import

2021-05-16 20:19:43 2913

原创 uni-app第二篇补充（平台判断、网络请求、骨架屏）

运行环境判断uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换在HBuilderX 中，点击“运行”编译出来的代码是开发环境，点击“发行”编译出来的代码是生产环境devolopment 开发环境production 生产环境let baseurl = nullif(process.env.NODE_ENV=='development'){ // 开发环境 baseurl = "ht

2021-05-16 20:18:00 754 1

原创一套代码编到10个平台，这不是梦想。眼见为实（最详细的uni-app详解）（还有第二篇补充）

框架概述1.uni-app概述uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。即使不跨端，uni-app也是更好的小程序开发框架。2.为什么要学习uni-app?多端框架，写一套到吗，可以发布到10个平台使用vue的语法，不需要转变开发思维。3.其他多端框架 wepy： (小程序) WePY 是一款让小程序支持组件

2021-05-16 20:11:57 558

原创微信小程序，骨架屏的使用。简单两步，瞬间高大上

/**@ course Behavior及计算属性computed 、分包、基础库版本兼容、骨架屏、发布*@ author 杨亚月*@ time 2021/05/12**/一、知识点回顾二、作业讲解三、组件代码特性共享Behavior及计算属性computed1.Behavior组件间代码共享特性1.1介绍behavior是用于组件间代码共享的特性,意思就是定义一部分公共代码特性，每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据

2021-05-14 09:19:57 1816 1

原创如何让微信小程序上线

小程序发布1.配置服务器设置-开发设置-配置服务器域名：2.上传发布1、上线前配置服务器域名域名要求：协议必须是https的协议，域名被解析过的2、点击开发者工具的上传按钮，进入后台，版本管理，开发版本里边3、点击开发版本右侧，提交审核按钮4、审核通过后，直接发布上线...

2021-05-14 09:17:48 506

原创微信小程序、微信低版本兼容

基础库低版本兼容小程序的功能不断的增加，但是旧版本的微信客户端并不支持新功能，所以在使用这些新能力的时候需要做兼容。1版本号比较js _getuserinfo() { // 4 13 // 2.10.4 // 获取到用户的客户端基础库版本 let version = wx.getSystemInfoSync() console.log(version.SDKVersion) this.compareVersion(version.SDKVersion

2021-05-14 09:16:32 3265

原创微信小程序如何进行分包，两兆变20，单车变摩托

工程优化1.分包某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。直接进入分包，也会下载主包主包：tabber页面 app.js app.json。。。普通分包：按需加载，可以使用主包的数据独立分包：按需加载，不可以使用主包数据优势1.在小程序启动时，默认会下载主包并启动主

2021-05-14 09:13:07 264 1

原创微信小程序、组件代码特性共享Behavior及计算属性computed

组件代码特性共享Behavior及计算属性computed1.Behavior组件间代码共享特性1.1介绍behavior是用于组件间代码共享的特性,意思就是定义一部分公共代码特性，每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用，方便管理与统一修改. 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior1.2创建1、先新建一个behavior文件 js

2021-05-14 09:10:45 1007 1

原创微信小程序常用界面api及案例、获取用户信息、获取手机号、WeUI组件库、微信小程序云开发、云函数、云存储

三.常用界面api及案例常用界面API：wx.showToast()、wx.showLoading()、wx.hideLoading()、wx.setNavigationBarTitle()案例需求：请求接口，获取数据，进行数据渲染，添加点击事件，跳转页面，动态显示导航，使用交互api，完善页面加载效果代码案例： wx.showLoading({ title: '加载数据...', }) wx.hideLoading()showLoading 不会自动消失，需要hide

2021-05-13 19:59:11 1739 1

原创微信小程序路由导航、自定义组件、slot槽口、组件通信、小程序生命周期、各种API，缓存，掉接口、get，post网络

1.导航组件（声明式导航）<!--navigate: 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 redirect:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 switchTab:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 reLaunch 关闭所有页面，打开到应用内的某个页面(包含tabbar页面) navigateBack：关闭当前页面，返回上一页面或多级页面能够t

2021-05-13 19:55:17 360 1

原创微信小程序WXML、WXSS、事件系统、WXS、组件(详解)--看完就会写微信小程序。前面还有基础教程

三、视图层概述、框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。WXML(WeiXin Markup language) 用于描述页面的结构。WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。WXSS(WeiXin Style Sheet) 用于描述页面的样式。组件(Component)是视图的基本组成单元。四、WXML语法1.wxml概述及作用WXM.

2021-05-13 19:51:12 2256 3

原创微信小程序开发（详解）-保证学的明明白白的

微信开发简介1.微信开发概述概述（1）微信开发即微信公众平台开发，将企业信息、服务、活动等内容通过微信网页的方式进行表现，用户通过简单的设置，就能生成微信网站。（2）通俗的说，就是微信对外提供了例如聊天、支付、分享、收藏等功能，同时还提供了丰富的封装好的接口，开发者利用这些接口和功能，写入程序中，进行的开发。目的（1）企业开发的需要,使自己更加符合企业发展的需求（2）个人的发展以及技能的提升（3）发展前景大、生态系统丰富平台（1）微信开放平台（2）微信公众平台2.微信开放平台概述

2021-05-13 19:46:04 1217 2

原创 react的UI框架Antd,axios,状态管理

UI框架（pc和移动 Antd）5.1 设计体系官网https://ant.design/index-cnhttps://ant.design/docs/react/introduce-cn5.2 概念antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。5.3✨ 特性#???? 提炼自企业级中后台产品的交互语言和视觉风格。???? 开箱即用的高质量 React 组件。???? 使用 TypeScript 开发，提供完整的类型定

2021-05-13 09:31:47 519 1

原创 react生命周期，ref，表单，路由，路由传参接参，

一、生命周期初始化时期constructor 初始化render 渲染componentDidMount 挂载完成//大量的异步操作以及接口的调用，我们会在componentDidMount中完成更新期首先判断是否含有shouldComponentUpdate.如果有，根据返回值状态，return true。生命周期继续执行，执行render(){}执行componentDidUpdate。return false 生命周期结束如果没有，执行render(){}执行compon

2021-05-13 09:27:12 299 1

原创 react基础，脚手架，组件创建，组件通信

React基本知识react并不是框架，它只是一个类库。类似于jquery。它没有设计模式，它是单项数据流。它大部分都是原生js的写法。如果一定非要把它跟MVC中V 是一样的。它更多的是操作视图（view）react是脸书（Facebook），它最早是内部项目，13年年中开源react在国内之前没有太多的市场随着产品需求的增加（Vue是不能实现大型的电商项目pc端。vue大部分做的还是移动端）react中有一个新的语法糖，jsx (javascriptXML)它可以使js和html混合...

2021-05-11 19:26:50 309 3

原创 vue中TS的应用

TS(typescript)ts: typescript ,它是js超集（包含js所有的语法，在基础上增加了数据类型定义）它最主要做的一件事，就是数据类型验证。js是弱类型语言，java是强类型语言let a = 123,a 就是number类型。let a = '123',a就是字符串类型但是ts是在声明并定义的时候就是定义了它的数据类型。 let a:number = 100如果你要去修改a ,a只能被修改成数值型，如果你修改成其他类型，那么会报错。它运行的时候并不会报错（即使数据类型有问

2021-05-11 19:23:42 4154

原创 vue数据可视化界面，智慧图表。Echarts，以及git

一、数据图表一张图表胜过千万句话1.1HighChart概念兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库下载一、通过CDNhttps://code.highcharts.com.cn/index.html二、通过NPM下载（用的比较多）npm install highcharts三、通过官网下载https://www.highcharts.com.cn/download通过引入库的方式引入到本地基本应用<!DOCTYPE

2021-05-11 19:21:49 2415 35

原创 web前端全栈0基础到精通（祺）vue 09

一、UI框架1.1UI框架之PC端（elementUI）官网地址https://element.eleme.cn/#/zh-CN安装npm install(i) element-ui+ element-ui@2.15.1全局引入UI框架main.js//引入UI库import ElementUI from 'element-ui'//全局引入css样式import 'element-ui/lib/theme-chalk/index.css'Vue.use(Eleme

2021-05-11 19:18:00 108

原创 web前端全栈0基础到精通（祺）vue 08

一、数据交互（axios）1.1概念axios : 读音阿克西奥斯河它并不是vue独有的插件。axios是一个HTTP的库，基于promise创建的一般vue中或者react中进行数据交互，我们可以调用这个库易用、简洁且高效的http库(基于promise创建的)Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。1.2官网地址中文文档： http://www.axios-js.com/npm : https://www.npmjs

2021-05-11 19:16:30 112

原创 web前端全栈0基础到精通（祺）vue 07

day06课程回顾组件通信父子组件通信父组件<子组件自定义属性='字符串' :自定义属性='数据'></子组件>子组件props:['自定义属性']//做代码比较严谨，希望父组件传递数据与子组件的数据类型一致//props验证props:{}子父组件通信父组件<子组件 @自定义事件='父组件的事件名称'></子组件>methods:{ 父组件的事件名称(e){ //e是子组件传递的数据 }}子组件

2021-05-11 15:59:07 103

原创 web前端全栈0基础到精通（祺）vue 06

一、slot槽口（插槽）1.1概念开辟一个插槽组件嵌套的时候，组件标签中的内容无法显示。如果你非要显示数据，那么就开辟一个槽口（插槽）1.2槽口的创建方式匿名槽口父组件<子组件>内容</子组件>子组件<slot></slot>具名槽口父组件<子组件><div slot='自定义name1'>内容1</div><div slot='自定义name2'>内容2&lt

2021-05-11 14:49:40 103

原创 web前端全栈0基础到精通（祺）vue 05

一、组件通信（组件传值）1.1概念组件之间可以互相传递数据1.2组件通信的方式1.2.1父子组件通信父组件<子组件 :自定义属性1='变量1' 自定义属性='字符串'</子组件>子组件{ props:['自定义属性1','自定义属性'...]}props属性和data以及computed一样都是直接挂载到vue实例上的，所以命名的时候一定不能重复！！！props属性的优先级要高于data!!!注意点：props是一个单项数据流！！！prop

2021-05-11 14:47:40 112

原创 web前端全栈0基础到精通（祺）vue 04

一、组件(component)在前端，两大概念一、模块模块指的就是逻辑封装，一些共通的功能，你把它提取出来，封装到js中。你需要这个功能，你就引入jses6的导入导出（导出的方式决定你引入的方法）引入 import 变量名 from '地址'导出 export default 内容 =========导出 export const 变量导入 import {变量} from '地址'二、组件组件的指的是视图（静态）的封装，很多情况，静态页的结构很相似，我们可以提取出一个部分

2021-04-29 14:07:25 146 1

原创 web前端全栈0基础到精通（祺）vue 03

一、watch（监听/侦听器）1.1概念watch 用监听属性的变化。watch用来监听data的变化1.2监听方法1.2.1 浅监听浅监听可以监听，字符串，普通的数组。它不能监听对象的变化watch:{ 数据属性(newVal,oldVal){ }}1.2.2深度监听可以监听对象的变化watch:{ 对象数据属性：{ deep:true, handler(newVal){ } }}二、计算属性（computed）vue的作者：尤雨溪（美籍华人）。他

2021-04-29 14:05:31 169 2

原创 web前端全栈0基础到精通（祺）vue 02

一、localStorage 和 sessionStorage的区别相同点：都可以实现存储。它们的大小都是5MB左右。它们的存储方式都必须以字符串进行存储！！！！它们的语法都是相同。存值： localStorage/sessionStorage.setItem('key','value') 取值： localStorage/sessionStorage.getItem('key')移除（某一项） localStorage/sessionStorage.removeItem('key')不同点

2021-04-29 14:03:31 149 2

原创 web前端全栈0基础到精通（祺）vue 01

一、vue的基本知识1.1vue 的官网https://cn.vuejs.org/1.2概念渐进式的JavaScript框架？？？？渐进式。。。自底向上，逐渐增强。vue.js它本身就是一个库，类似于jq。你可以把它当做一个普通的库去调用，完成简单的demo和界面。当我们的需求增加，产品需求的增加，普通的页面无法满足我们的日常开发需求。我们可以利用vue的够工具，也就是vue-cli 脚手架快速搭建项目的模型（项目的基本骨架都成型了）。项目越来越大，我们还可以调用vue的核心插架比如路由（v

2021-04-29 13:58:57 169

原创 web前端全栈0基础到精通（祺）js 19

链式调用原理链式调用: jq的方法都有返回值, 返回操作的对象或被操作以后的对象// var mn = $('.box');// console.log(mn);// var a = mn.css('background', 'red');// console.log(a);// var b = a.prevAll(); // 前面所有的li// console.log(b);// var c = $('.box').css('background', 'red').prevAll().cs

2021-04-29 11:46:57 76

原创 web前端全栈0基础到精通（祺）js 16

localStoragelocalStorage: 存储数据到本地存储数据对象.属性名 = 属性值;setItem('属性名， ‘属性值’);// 对象.属性名 = 属性值;localStorage.username = '1332222111';// setItem('属性名， '属性值');localStorage.setItem('pass', '123123');获取数据对象.属性名getItem(‘属性名’);// 对象.属性名console.log(loca

2021-04-29 11:33:37 73

原创 web前端全栈0基础到精通（祺）js 15

AJAX概念ajax用来创建快速动态交互式页面的技术; 通过与后台少量的数据交换, 更新页面在页面不刷新的基础上更新页面上的某些数据 ajax: Asynchronous javascript and xml 异步 js 和 xml执行方式同步: 在数据请求过程中, 必须等待数据返回之后, 才能执行后续的代码异步: 在数据请求过程中, 不需要等待数据返回, 就能执行后续的代码常用异步readyStaterea

2021-03-11 22:15:14 89

原创 web前端全栈0基础到精通（祺）js 11

事件对象概念事件对象：当事件发生的时候，浏览器会将相关事件的信息存储在一个对象中，这个对象就是事件对象事件相关鼠标相关 ie/chrome/高版本ff: window.event 低版本ff: 事件处理函数的第一个形参document.onclick = function(ev){ console.log(window.event); // MouseEvent // console.log(ev); // 事件对象兼容

2021-01-18 18:12:26 104

原创 web前端全栈0基础到精通（祺）js 10

表单快速获取表单元素\1. 需要先获取表单 form\2. 快速获取表单元素 form.name值var form = document.getElementsByTagName('form')[0];console.log(form);// 2. 快速获取表单元素 form.name值console.log(form.user); // 元素console.log(form.user.value); // 值// 快速获取单选按钮和单选按钮的值console.log(form.se

2021-01-15 21:51:35 125

原创 web前端全栈0基础到精通（祺）js 09

节点DOMDOM w3c提供用来操作页面的标准接口页面在生成的时候, 会形成一个树状结构, 每个标签都在树状结构的某一个位置, 称之为节点这个树状结构称之为DOM树节点属性nodeName: 节点名称标签–LI P DIVnodeType: 1–12的数字 1–标签 2—属性 3—文本 8–注释 9–documentnodeValue: 节点内容只有文本节点才有内容获取子节点children: 属性非标准属性只标签节点childNodes: 属性标准属性标签、文本

2021-01-15 21:50:15 88

空空如也

空空如也