- 博客(56)
- 收藏
- 关注
RSS订阅原创 Uncaught Error: [vue-composition-api] must call Vue.use(plugin) before using any function
vue-composition-api
2022-07-27 17:15:46
1932
原创 支付宝小程序开发踩坑
一.自定义组件（不同于微信小程序，组件不可以全局引入，只能页面json单独引入）1.自定义组件支持使用 ref 获取自定义组件实例 详细点击 https://opendocs.alipay.com/mini/framework/component-ref2.父子组件获取参数，事件调用向组件传递参数通过花括号绑定 ，ex: 子组件获取参数props：{data: {}, id：“，onClick:(data) =>console.log(data)}
2022-03-10 14:52:30
870
原创 css实现加载动效loading效果
第一种.css. .loading{ width: 80px; height: 40px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 8px; height: 100%;
2021-10-27 10:31:57
636
原创 比较两个数组是否完全相等
isArr(chooseList, arr) { let arr2 = [] chooseList.forEach((item, index) => { arr2.push(item.option) }) console.log(arr2,arr) let re = arr.filter(item => { ...
2021-06-17 17:11:30
202
原创 Promise异步简单事例
Promise是异步编程的一种解决方案。JavaScript是单线程机制，所谓单线程就是按次序执行，执行完一个任务再执行下一个任务，同步就是一个单线程操作，同步编程会带来一个严重的问题------阻塞，即：假如用户在做某一个操作的时候，突然间进行一个操作（网络请求、计时器），而同步操作一般情况下是比较耗时的，此时代码执行到这个地方会出现阻塞，影响后续代码的运行，为了解决这个问题，我们一般在此时进行异步操作，即在发送网络请求的同时，继续执行后续代码，然后网络请求结束后，通过回调函数返回其结果。new Pr
2020-10-22 17:25:58
223
原创 移动端常见 局部滚动布局 （微信小程序 + vue H5）
在项目中经常会遇到这种类似的布局方式，全屏滚动有时候不符合项目场景需求，经常会遇到头部底部固定，中间区域滚动，还有会触底加载，在小程序中我们会有类似的触底事，下面我项目中遇到的问题总结，1.先来说说常见的布局方式，主要flex布局，类似下面这种就是头尾固定，中间区域高度固定超出滚动，无论是小程序还是H5 都可以这种布局，具体css代码：父元素.peas-wrapper { widt...
2020-03-13 10:01:45
2492
原创 css: overflow:scroll 在ios 上出现滑动不流畅的问题
css: overflow:scroll 在ios 上出现滑动不流畅的问题，在滑动样式内加入 -webkit-overflow-scrolling: touch; 即可
2020-03-13 09:36:06
517
原创 h5调用微信sdk步骤
h5调用微信sdk步骤步骤一：绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。步骤二：引入JS文件在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js步骤三：通过config接口注入权限验证配置...
2019-11-06 18:21:38
3562
原创 关于CSS的一些冷知识
关于CSS的一些冷知识1.自定义滚动条html<div class="custom-scrollbar"> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit.<br /> Iure id exercitationem nulla qui repellat laboru...
2019-09-26 15:23:50
252
原创 js 根据指定的多个索引，删除相应的数组元素。splice + sort
var productItems = ["a", "b", "c", "d"]; var indexs = [1, 2, 3,]; indexs.sort(function(a, b) { return b - a}); indexs.forEach(function(index) { productItems.splice(index, 1) })将索引集合按照倒序排列，然后sp...
2019-09-16 16:15:14
3885
原创 微信小程序开发之分页加载
本文将带你了解微信小程序开发之分页加载，希望本文对大家学微信有所帮助。分页加载功能大家遇到的应该会经常遇到，应用场景也很多，例如微博，QQ，微信朋友圈以及新闻类应用，都会有分页加载的功能，例如你一页显示10条数据，第一次（第一页）请求即开始start为0结束end是9，第二页就是从10到19，以此类推。既然要实现分页加载功能，最重要就是下拉以及上拉的处理事件，在微信小程序中已经帮我们封装好了上拉...
2019-08-01 10:35:17
528
原创 微信小程序 全面屏的适配
通过配置app.json的window属性的navigationStyle（导航栏样式，仅支持以下值：default 默认样式custom 自定义导航栏，只保留右上角胶囊按钮），改为custom模式，来自定义navigator。注：navigationStyle 只在 app.json 中生效。开启 custom 后，低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0（不代表最低...
2019-08-01 10:08:31
1664
原创 小程序 scroll-view视图的应用
最近接手的小程序，给自己做的笔记，效果如下图。具体代码 如下：wxml <scroll-view wx:if="{{flag=='0'}}" scroll-into-view='{{indexFlag}}' scroll-x='true' class="father {{slotshow?'tap_fix':''}}" scroll-left='{{dataX}}' sc...
2019-07-29 10:47:11
210
原创 vconsole 移动端调试神器
在写webapp或者移动端网页需要嵌入到app时候，尤其是在APP内置的webView上加载我们的页面，想要查看手机浏览器信息是非常困难的事，当出现问题的时候，你又不能查看日志，一般会连接本地测试环境，然后在alert来打印日志（这种做法太蠢了），然后一遍一遍的定位bug，修改代码。使用eruda之后感觉爽爆了，解决了这个问题，这个工具就想电脑端的devtools，可以查看日志，网络，页面，Res...
2019-07-02 14:11:22
981
原创 公众号 h5 页面 图片上传 wx.chooseImage使用
刚开始直接在H5里使用了wx.chooseImage,发现在开发者工具中不断的报错the permission value is offline verifying,慢慢开始搜索才发现在小程序的web-view里也必须使用jweixin,其实就是个公众号网页，1.引入JS文件// 推荐使用1.3.2以上的版本，之前的版本很多坑
2019-07-01 16:44:27
13848
1
原创 小程序自定义组件的具体实现+页面与自定义组件间的通信
小程序自定义组件的具体实现+页面与自定义组件间的通信具体步骤如下：1.创建一个组件图中的singerList就是一个子组件，组件为了规范通常放在conponents里。2.在页面的json文件里引用组件//想在index.wxml中引用，则对应的index.json要这样配置{ "usingComponents": { "songList":"/components/so...
2019-06-24 17:34:43
504
原创 git解决每次拉取代码都需要用户名密码
git解决每次拉取代码都需要用户名密码执行git config --global credential.helper store，在~/.gitconfig目录下会多出一个文件，这里会记录你的密码和帐号；再执行git pull 输入一次正确的帐号密码之后就不用再输入了。...
2019-06-24 13:37:57
7407
原创 vue 微信公众号支付 jssdk
jssdk 引入然后需要在vue项目中引入jssdk，微信为了方便用户使用，将官方的jssdk发布到了npm上，有一个叫weixin-js-sdk的，但我们需要使用的不是这个，网上很多在vue中引用的是这个，但是这个是为commonjs发布的版本，只能通过require引入，很多人发现在vue中引入import wx from ‘weixin-js-sdk’，console.log(wx)会出现...
2019-06-19 16:49:12
1394
原创 移动端使用 vue2-datepick 日期控件
vue2-datepick首先应用npm 下载安装npm i vue2-datepick --save在main.js中引入import Calendar from 'vue2-datepick'; //日期控件Vue.use(Calendar);//日期控件然后在组件中使用。html <div class="group_item"> ...
2019-06-13 13:58:38
3669
原创 h5开发小结
Viewport<!-- 让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放网页 --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><!-- 针对一些不识别viewport的浏览器，如黑莓 --><meta name=...
2019-05-22 10:50:15
254
原创 关于h5页面的普通屏和全面屏判断
关于h5页面的普通屏和全面屏判断现在主流的全面屏已经占用很多的市场，那么通常开发会遇到些问题，比如要去根据普通屏或是全面屏做一些相应的展示，接下来我这边的需求是展示不同大小的图片首先在公共的js文件里简单封装；/**判断屏幕大小 */ function judgeBigScreen() { //，这里根据返回值 true 或false ,返回true的话 则为全面屏 let res...
2019-05-20 15:54:56
12174
3
原创 vue中axios跨域请求解决
vue中axios跨域请求解决一，首先在文件中下载axioscnpm install axios --save-dev二、在main.js中引入及获取对象import Vue from 'vue'import App from './App'import router from './router'import Axios from 'axios' Vue.prototype.$...
2019-05-17 17:29:07
190
原创 关于h5设配手机的一些jquery封装
关于h5设配手机的一些jquery封装众所周知，h5的项目在开发中会有很多适配的问题，不像pc中那么的单纯，给自己记下的笔记，就当学习了~。首先是关于手机终端问题1.判断是否为微信：/*判断微信==================*/function isWeiXin() { //返回true/false var ua = window.navigator.userAgent.toLo...
2019-05-17 11:51:18
248
原创 jquer获取url中的参数简单封装
jquer获取url中的参数简单封装在unit.js文件中简单封装下：//获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window....
2019-05-17 11:02:15
185
原创 响应式开发
响应式开发响应式开发的原理：媒体查询：查询媒介，查询到当前屏幕(媒介媒体)的宽度，针对不同的屏幕宽度设置不同的样式来适应不同屏幕。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。简单说，你可以设置 不同屏幕下面的不同的样式，达到适配不同的屏幕的目的。实现方式：通过查询screen的宽度来指定某个宽度区间的网页布局。超小屏幕 （移动设备） w...
2019-05-08 15:33:03
118
原创 移动端(手机端)页面自适应解决方案—rem布局
移动端(手机端)页面自适应解决方案—rem布局假设设计妹妹给我们的设计稿尺寸为750 * 1340淘宝做法（推荐做法，尤其是app内嵌页面）：引入：页面开头处引入下面这段代码，用于动态计算font-size，或者单独放入一个文件，引入文件也可以;(function(win, lib) { var doc = win.document; var docEl = doc.do...
2019-05-08 15:26:57
337
原创 vuejs开发H5页面总结
vuejs开发H5页面总结关于布局方案当拿到设计师给的UI设计图，前端的首要任务就是布局和样式，相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单，关键在于对不同设备的适配。之前介绍了一篇关于移动端rem布局方案，这大致是网易H5的适配方案。不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用。网易云的方案总结为：根据屏幕大小 / 750 = 所求字体 / ...
2019-05-08 10:50:12
974
原创 vue 实现checkbox的全选，单选以及删除
vue 实现checkbox的全选，单选以及删除<template> <div> <input type='checkbox' class='input-checkbox' ：checked="fruitIds.length === fruits.length" @click='checkedAll()'>全选 <div ...
2019-04-18 18:30:26
11607
4
原创 Vue项目中使用vw实现移动端适配
我们在vue移动端项目中的适配一般都采用rem，但是rem也不是能兼容所有的终端。随着viewport单位越来越受到众多浏览器的支持，下面将简单介绍怎么实现vw的兼容问题，用vw代替rem当我们采用vue-cli脚手架搭建完项目，安装所有依赖包之后，用npm run dev启动后，在根目录有一个 .postcssrc.js 文件，文件结构如下：vue-cli默认已经安装以上三个插件：pos...
2019-04-02 13:40:13
484
转载 慕课网学习之使用vue实现购物车和地址选配功能
慕课网学习之使用vue实现购物车和地址选配功能项目github网址：https://github.com/chenmonkey/shopping-cart.gitgithub线上展示网址：https://chenmonkey.github.io/shopping-cart/1.预备知识2、过滤器filter：对接口返回的字段进行一个业务转换3、引入已创建好的cart.html、adre...
2019-03-11 16:45:10
184
原创 Vue+Element动态生成新表单并添加验证
Vue+Element动态生成新表单并添加验证首先，有这样一个需求，表单中默认有表单项，点击新增，会多出一项。点击之后官方文档中有写用v-for来实现新增表单，但是那是单表单的新增，现在多表单的新增，可以考虑的实现方法是先写死一个必须的表单，需要新增的两个表单放在一个div里，在div中使用v-for生成，达到同时新增的效果代码如下 &lt;div class="item_tit"&...
2019-02-28 15:21:07
4469
5
原创 js实现原生上传图片以及显示
js实现原生上传图片以及显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><cente
2019-02-22 15:48:14
1957
原创 原生图片上传
原生图片上传首先看效果上传之后在下面显示出来，并且点击放大缩小，旋转。html代码 &lt;div class="anniu_uplode8"&gt; &lt;span&gt;上传图片 &lt;input type="file" name="demo_input&
2019-01-28 16:14:36
655
原创 Vue PC商城项目开发笔记与问题汇总
Vue PC商城项目开发笔记与问题汇总负责PC端商城项目，这也是人生第一个真正的项目。刚做了一天，就遇到不少问题，在这里列出自己的问题与解决办法，与大家交流，提升自己，希望以后不会掉进同一个坑里。一、使用vue-cli创建项目上次逛论坛遇到一张图，出处忘记了，借送给大家，从搭建到项目结构，一张图解决好多疑问，好优秀二、Element-ui安装应用1.安装到项目 $ cnpm inst...
2019-01-09 13:36:33
2061
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人