Vue
文章平均质量分 50
就像风1样
这个作者很懒,什么都没留下…
展开
-
用Mpvue开发微信小程序,微信语音聊天
1.github项目https://github.com/F-loat/mpvue-quickstart2.参考项目 githubhttps://github.com/unmagic/wechat-im更改app.js安装依赖 npm installTerminal运行 gulp 即可开启WebSocket服务然后在微信小程序里打开详细介绍看 转载http...原创 2018-09-10 19:16:57 · 2526 阅读 · 1 评论 -
mpvue开发微信小程序跳转到其他网页(外部链接)
个人类型和海外类型的小程序不支持 web-view标签也就是说个人申请的小程序,就别想跳转了!!!!1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢?2.例如我想点击一个按钮,跳转到百度(百度的网页还是在小程序中打开)3.wxml 1. index.wxml(按钮页面)<view class='wrapper'> <...原创 2019-04-29 17:04:30 · 727 阅读 · 0 评论 -
mpvue开发微信小程序:数据存储、传值、取值
小程序界面传值父级界面:A界面子级界面:B界面一、url传值详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释。1. 正向传值:A界面 –>B界面用 navigator标签或 wx.navigator传值,A界面向B界面传id值A界面获取id值传向B界面如果需要传多个参数, 用 & 链接即可 // 方法一:navigator...原创 2019-04-29 17:09:46 · 507 阅读 · 0 评论 -
mpvue开发微信小程序页面跳转(入坑传递多个参数网址类型)
1. 利用小程序提供的 API 跳转:// 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,但是 redirectTo wx.navigateTo({ url: 'page/home/home?user_id=111'})// 关闭当前页面,返回上一页...原创 2019-04-29 17:15:25 · 405 阅读 · 0 评论 -
mpvue开发微信小程序上拉加载功能(代码全)
先上图 看效果:刚进入页面是8条数据,取消地区后是68条数据 这里 每15条数据分一页,滚动底部自动加载新的一个接口push到列表中;滚动中可以看接口请求一直在添加 到最后无数据 就不会发起新的请求准备开始:基于mpvue 在main.js中import Vue from 'vue'import App from './index'// add this to h...原创 2019-04-30 16:10:51 · 360 阅读 · 0 评论 -
mpvue开发微信小程序城市三级联动加筛选功能
先看效果:上图这里引用了 Mpvue-WeUI 但是原生的组件没有不限地区的功能自己手写上取消每个级别的取消Mpvue-WeUIhttps://mpcomponent.github.io/mpvue-weui/guide/代码全↓↓↓↓<template> <div class="longinPage"> <div cl...原创 2019-04-30 16:50:32 · 364 阅读 · 0 评论 -
vue技巧——模版判空渲染 -尖括号内判断
常用的方法通过v- if:<span v-if="item.childArr[0].adver_mode==1">模式:按天收费</span><span v-if="item.childArr[0].adver_mode==2">模式:按月收费</span><span v-if="item.childArr[0].adver_mode...原创 2019-05-06 17:06:26 · 2164 阅读 · 0 评论 -
mpvue开发微信小程序上传图片(附后端代码)(含城市联动,多项选择功能代码全)
小程序也是可以上传图片的,微信小程序文档也写的很清楚。先看效果图GIF上传图片通过wx.chooseImage(OBJECT)实现官方示例代码wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType...原创 2019-05-15 13:43:08 · 2292 阅读 · 0 评论 -
vue父组件向子组件传参
需求:头部为一个公用组件,跳转页面标题切换,同时控制返回键显示隐藏父组件代码(引用子组件) 同时子组件上传递参数textTitle和ifReturn:<template> <div> <headAssembly textTitle="消息" ifReturn="0"/> <div><template>...原创 2019-06-13 16:37:31 · 1964 阅读 · 0 评论 -
vue底部导航切换(原生切换图片)功能实现
需求:底部导航切换页面,同时切换图片。底部为公共组件组件代码:<div class="weui-tabbar"> <a href="javascript:;" class="weui-tabbar__item " v-for="(i,index) in tabs" :key="index" :class="{active:index == that...原创 2019-06-14 11:40:16 · 3735 阅读 · 2 评论 -
vue开发H5简单上拉加载功能代码全vue监听滚动底部
没用ui框架写简单的实现了下功能思路:上拉加载肯定要滚动到底部,所以就先监听滚动条滚动到底部 然后执行分页+1请求数据push到渲染列表中即可;同时判断最后一页时不请求,展示无数据状态主要代码:1:监听滚动底部<script>export default { name: "index_SearchPage", data() { return...原创 2019-06-15 11:32:12 · 2361 阅读 · 0 评论 -
mpvue开发微信小程序多级联动功能
先看效果:上图 看了一下小程序的开发文档,好像没有发现可以直接实现多级联动的组件或者可选的 API(如果有,请打醒我),不过它提供了自定义选择器的组件picker-view和picker-view-column,picker-view-column相当于是选择器的每一列,并且picker-view-column之间的数据都是独立的,而且picker-view提供了...原创 2019-04-24 11:39:02 · 449 阅读 · 0 评论 -
mpvue开发微信小程序navigateBack失效于tabBar
返回上一层的navigateBack路由要是与配置的tabBar栏目路由相同的话,返回会失效,需换用switchTab//app.json里面设置的tabBar"tabBar": { "list": [ { "text": "返利", "pagePath": "pages/index/main", "iconPath": ...原创 2019-04-19 13:29:59 · 1253 阅读 · 2 评论 -
基于mpvue写微信小程序mpvue-docs跳转页面
打开github,把项目克隆下来https://github.com/F-loat/mpvue-quickstart跳转页面,废话不多说直接点。。。打开pages.js默认是有两个页面的,现在新添加一个newpage的页面这样加就行了!然后是 用模版上的方法去跳转页面已测试OK,虽然是很简单的问题,但是没找到在哪写的,所以给记录下来!希望对你有用...原创 2018-09-10 14:13:53 · 1326 阅读 · 0 评论 -
基于mpvue开发微信小程序,入门开发步骤
接下来。。。。。1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载nodejs并安装。然后打开命令行工具:# 1. 先检查下 Node.js 是否安装成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源$ npm set ...原创 2018-09-07 09:55:53 · 3495 阅读 · 0 评论 -
微信小程序三种开发方式对比(原生,wepy,mpvue)
前言 如今公司随潮流,把现有h5项目,重做成小程序项目!网上搜索到 现微信小程序的三种开发方式 做下对比!不足之处请多多指点!开发文档原生开发小程序文档:点此进入 wepy 开发文档:点此进入 mpVue 开发文档:点此进入三者的简单对比小程序缺点个人认为小程序开发中,最大的缺点,也是很蛋疼的问题不支持vue的过滤器filters(因此数据都得提前...原创 2019-04-11 10:43:30 · 3715 阅读 · 0 评论 -
vue项目去掉地址中的#(PC,H5)
vue项目携带一个#会对开发造成一定的影响:微信H5支付的回调地址,不允许有#微信三方登录回调地址,有#号时,接收不到code参数App分享,处理特殊字符时,可能会对#进行编译现在网站大多有三方登录,支付等功能,存在#,项目开发就存在很大的障碍。有点影响美观去#的原理vue把#当做自己的根目录,静态资源,比如图片。去掉#后,要采用相对路径去引用,如果图片引用是在js...原创 2019-04-09 11:03:41 · 495 阅读 · 0 评论 -
mpvue开发微信小程序网络请求request 方式配置详解(fly)-fail invalid url
request 指的是小程序中的网络请求,在 mpvue框架中可以通过小程序提供的原生 APIwx.request来进行相关的处理。但是在这里推荐一个第三方的网络请求库fly。之所以推荐这个第三方库,是因为可以在多个端上实现代码的复用,目前已支持的有Node.js、微信小程序、Weex、React Native、Quick App。mpvue没配置请求方式时碰到如下图的错误:...原创 2019-04-16 11:37:43 · 1506 阅读 · 0 评论 -
mpvue开发微信小程序去掉目录的main.js
mpvue每个页面必须对应一个main.js,导致每个页面都需要建一个目录,目录下方建一个main.js,感觉非常的繁琐有大神开发了mpvue-entry插件1.安装插件npm install mpvue-entry2.来到项目(mpvue-project)下方的build->webpack.base.conf.js文件const MpvueEntry ...原创 2019-04-16 13:16:01 · 1124 阅读 · 1 评论 -
mpvue开发微信小程序修改头部标题颜色
修改标题第一种方法:通过 wx.setNavigationBarTitl 设置mounted(){ this.onLoad() }, methods: { onLoad:function(options){ wx.setNavigationBarTitle({ title: '修改后的标题', success: fu...原创 2019-04-17 14:16:59 · 1881 阅读 · 0 评论 -
mpvue开发微信小程序未找到 app.json 中的定义的 pages "pages/Advertisement/main" 对应的 WXML 文件
用mpvue开发微信小程序,开发过程中-过个双休日后上班打开项目从新写结果 微信开发者工具报错什么未构建,开始没理他,后来调试页面发现之前写好的页面有两个打不开,新写了3个页面没问题,写第四个页面时打不开了,配置什么都没改,和之前的页面配置都一样;代码看过之后也没问题;还是有未构建的那个报错,上传码云后,本地代码删了,从新git拉取代码 npm install结果微信开发者工具...原创 2019-04-22 17:13:03 · 1322 阅读 · 0 评论 -
vue基于elementUi筛选后分页恢复默认第一页(也可用回显页)
问题描述:默认打开页面,分页是1;当点第二页之后再进行筛选位置,没加恢复之前 接口传的页数还是2,返回第二页的数据;需求:当更改筛选时 添加让页数 更改为默认1;这时要添加:current-page.sync="pageNo" 当前页<div class="pagination"> <el-pagination @current-c...原创 2019-04-15 14:17:16 · 7372 阅读 · 0 评论 -
mpvue开发微信小程序路由跳转底部导航tabBar
mpvue开发微信小程序时,用标签属性做路由跳转的话,open-type属性值要注意:tabBar 微信自带底部导航1.open-type="switchTab" 跳转tabBar路由2.open-type="navigate" 跳转非tabBar路由(默认值)<a href="/pages/index/main" open-type="switchTab" class="...原创 2019-04-19 13:27:16 · 1678 阅读 · 0 评论 -
vue配置本地和线上环境(域名)
vue本身为运行脚手架项目自家搭载了一个nodejs后台环境,本地可通过proxyTable来处理跨域问题,但是上线(或生产环境)之后改域名真是一件麻烦的事情,所以进行一些配置。config/index.js proxyTable: { '/apis': { target: 'http://www.baidu.com', //域名,主要修改这一块 ...原创 2019-06-10 11:16:43 · 4860 阅读 · 0 评论 -
vue开发H5步骤详解(环境搭建+rem布局+域名配置+请求)
环境搭建01. 安装Node.js Node.js安装包及源码 下载地址为:https://nodejs.org/en/download/、64 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi02. 检测一下node版本,在cmd命令框框内输入命令 node --version 查看node是...原创 2019-06-11 10:02:45 · 20483 阅读 · 0 评论 -
vue开发实现单选多选功能
单选:只能选择一个代码::(循环集合cities,点击哪个传值索引index,给对应的索引加上类名,初始化默认n为0)<ul class="box"> <li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>&l...原创 2019-06-21 09:54:19 · 5286 阅读 · 0 评论 -
vue引用echarts折线平滑面积图
vue中安装 echarts 不会用的有入门篇介绍文章:https://blog.csdn.net/qq_42221334/article/details/95354424主要代码:<template> <div> <div class="cardList_title">用户活跃度</div> <d...原创 2019-07-17 15:44:55 · 2737 阅读 · 0 评论 -
vue添加动态粒子背景,可设置形状,大小,速度,数量...
截取了一部分的效果图vue项目中安装vue-particles插件1.安装npm install vue-particles --save-dev2.main.js引入import VueParticles from 'vue-particles'Vue.use(VueParticles)3.引入代码<vue-particles co...原创 2019-07-29 16:13:19 · 1754 阅读 · 1 评论 -
vue基于elementUI下拉Select同时获取value和label的值
碰到脑残架构师系列——Select通过接口获取列表tableData,选择onSelectedDrug 后获取参数:id直接获取 但 name 需要多加个匹配<el-form-item label="控制系统" :label-width="formAddLabelWidth" prop="controlSystemName "> <el...原创 2019-07-30 16:30:55 · 19708 阅读 · 3 评论 -
vue基于elementUI表格状态判断展示
判断一条数据的状态展示相应的内容方法如:status(状态(-1:待处理,0:关闭,1:已反馈,2:未解决,3:已解决)), 通过 v-if 判断显示对应的状态代码:<div style="padding:15px 20px;"> <el-table size="mini" stripe :...原创 2019-07-25 15:16:26 · 16110 阅读 · 4 评论 -
vue基于elementUI选择表格数据
.代码:<template> <div class="table_wrap"> <el-table :data="tableData" size="mini" stripe style="width: 100%" border ref="multipleTable" @selection-change="handleSel...原创 2019-07-26 17:42:56 · 2029 阅读 · 0 评论 -
vue基于elementUI代码部署后图标不显示
问题原因:查看/build/webpack.base.conf.js文件可以发现,woff或ttf这些字体会经由url-loader处理后在static/fonts目录下生成相应的文件。也就是说实际应该通过/static/fonts/**路径来获取字体图标,而实际却是请求/static/css/static/fonts/**,自然报错误。解决办法:在build/...原创 2019-08-09 16:41:01 · 4181 阅读 · 1 评论 -
vue中v-html渲染出来的元素添加样式
<span v-html="ExhibitionData.content" id="Content"></span></li>不能直接在 <style></style> 中修改css样式 这应该是vue中虚拟dom渲染的元素无法修改样式;方法1:在updated生命周期函数中,js动态配置样式(这里引入了jQ,可以用原生...原创 2019-08-19 14:59:29 · 4038 阅读 · 0 评论 -
vue导出excel(简单方法完整介绍)
1.安装插件cnpm install vue-json-excel2.min.js中引入使用import JsonExcel from 'vue-json-excel'Vue.component('downloadExcel', JsonExcel)3.直接在页面中使用<download-excel class = "export-excel-...原创 2019-08-14 14:40:33 · 49285 阅读 · 26 评论 -
vue实现循环滚动列表vue-seamless-scroll
1.安装vue-seamless-scroll 实例文档链接cnpm install vue-seamless-scroll --save2.文件中引入,组件配置import vueSeamlessScroll from 'vue-seamless-scroll'3.使用<template> <vue-seamless-scro...原创 2019-08-24 17:33:16 · 36280 阅读 · 17 评论 -
vue技巧
方法绑定 {{ name() }} 返回 展示:<template> <div>{{name()}}</div></template><script> export default { data{ return { text:"是?" } ...原创 2019-08-29 14:41:49 · 511 阅读 · 0 评论 -
vue引用echarts柱形堆叠图
vue中安装 echarts 不会用的有入门篇介绍文章:https://blog.csdn.net/qq_42221334/article/details/95354424(周,月,年动态切换数据功能)请参考文章https://blog.csdn.net/qq_42221334/article/details/96307823主要代码:<template> ...原创 2019-07-17 15:20:13 · 1693 阅读 · 0 评论 -
vue引用echarts柱形加折线统计图(周月年动态切换数据)
vue中安装 echarts 不会用的有入门篇介绍文章:https://blog.csdn.net/qq_42221334/article/details/95354424思路:通过引用echarts图表 实现固定数据展示,添加定位周,月,年 通过点击动态切换数据 即可主要代码:<template> <div> <div class=...原创 2019-07-17 14:55:07 · 7389 阅读 · 3 评论 -
vue开发H5城市三级联动(代码全)
看图说话:1.安装组件:npm install v-distpicker --save2.调用代码(全):<template> <div> <div class="head_top"> <div class="right r"> <div class="Cit...原创 2019-06-17 14:09:13 · 2680 阅读 · 1 评论 -
vue开发简单上传图片功能
vue简单的上传个图片的功能,主要代码:<template><div class="plan_list"> <div class="plan_name Upload_name">企业logo</div> <div class='Upload'> <input type=...原创 2019-06-21 15:45:16 · 3278 阅读 · 0 评论