最近用了几个月的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. 2019-2020-1 20199328《Linux内核原理与分析》第七周作业

    分析Linux内核创建一个新进程的过程 2019/10/28 18:34:58 笔记部分 首先是查看进程描述符(用来描述进程,其代码比较庞大)的一些内容 系统调用回顾 fork.vfork.clone ...

  2. 一篇文章让你彻底弄懂SSL/TLS协议

    目录 SSL/TLS的应用 TLS协议的架构 握手协议 主密码和预备主密码 TLS记录协议 一篇文章让你彻底弄懂SSL/TLS协议 SSL/TLS是一种密码通信框架,他是世界上使用最广泛的密码通信方法 ...

  3. CodeForces 674C Levels and Regions

    #include<bits/stdc++.h> using namespace std; const int maxn=2e5+5; int N,K,head,tair; int q[ma ...

  4. MATLAB 之MATLAB2016b 安装破解教程

    MATLAB2016b 安装破解教程 安装包: 链接: https://pan.baidu.com/s/1RNwRGRjR-bHQEq1OMJ57OA 提取码: r663 步骤: (1)R2016b_ ...

  5. HTML JavaScript 基础(下)

    一.JavaScript 函数 1.普通函数-有函数名 function func(){ } 2.匿名函数-无函数名 setInterval(function(){ console.log(123); ...

  6. JavaScript HTMlL DOM对象(上)

    Dom:document.相当于把所有的html文件,转换成了文档对象. 之前说过:html-裸体的人:css-穿上衣服:js-让人动起来. 让人动起来,就得先找到他,再修改它内容或属性. 找到标签 ...

  7. PAT A1023

    简单的大数问题,long long并不能容纳21位数字,这是刚开始没有注意到的 #include<iostream> #include<stdlib.h> #include&l ...

  8. js的call方法

    obj1.method.call(obj2,arg1,arg2,arg3...) call方法的作用就是 把obj1的方法放到obj2对象上使用 arg1,arg2....是参数,传给mehtod的哟 ...

  9. 更改 vsftpd 的端口号

    2019独角兽企业重金招聘Python工程师标准>>> vsftpd启动后,默认的ftp端口是21,现在我想把ftp端口改成 801 ,修改后能保证用户上传下载不受影响 1.编辑 / ...

  10. tr标签使用hover的box-shadow效果不生效

    先说问题: 这是大致的HTML结构 <table cellpadding="0" cellspacing="0"> <thead> &l ...