背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到本地,解压以后的文件夹列表如下: 修正:只需要 复制 iconfont.css文件就可以了,其他的文件不需要 把红框中的部分 粘贴到 自己的项目中(复制 iconfont.css就可以了),记得放在 static文件目录下 因为字体图标也属于静态资源的一部分.注意:拷贝到自己项目后,将iconfon

前言 说起小程序,其实在去年我都还只试着照着官方文档写过demo的,不过现在这家公司小程序做得比较多,我来之后也参与了几个小程序的开发了,最开始那几个是用的wepy,最近一个开始转用mpvue开发,最近这个项目终于上线了,我也来试着总结回顾一波吧. 关于框架的选择 我刚来现在的公司时,我就了解过有一个小程序框架叫mpvue被美团开源了,有过一个大致的了解.来了公司之后了解到我们公司已经有了一套自己的小程序技术栈那就是基于wepy的,而不是原生小程序,毕竟我们要开发的小程序不是简单的几个页面,而且

mpvue 小程序开发之 数据埋点统计 在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间 在对小程序api进行了一番研究之后,发现获取这些数据其实并不难 当前页面: let pages = getCurrentPages(); let lastPages = pages[pages.length - 1].route; 备注(在小程序任意生命周期里面执行 getCurrentPages()方法可以获取当前小程序的页面栈,pages[pages.lengt

背景 在刚开始学习开发小程序时,使用微信开发工具在app.json建立页面,写好配置文件名称后,应该会自动生成页面的4个文件,结果没有生成文件,反而报错:mpvue小程序:未找到 app.json 中的定义的 pages "pages/xxx/xxx" 对应的 WXML 文件 问题定位 在网上找了很多答案,有说是工具编译的问题,有些说是缓存的问题,到最后也没有找到问题发生的原因 解决方法 将app.json中关于页面pages中的清空(记得备份) 清空后保存 关闭微信开发工具,重启 将

一.背景 在使用美团的mpvue2.0框架搭建起小程序项目后,做获取用户信息时遇到一些问题:微信小程序更新api后,获取用户信息只能通过button上的绑定方法 来获取用户信息,vue上方法绑定不能直接使用,下面是修改配置mpvue的步骤 vue中代码: <template> <div> <button open-type="getUserInfo" @getuserinfo="bindgetuserinfo">用户授权</

1.微信小程序,mpVue和wepy的对比 2. 3.es6中关于数组的一些方法 <script> let arr = [,,,] // 遍历 arr.forEach(v => { console.log(v) }) // 循环操作 console.log(arr.map(v => v*)) // 循环判断 console.log(arr.every(v => v > )) // 过滤 console.log(arr.filter(v => v <= ))

mpvue开发小程序时候,要添加静态本地图片 <img src="../../images/bg.png" alt=""> 会报错: VM14878:2 Failed to load local image resource /images/bg.png the server responded with a status of 404 (HTTP/1.1 404 Not Found) 原因有很多种,解决办法可以改webpack,或mpvue的包,这里提

报错指南 "Error: ERR_GET_SESSION_KEY {"code":5100,"message":"(-1)服务内部错误,请稍后重试或联系客服人员解决." 解决: https://blog.csdn.net/shine_a/article/details/86749030 mpvue编译时出现 "未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译."错误 改变根目录project.c

mpvue开发小程序时候,要添加静态本地图片 <img src="../../images/bg.png" alt=""> 会报错: VM14878:2 Failed to load local image resource /images/bg.png the server responded with a status of 404 (HTTP/1.1 404 Not Found) 原因有很多种,解决办法可以改webpack,或mpvue的包,这里提

请勿使用本文章及源码作为商业用途! 前言 当初做这个小程序是为了婚礼前的需要,结婚之后,希望这个小程序能够留存下来,特地花了一些空闲时间将小程序转化成为“相册类小程序” 体验码 准备工作 mpvue框架 mpvue官方文档 小程序·云开发 小程序·云开发文档 注意:使用mpvue前,首先你得先熟悉vue框架的基本使用 项目结构介绍 注意:接下来展示的代码,有几个对比,分别是本人优化前和优化后的代码对比,感兴趣的可以着重看一下优化后的成熟写法. ​ common目录: 放一些公共资源,如js,cs

请勿使用本文章及源码作为商业用途! 前言 当初做这个小程序是为了婚礼前的需要,结婚之后,希望这个小程序能够留存下来,特地花了一些空闲时间将小程序转化成为“相册类小程序” 体验码 准备工作 mpvue框架 mpvue官方文档 小程序·云开发 小程序·云开发文档 注意:使用mpvue前,首先你得先熟悉vue框架的基本使用 项目结构介绍 注意:接下来展示的代码,有几个对比,分别是本人优化前和优化后的代码对比,感兴趣的可以着重看一下优化后的成熟写法. ​ common目录: 放一些公共资源,如js,cs

查阅资料,看官方文档,知道mpvue是一个使用 Vue.js 开发小程序的前端框架(美团的开源项目).框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验. mpvue你可以使用你熟悉的vue框架语法,双向绑定让你不用再使用wx的this.setData了,你可以使用npm方便的引入第三方了,真的是贫穷限制了我的想象力啊.个人感觉mpvue比wepy更加简单,

介绍 Mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验,同样也使得一套代码同时复用在小程序和 Web 中成为可能.本文将以 IT之家Lite 小程序的 Web 转换经过为线索,大致介绍一下转换的基本步骤及需要注意的一些事项. 目录结构 省略了部分与转换无关的文件 ├─build ├─config ├─src

我的GitHub博客,很多内容可以看,喜欢的给星星哦 https://github.com/liangfengbo/frontend 第一道:图片引入本地静态文件失效? mpvue开发小程序时候,要添加静态本地图片 <img src="../../images/bg.png" alt=""> 会报错: VM14878:2 Failed to load local image resource /images/bg.png the server respo

<!-- 小程序的爬坑记录 --> 1 微信小程序之动态获取元素宽高 var obj=wx.createSelectorQuery(); 2 微信小程序图片自适应 <image class="themeImg" :src="themeImg" mode="widthFix" /> mode设置为widthFix 宽度100% 3.小程序上拉加载 下拉刷新 4.通过 this.$root.$mp.query 进行获取小程序在

集成进第三方的UI框架其实很简单 这里把vant-weapp的dist目录重命名为vant-weapp放在项目根目录的static文件夹下: 在src文件夹下,即我们写vue代码的位置,正在编写的页面中添加main.json文件(vue代码编译成小程序代码时会直接使用这个文件) { "usingComponents": { "van-button": "/static/vant-weapp/button/index" //这个路径是指根目录下st

背景: 在进行小程序开发时,有一个定位城市的需求,下面就来讲讲怎么实现这个功能的吧 解决方案: 小程序的wx.getLocation()获得是经纬度并不包含地名,所以要通过经纬度用相应的地图转换出地名(本文使用的是百度地图). /* 微信获取城市定位 */ wx.getLocation({ type: 'wgs84', success(res) { const latitude = res.latitude const longitude = res.longitude const speed

解决方法: 直接写 /static/img/xx.png(一定要从 "/static" 开始,不要写成 "../../static" ,当然static里面也可以继续建文件夹,static文件夹作为静态资源存放地,小程序会自己去找的) 比如:把图片放在根目录下的static文件下就写 <img src="/static/img/bg.png" > 就可以了 原因: 很简单,static就是专门放静态资源文件的,存放在根目录下,直接就用

wx.setStorageSync('vipId',vipId)-----存储   wx.getStorageSync('vipId')-------读取   wx.navigateTo({ url: `/pages/detail/main?id=${id}` })-------页面之间跳转传递参数   如果需要传递整个对象,如下:   goPage (item) { let obj = JSON.stringify(item) wx.navigateTo({ url: `/pages/deta

<template> <div> <div style="width:90%;height:40px;line-height:40px;margin:auto;"> <div style="float:left;font-size: 15px;">我的应用</div> <div style="float:right;font-size: 15px;" @click="ed