一个商城小程序的踩坑之路

发布时间:2021-09-11 10:16:28 作者:厚德网络 来源:本站 浏览量:(86) 点赞:(116) 收藏:(116)
摘要:菏泽厚德网络专业网站建设,网站设计,网站制作,网页设计,小程序,app开发公司,专注于菏泽企业互联网品牌营销策划,已为上千家服务,专业团队,值得信赖!

  这几天捣鼓了一个商城小程序(copy了好几个商城的UI),利用原生组件写了几个页面,也碰到了一些痛点,在此做一个简单的记录。几个简单的界面如下:

首页商城
分类
商品详情
购物车
个人中心

痛点

  1. 原生的方式不能用sass。因为用vue习惯了用sass写样式,但小程序不能直接使用sass等预处理器,不过好像用了mpvue、wepy等框架可以实现用css预处理器(还未尝试过,试过了再更新)。
  2. 去掉标题栏必须全局统一去掉。本来以为在页面的json文件里可以覆盖,结果发现并不起作用,所以统一去掉之后,如果你在某些页面又需要标题栏只能自己用view模拟一个(如我这里的商品详情页),希望以后官方可以人性化一点。

  "navigationStyle": "custom" //只在app.json中生效

  3. movable-view貌似有bug。在商城首页的精选专题中我尝试了用 movable-view实现横向滚动效果,后来发现,整个页面也会随之滚动,在微信小程序社区里也有人遇到这个问题,不过没人回答,不知道是自己的问题还是官方的bug,后来就改用scroll-view实现了。

精选专题

  4. 无tab切换组件(如下所示)。虽说tarbar把position设置为top是一个tab,但这种必须在最顶部,如果要在中间某个内容区使用就只能自己实现了。

tab示例

  

  5. 无法动态增加、删除节点。本来想实现一个加入购物车的动画,比如点击了加入按钮,商品图片会掉下来,慢慢变成一个圆形,落在tarbar的购物车上。结果发现不能直接删减节点,并且tabBar的位置好像也无法获取到,在开发者工具中发现其并没有渲染出来(希望知道的小伙伴告知一下,先谢谢了)。

  6. background-img只能用于网络图片或者是base64转码后的图片,一般的本地图片无法使用,如果要用本地图片作为背景图,可以使用image加绝对定位的方式。

  7. 当text组件和view组件中的文字全英文或中英混合输入时(全中文时正常)不换行。解决方案:

  word-break: break-all

  但可能会出现切断单词的情况,如将‘yang’分解为‘ya’和‘ng’放在两行显示,对此尚无很好的对策。

  8. 联系客服。有两种按钮方式可以实现这个功能,会有一个默认图标,去不掉,如果想自定义样式可以使用

厚德网络微信

扫一扫,加微信



感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

您身边的【网站建设专家】

搜索千万次不如咨询1次

主营项目:网站建设,营销型网站,手机网站,响应式网站,SEO优化,小程序开发

立即咨询 155-6200-1135