商场小程序的挖坑方式

前言

该公司一直在使用vue作为一个项目。最近，它变成了一个小程序制造商，并用它来弥补它。研究发现，无论是数据驱动还是基于组件的开发，小程序都与vue非常相似。它还定义了诸如v-if和v-for之类的指令。感觉那些做过vue的人可以无缝切换到小程序开发（github地址在文章末尾提供）。

界面

最近几天，我创建了一个商城小程序（复制了几个商城UI），使用本地组件编写了几个页面，也遇到了一些痛点。这是新工作的热身。几个简单的界面如下：

形象

形象

形象

形象

形象

痛点

本机模式不能使用sass。因为vue习惯于使用sass编写风格，但小程序不能直接使用sass和其他预处理器，但mpvue、wepy和其他框架似乎可以用来实现css预处理器（尚未尝试，但在尝试后更新）。

必须全局删除标题栏。我以为它可以在页面的json文件中被覆盖，但它没有起作用。因此，在统一删除之后，如果您需要某些页面上的标题栏，则只能使用视图来模拟一个（例如我的产品详细信息页面）。我希望这位官员将来能更加人道。

“navigationStyle”：“custom”//仅在app.json中生效

3.可移动视图似乎有问题。在商城首页的选定主题中，我尝试使用可移动视图来实现水平滚动效果。后来，我发现整个页面也会随之滚动。微信小程序社区的一些人也遇到了这个问题，但没有人回答。我不知道这是我自己的问题还是官方的错误。后来，我使用滚动视图来实现它。

形象

4.无接线片开关组件（如下所示）。虽然tarbar将位置设置为顶部，但它是一个选项卡，但必须位于顶部。如果你想在中间的某个内容区域使用它，你只能自己实现。

形象

形象

5.无法动态添加或删除节点。它最初旨在实现添加到购物车的动画。例如，当您单击“添加”按钮时，产品图像将脱落并慢慢变成一个圆圈，落在tarbar的购物车上。发现无法直接删除该节点，其位置似乎不可用。在开发人员的工具中发现它没有呈现（请让我知道，谢谢）。

讲述事件后发生的事情

这个小项目会不断更新，我会让它更完美。稍后将添加一些样式、组件分离、请求封装等。让我们暂时这样做。如果你将来有任何问题，你可以把它们填上。我希望你明天过得愉快。

我接触小程序才几天，我有点发抖。如果有什么不对的地方，我希望你们能指出并一起成长。

项目github地址：