wepy+vant-weapp踩坑记
最近用了几个月的wepy框架,碰到了挺多问题,这里总结一下
1.clone的代码无法再本地运行,wepy报错
解决方案:
执行命令 : `npm install wepy-cli@1.6.1-alpha4 -g`
2.使用vant ui框架时 custom-class中定义的 样式类不生效。
解决方案 :在style标签中 取消scoped 属性。
3.分包问题
在构建项目时一定要提前打好分包。 小程序分包的限制为2M ,总项目大小不能超过8M,那么就是3个分包和一个主包。
vant-weapp的大小为1.3M左右。各种图片资源也占了不少地方。我还引进了echarts的图表组件,大概0.7M,腾讯地图cdk .2M
解决方案:
建议静态的资源单独放在一个分包中,图片资源放在服务器上,onload时加载。 tabbar的页面必须放在主包中。各种封装的公共api放在主包中。不同的模块放在分包中
大体目录如下:
src
---components //组件
---config //打包及基础配置
---pages //页面
--main //login及tabbar页面
--packageA //存放一些静态文件和外部文件
--packageB //模块1
--packageC//模块2
--index.wpy//开发时的入口文件
---servers//封装 request 请求 阿里云网关加密方法 通用的api等等
---store//redux的store
---app.wpy //设置globalData 全局的app.json 也可以设置拦截器(wepy提供的拦截器)
4.自定义的tabbar
微信小程序不推荐自定义的tabbar
如果自己开发一个tabbar的组件 在页面中引入的话,由于是跳页的问题,tabbar会闪一下,对客户的体验不好
这里提供一个 tabbar的解决方案:
思路:自定义的tabbar和官方的tabbar同时存在,在页面的onShow时隐藏官方的tabbar
具体实现参考这篇文章https://www.cnblogs.com/yk95/p/9597493.html
做出来大概是这个效果
今天先到这里吧,有空再更了
wepy+vant-weapp踩坑记的更多相关文章
- mpvue-Vant Weapp踩坑记
微信开发者工具:开发.调试和模拟运行微信小程序的最核心的工具了,所以必须安装 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue- ...
- Spark踩坑记——Spark Streaming+Kafka
[TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...
- Spark踩坑记——数据库(Hbase+Mysql)
[TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...
- 【踩坑记】从HybridApp到ReactNative
前言 随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. Hy ...
- Spark踩坑记——共享变量
[TOC] 前言 Spark踩坑记--初试 Spark踩坑记--数据库(Hbase+Mysql) Spark踩坑记--Spark Streaming+kafka应用及调优 在前面总结的几篇spark踩 ...
- Spark踩坑记——从RDD看集群调度
[TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...
- djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记
情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...
- HttpWebRequest 改为 HttpClient 踩坑记-请求头设置
HttpWebRequest 改为 HttpClient 踩坑记-请求头设置 Intro 这两天改了一个项目,原来的项目是.net framework 项目,里面处理 HTTP 请求使用的是 WebR ...
- vue踩坑记
vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...
- 【bug记录】OS Lab4 踩坑记
OS Lab4 踩坑记 Lab4在之前Lab3的基础上,增加了系统调用,难度增加了很多.而且加上注释不详细,开玩笑的指导书,自己做起来困难较大.也遇到了大大小小的bug,调试了一整天. 本文记录笔者在 ...
随机推荐
- metaspliot(一)
来自山丘安全实验室 陈毅 https://www.cnblogs.com/sec875/articles/12243725.html linux下载与更新 apt-get update apt-get ...
- 在php中如何实现cookie即时生效,不用刷新就可以使用
参考:https://www.jianshu.com/p/0468ef5dbf4d 今天在用php设置cookie的时候,发现cookie如果只是赋值一次的话,要手动刷新一下浏览器才能把数据及时更新, ...
- Windows环境,获取当前线程的ID,GetCurrentThreadId
GetCurrentThreadId 打印格式:0x%08lx 头文件:processthreadsapi.h (include Windows Server 2003, Windows Vista, ...
- Linux系统进入救援模式
由于现在很多的服务器都是用的RedHat,CentOS也比较多,这里就介绍CentOS6.6的救援模式. 有很多人的linux在用的时候不小心修改了某个权限,导致系统启动不起来,下面我就来为大家解决一 ...
- Docker安装Alibaba Nacos教程(单机)
SpringCloudAlibaba实战教程系列 阿里巴巴Nacos官方文档 docker:官网 docker:镜像官网:镜像官网可以所有应用,选择安装环境:会给出安装命令,例如:docker pul ...
- RANet : 分辨率自适应网络,效果和性能的best trade-off | CVPR 2020
基于对自适应网络的研究,论文提出了自适应网络RANet(Resolution Adaptive Network)来进行效果与性能上的取舍,该网络包含多个不同输入分辨率和深度的子网,难易样本的推理会自动 ...
- spark系列-2、Spark 核心数据结构:弹性分布式数据集 RDD
一.RDD(弹性分布式数据集) RDD 是 Spark 最核心的数据结构,RDD(Resilient Distributed Dataset)全称为弹性分布式数据集,是 Spark 对数据的核心抽象, ...
- 使用3种协议搭建yum仓库
制作本地yum仓库 开启服务一般要关闭防火墙,selinux之后再reboot ## 方案一:FTP协议------ftp://IP 下载vsftpd---启动vsftpd---ftp://10.0. ...
- CentOS7编译安装NodeJS
概述 在CentOS7下采用编译NodeJS二进制源码包的方式安装NodeJS 下载NodeJS安装包 你可以先下载NodeJS二进制源码安装包文件然后上传到CentOS系统,也可以通过wget命令直 ...
- vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法
当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...