阅读 924

微信小程序遇到的坑,看你遇到过没?

微信小程序的项目简介

微信公众账号不管对于个人还是企业都是避不开的话题,对于新入门的前端来说,需要掌握基本ES5+ES6,H5,CSS3的布局等。废话不多说了,通过做一个完整的电商小程序总结出来一些小坑以及解决办法,希望对新人有帮助,大神勿喷。。。

一个主体只能挂10个小程序

这个意思是一个注册公司最多关联10个相同公司的10个小程序或者3个不同公司的小程序,一开始是5个,现在变成10个,基本可以满足绝大部分小伙伴的需求了,

但是如果公司的流程管理系统前端需要借助小程序的话,那就要注意了,之前我们内部系统的测量,配送,安装,售后,支付,B端下单等等全都需要单独的小程序支持,5个完全不够,必须合并小程序(多个小程序公用一个APPID),导致很多代码必须重新写,简直是坑惨了。

navigate 超过5个页面会报内存溢出

对于新手小伙伴喜欢用navigateTo,当页面的连续跳转都使用navigateTo的话,编译器就会报错,因为一开始测量都是使用模拟器调试的,查了很多文档都无解(不晓得腾讯修复了没),同样的,只能修改代码,使用navigateTo跳转的,要跳回来的必须使用navigateBack,不相关的页面(除开tabbar)跳转redireactTo,同时避免出现页面管理太多。

textarea的 index 层级最高,导致遮罩不到

这个就直接上图吧,当需要输入足够多的内容,只能选择textarea

如果遇到强迫症的小伙伴请选择input

多图片上传的问题

小程序只允许一次提交一张图,其实这个很简单,把多个图用数组包起来,在递归调用,直接上代码,很简单就不多说了。

 var that = this,
   i = data.i ? data.i : 0,//当前上传的哪张图片
   success = data.success ? data.success : 0,//上传成功的个数
   fail = data.fail ? data.fail : 0;//上传失败的个数
 wx.uploadFile({
   url: data.url,
   filePath: data.path[i],
   name: 'file',//这里根据自己的实际情况改
   formData: data.formData,//这里是上传图片时一起上传的数据
   success: (resp) => {
     success++;//图片上传成功,图片上传成功的变量+1
   },
   fail: (res) => {
     fail++;//图片上传失败,图片上传失败的变量+1
   },
   complete: () => {
     i++;//这个图片执行完上传后,开始上传下一张
     if (i == data.path.length) {   //当图片传完时,停止调用          
       data.callback(i);
     } else {//若图片还没有传完,则继续调用函数
       data.i = i;
       data.success = success;
       data.fail = fail;
       that.uploadimg(data);
     }
   }
 });
}
复制代码

关于审核与上线问题

小伙伴都晓得,代码要先提交审核的,并且一般会选择晚上,话说腾讯的审核是全自动的,然而并非如此,经过大半年的分时段提交经验,小伙伴选择下午的2-3点提交,一个小时审核通过的概率很大,通过以后什么时候覆盖就无所谓了,最好是选择访问人少的时候,但是也一定,因为小程序的缓存大概只有5分钟5-30分,这个看自己了。 还有一个点,就是有些时候提交代码需要填写测试账号,所以需要后台准备一些,如果有敏感的个人信息数据那就要格外注意了。

总结

其实小程序开发学习的成本不难,仔细学习2天就能快速上手。小程序开发就只有2个难点 一个登录态+支付,如果在没有后台的协助下,单纯的前端小伙伴整明白还是需要花点时间。 后续会跟大家分享出来。文笔不好,希望能帮助到你。

文章分类
前端
文章标签