F_mengze的博客

继上篇文章 vue写一个可全屏拖拽容器效果之后，发现了：如果可拖动的div中有input输入框的话，不做处理input无法输入内容，所以我们需要在oDiv.onmousedown事件中加上以下代码，就可以解决input输入框无法输入的问题！if(e.target.nodeName == 'INPUT'||e.target.nodeName == 'TEXTAREA'){ return}如图：...

小编这里是每个页面都用到了这个效果，所以这里先封装了一下组件，封装就不多说了…首先实现可拖拽效果，我们先自定义一个全局指令 data(){ return { } }, directives: { drag(el) { // 可就在里写指令的js代码 const oDiv = el // 当前元素 document.onselectstart = () => { return false } oDiv.onmousedown =

首先使用计算属性将要监听的变量绑定到一起//数据区data () { return { selID1:'', selID2:'', }}computed: { changeData () { const { selID1, selID2} = this return {selID1,selID2} }},watch:{ changeData(val){ console.log(val) //val的值就是selID1和selID2的值 //接下来在这里写将要

一个以数字组成的数组，实现输出id为数字，并且从大到小排序name（要求使用es6语法）！！！代码：const source = [ null, { id: 4, name: 'test1' }, { id: {}, name: 'ssdf' }, "test", { id: () => {}, name: 'sf' }, { id: '6', name: 'test3' }, { i

var sexData=["男","女","女","男","女"];var filter2=sexData.filter(function(sex){ return sex==="女"})//console.log(filter2) ["女", "女", "女"]var porducts = [ {name: 'apple',type: 'red'} , {name: 'orange',type: 'orange'}, {name: 'banana',type: 'yellow'}

支付宝支付uni.getProvider({ service: 'payment', //获取服务供应商 success: (res) => { console.log(res.service); //服务类型：payment console.log(res.provider); //不同服务类型下可能的取值：["alipay","wxpay"] if (res.provider.indexOf('alipay') != -1) { //服务提供商（从服务供应商中获取，是否包含

微信支付uni.getProvider({ service: 'payment', //获取服务供应商 success: (res) => { if (res.provider.indexOf('wxpay')) { this.$http.post('接口地址', { order_id: this.orderdata.order_id, user_id: uni.getStorageSync("user_id"), type: 2 }).then(res

//util.jsfunction uploadFile(path,imgList){ uni.showLoading({ title: '上传中' }); uni.uploadFile({ url:'上传接口地址', filePath:path, name: 'file', success: res => { let temp = JSON.parse(res.data) imgList.push(temp.data) }, file: res =&g

<view v-if="isShowCode" @click="getCode" class="verificationCode"> {{reGet}}</view><view v-else class="verificationCode">{{daojishi}}s</view>data() { return{ isShowCode:true, reGet:"获取验证码", daojishi:"60" }},methods:{

<script>export default { data() { return { timeout: 30000, // 30s timeoutObj: null }; }, onLoad() { // .判断是否已连接 this.checkOpenSocket(); }, methods: { // 判断是否已连接 checkOpenSocket() { uni.sendSocketMessage({ data: 'ping',

语法：window.open([URL], [窗口名称], [参数字符串])URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。窗口名称：可选参数，被打开窗口的名称。1.该名称由字母、数字和下划线字符组成。2."_top"、"_blank"、"_self"具有特殊意义的名称。_blank：在新窗口显示目标网页_self：在当前窗口显示目标网页_top：框架网页中在上部窗口中显示目标网页3.相同 name 的窗口只能创建一个，要想

Node.js严格来说不是一个框架，而是一个平台。Node.js技术栈：（1）Node.js的核心模块。（2）至少要学习一个Node下的框架：Express框架、KOA框架。（3）模板引擎：是一种编译型HTML语言，例如：Pug（Jade）、EJS等。（4）编译型CSS：Less/Sass/Stylus等。（5）数据库：mongoDB、MySQL。一、MVC架构：1、M：模型（Model），模型和数据库有关。2、V：视图（View），视图和页面（模板引擎）有关，用户最终能看到的就是视图。

最近做H5页面之间跳转以及带有参数的传递，下边就让我们一起来练习一下吧！window.location.href = "buyOil.html?userId="+ res.userId;buyOil.html 这是跳转路径的地址res.userId是我们传过去的参数，在这里我们模拟res.userId是2，所以就变成了window.location.href = "buyOil.html?userId="+ 2;我们在buyOil.html这里边接受这个参数 function Ge

点击的时候可选择，代码：其中样式是自己写的一个css，你们可以自己写样式，用到了阿里图标index.wxml<!--定位和搜索--> <view class="indexTop display-flex align-center"> <view class="display-flex align-center"> <text class="textColor city" catchtap="switchcity">{{ci.

使用colorUI框架，首先我们需要下载下来下载地址：GitHub地址：https://github.com/weilanwl/ColorUI/下载下来解压我们会得到如下文件我们把demo文件夹导入到我们的微信开发者工具中：template文件夹是一个使用colorUI的（相当于）新建小程序里边可以直接使用colorUI，如果你是自己创建的项目，将我们demo中的colorui文件夹复制到项目中，跟pages同级然后在app.wxss导入这样我们就可以使用colorui了将你需要的组

1.首先安装npm install qrcodejs2 --save-dev2.在需要使用的Vue页面或者js文件中导入import QRCode from 'qrcodejs2'3.页面里有个标签展示二维码<template> <div id="qrcode" ref="qrcode" ></div></template>方法区写事件：methods:{ showQrcode() { document

<div class="masonry"> <div class="item"> <img src="http://picsum.photos/360/460?random=1" > </div> <div class="item"> <img src="http://picsum.photos/360/500?random=1" > </div> <div class="item"&g

我们使用思源字体为例子：百度下载：SourceHanSansCN-Regular.ttf文件百度搜索font-face转换器将下载的文件拖到左边，点击立即生成。加压文件会得到如下文件：在vue项目中新建文件夹并复制下载下来的相应文件在main.js中引入引入css文件在需要的地方进行使用：就OK了！...

因为一个页面有很多相同的样式，所以我们可以使用router-view组件来实现点击导航不刷新页面的效果，只在当前页面打开内容。最主要的是router.js路由，写法如下：import Index from '../pages/index'{ path: '/', name: 'index', component: Index },{ path:'/nav', name:'nav', component:()=>imp

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title></title> <style> html{ background-color: antiquewhite; } .divContent{ width:200px; height: 200px; border:1px solid #ff5857;

在做<el-table></en-table>使用data注入数据后,用<el-pagination></el-pagination>做了分页效果。结果出了一些问题。请看下列代码：<el-button type="danger" :disabled="isdelete" @click="batchDelete">批量删除</e...

http://echarts.baidu.com可以在该网址下载echarts.js文件在使用百度图表的HTML文档中加载下载的echarts.js文件：<script type="text/javascript" src="js/echarts.js"></script>html中创建一个容器，并为其设置宽和高<div id="box"></d...

安装axiosnpm install axios --save-dev随着axios的安装，qs随之也就安装好了，在main.js入口文件中引用,使用post请求要用到qs。//axios安装好后即可导入import axios from 'axios';import qs from 'qs';//将$axios和qs挂在原型上，方便在实例中能够使用用this.$axiosVue....

uni.request({}) uni.request({ url:'', data:{}, methods:'', header:{}, success:res=>{}, fail:()=>{}, complete:=>{} })uni.request({}).then(()=>{})uni.re...

输入年龄小于18或者大于60的时候提示首先在data中把自定义的校验规则定义出来在rules中使用即可

什么是PromisePromise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。优点(1) promise对象，进行链式回调，可以将 异步操作 以 同步操作的流程 表达出来，避免层层嵌套，避免"厄运回调金字塔"。(2) 可以有多个then()连缀书写。(3) 不仅给出了异步操作成功的代码解决方案，还给出了异步操作失败和完成的解决方案。new Promise(fun...

一、什么是模块化？1.1. 在ES5中本身是不支持模块化的，后来一些社区的大佬制定了一个模块规范，主要分为两种，一个是用于服务器的CommonJs,比如nodeJS中的require；另一个是用于客户端的AMD，比如requireJs。1.2. 在ES6中专门提供了通用的模块化方案（export / import）。二、export和import的使用2.1. export：用于导出模块...

一、创建类和对象1.1. 在ES5中使用的是function关键字创建类， ES6引入了 class 关键字来创建类。1.2. 创建类的实例使用 new 关键字。**　1.3. 类的 constructor 构造函数：用于传递参数，返回实例对象，通过 new 关键字生成实例时，自动调用该方法。如果没有显式声明构造函数，在类的内部会自动创建一个默认的constructor（）构造函数。**1...

一、Symbol应用场景：因为每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。1.1. 什么是Symbol ?1.1.1. Symbol是ES6中新增的原始数据类型，Symbol提供一种独一无二的值比如：在js中声明一个变量a = 5;再声明一个变量b = 5; 虽然这两个变量名不同，但是值是相等的；使用Symbol声明的值不重复、不相等。...

一、函数的参数默认值1.1. 方法的形参可以赋默认值，在调用方法时，如果没有与之对应的实参则使用形参的默认值。1.2. 赋默认值的形参的后面不能有普通形参（没有赋默认值的形参）。1.2.1. 默认值只在没有传参或者参数为undefined时使用默认值，如果参数为null,则不适用默认值。 //函数的参数默认值 //赋默认值的形参在普通参数的后面 function metho...

一、String对象的扩展方法1.1. 模板字符串1.1.1. 模板字符串是ES6新增的创建字符串的方式，使用反引号定义（反引号一般在tab键的上面，esc键的下面，键盘布局不同所在位置也不同）。1.1.2. 模板字符串在创建时可以使用 ∗∗解析变量，使用更加灵活。1.1.3.模板字符串可以换行，如果创建模板字符串时使用了换行，那么输出的时候也会换行。1.1.4.使用模板字符串可以用∗∗{ ...

一、什么是ES6？ES全称为ECMAScript，它是由国际标准化组织ECMA（全称：European Computer Manufacturers Association）欧洲计算机制造商协会制定的一项脚本语言的标准化规范。JavaScript就实现了这套标准。ES6中的6代表的是版本，从2015年6月份发布的版本及其后续版本统称为ES6，从2015年开始，每年的6月份都会发布新版本。目前各大...

（1）input输入框组件（2）textarea多行输入框组件（3）form表单组件（4）radio-group单选选择器与radio单选项目（5）label关联组件（6）checkbox-group多选选择器与checkbox多选项目（1）input输入框组件基础属性type属性值占位符placeholder属性placeholder-style：注意：plac...

按钮组件之open-type —微信开放能力常用属性值①contact客户会话②share分享转发③getPhoneNumber获取用户手机号④getUserInfo获取用户信息⑤openSetting授权设置页⑥feedback意见反馈页面按钮组件之open-type —微信开放能力常用属性值open-type 微信开放能力属性值----contact客服会话打开客服会话，如...

表单组件（1）button按钮组件button按钮属性按钮大小size属性值:查看源码，分析button默认样式与小尺寸button由此可以分析出button按钮的边框是由伪元素button:after设置的。所以，若想去除小程序按钮默认边框，给button设置border:none无效，只能通过伪元素去除默认边框。...

（1）滑块视图容器swiper和滑块swiper-item组件微信小程序swiper实现滑动放大缩小效果①先将基础轮播图写出来，开启无缝衔接模式circular②开启指示点属性：值：③自定义指示点样式④添加前后边距属性：值：⑤设置中间激活块的类名active⑥分开设置激活态与普通状态样式，并添加过渡效果⑦添加间隙⑧开启自动轮播编写缩放类...

（1）icon图标组件（2）progress进度条组件（3）text文本组件（4）拓展：富文本编辑器UE和UM（5）rich-text 富文本组件基础内容组件（1）icon图标组件组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)icon图标组件type类型参数:（2）progress进度条组件组件属性的长度单位默认为px，2.4.0起支持传入单位(r...

什么是组件？组件就是我们写HTML的一些基本标签，比如div、span、p、ul、li等。在大多数HTML里面的标签，很多都是要自己写上一些效果的，但是在小程序里面，很多标签都带有自己的效果，可以实现一些简单的JS逻辑。微信小程序里有很多很有意思的组件，这些组件给我们开发小程序提供了很大的便利。简介一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。为了让开发者可以快速...

因为小程序的api描述都比较简单，并没有wxml及wxss的描述，有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI（简称MD）、Semantic UI（简称Semantic ）、uni-app、MUI、Element等等类似的框架UI库。小程序UI库WeUI：结果当前是当前有的，它就是微信小程序官方推出的小程序UI库WeUI。简介WeUI是什...

常见的收藏功能的实现:样式分析：未收藏时为灰色态，点击收藏按钮，图标变色，同时弹框实体收藏成功；收藏成功后，点击已收藏的商品，取消收藏，此时图标恢复为灰色态，同时弹框提示取消收藏成功。逻辑分析：每个商品单独绑定个数据，负责管理收藏状态，点击时判断状态，然后切换收藏功能（1）先将图片静态样式写入因为收藏按钮是在商品展示栏上一层，所以可以用绝对定位到右下角，此时点击便不会跳页接...