最近用了几个月的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踩坑记的更多相关文章

  1. mpvue-Vant Weapp踩坑记

    微信开发者工具:开发.调试和模拟运行微信小程序的最核心的工具了,所以必须安装 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue- ...

  2. Spark踩坑记——Spark Streaming+Kafka

    [TOC] 前言 在WeTest舆情项目中,需要对每天千万级的游戏评论信息进行词频统计,在生产者一端,我们将数据按照每天的拉取时间存入了Kafka当中,而在消费者一端,我们利用了spark strea ...

  3. Spark踩坑记——数据库(Hbase+Mysql)

    [TOC] 前言 在使用Spark Streaming的过程中对于计算产生结果的进行持久化时,我们往往需要操作数据库,去统计或者改变一些值.最近一个实时消费者处理任务,在使用spark streami ...

  4. 【踩坑记】从HybridApp到ReactNative

    前言 随着移动互联网的兴起,Webapp开始大行其道.大概在15年下半年的时候我接触到了HybridApp.因为当时还没毕业嘛,所以并不清楚自己未来的方向,所以就投入了HybridApp的怀抱. Hy ...

  5. Spark踩坑记——共享变量

    [TOC] 前言 Spark踩坑记--初试 Spark踩坑记--数据库(Hbase+Mysql) Spark踩坑记--Spark Streaming+kafka应用及调优 在前面总结的几篇spark踩 ...

  6. Spark踩坑记——从RDD看集群调度

    [TOC] 前言 在Spark的使用中,性能的调优配置过程中,查阅了很多资料,之前自己总结过两篇小博文Spark踩坑记--初试和Spark踩坑记--数据库(Hbase+Mysql),第一篇概况的归纳了 ...

  7. djangorestframework+vue-cli+axios,为axios添加token作为headers踩坑记

    情况是这样的,项目用的restful规范,后端用的django+djangorestframework,前端用的vue-cli框架+webpack,前端与后端交互用的axios,然后再用户登录之后,a ...

  8. HttpWebRequest 改为 HttpClient 踩坑记-请求头设置

    HttpWebRequest 改为 HttpClient 踩坑记-请求头设置 Intro 这两天改了一个项目,原来的项目是.net framework 项目,里面处理 HTTP 请求使用的是 WebR ...

  9. vue踩坑记

    vue踩坑记 易错点 语法好难啊qwq 不要把'data'写成'date' 在v-html/v-bind中使用vue变量时不需要加变量名 在非vue事件中使用vue中变量时需要加变量名 正确 < ...

  10. 【bug记录】OS Lab4 踩坑记

    OS Lab4 踩坑记 Lab4在之前Lab3的基础上,增加了系统调用,难度增加了很多.而且加上注释不详细,开玩笑的指导书,自己做起来困难较大.也遇到了大大小小的bug,调试了一整天. 本文记录笔者在 ...

随机推荐

  1. metaspliot(一)

    来自山丘安全实验室 陈毅 https://www.cnblogs.com/sec875/articles/12243725.html linux下载与更新 apt-get update apt-get ...

  2. 在php中如何实现cookie即时生效,不用刷新就可以使用

    参考:https://www.jianshu.com/p/0468ef5dbf4d 今天在用php设置cookie的时候,发现cookie如果只是赋值一次的话,要手动刷新一下浏览器才能把数据及时更新, ...

  3. Windows环境,获取当前线程的ID,GetCurrentThreadId

    GetCurrentThreadId 打印格式:0x%08lx 头文件:processthreadsapi.h (include Windows Server 2003, Windows Vista, ...

  4. Linux系统进入救援模式

    由于现在很多的服务器都是用的RedHat,CentOS也比较多,这里就介绍CentOS6.6的救援模式. 有很多人的linux在用的时候不小心修改了某个权限,导致系统启动不起来,下面我就来为大家解决一 ...

  5. Docker安装Alibaba Nacos教程(单机)

    SpringCloudAlibaba实战教程系列 阿里巴巴Nacos官方文档 docker:官网 docker:镜像官网:镜像官网可以所有应用,选择安装环境:会给出安装命令,例如:docker pul ...

  6. RANet : 分辨率自适应网络,效果和性能的best trade-off | CVPR 2020

    基于对自适应网络的研究,论文提出了自适应网络RANet(Resolution Adaptive Network)来进行效果与性能上的取舍,该网络包含多个不同输入分辨率和深度的子网,难易样本的推理会自动 ...

  7. spark系列-2、Spark 核心数据结构:弹性分布式数据集 RDD

    一.RDD(弹性分布式数据集) RDD 是 Spark 最核心的数据结构,RDD(Resilient Distributed Dataset)全称为弹性分布式数据集,是 Spark 对数据的核心抽象, ...

  8. 使用3种协议搭建yum仓库

    制作本地yum仓库 开启服务一般要关闭防火墙,selinux之后再reboot ## 方案一:FTP协议------ftp://IP 下载vsftpd---启动vsftpd---ftp://10.0. ...

  9. CentOS7编译安装NodeJS

    概述 在CentOS7下采用编译NodeJS二进制源码包的方式安装NodeJS 下载NodeJS安装包 你可以先下载NodeJS二进制源码安装包文件然后上传到CentOS系统,也可以通过wget命令直 ...

  10. vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

    当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...