多端开发教程 | 点餐项目讲解：商家主页、菜单页功能讲解(二)原创

我们首先看到商家主页这个页面，商家主页页面的结构也非常简单，就是头部有一个商家主图，中部有一个商家信息，还有一个拨打电话的按钮。以及下面的一些商品栏目。并且下边的是在一个滚动区域里面，我们需要用一个sc will来做这样一个区域。随着滚动区域的滚动，头部导航栏将会有透明度的变化。布局结构使用系统推荐的flex布局。有一点需要注意的是，Flix布局的flex direction默认是。也就是竖着排列的方向，这一点和传统的网页开发是不一样的地方。

另外呢，每一个组件都会有一个displayflex属性。页面的代码呢，是在vet pages。Home home.stml文件。可以在页面的生命周期API ready函数里面。看到有一个this.get data方法。这个方法呢，就是在请求数据。我们跳转到这个方法里面看一下。可以看到这里面有一个get shops get in for接口。这个函数主要使用了一个get方法实现的。而这个get方法呢，又来自于script I EQ这个助手函数里面，我们可以打开看一下。

可以看到这里封装的get请求方法。它那个get的方法又是依赖于IEQ方法来实现的。我们来看一下IQ方法。IQ方法呢，大致就是使用了一个promise，包装了一下API，点阿贾克斯方法。这个文件中主要处理的应用的请求、会话和异常处理的逻辑，相关的业务代码只是可以作为参考。具体的项目中需要根据的实际的会话认证方式、服务端接口模式以及个人的偏好方式去组织。回到主页，我们看到拿到数据之后呢。通过给this.data.shopping for赋值，Shopping for将会拿到服务端提供的商家信息。同样的，我们还看到有一个获取分类数据的一个接口。

和刚才类似，也是拿到分类数据并复制给分类数据的一个数据域，我们可以通过微信小程序来看一下这两个接口的一个具体数据，Get for呢就是获取商家的基本信息，这里面就包含了一些基本的字段。获取分类信息呢，就是看可以看到有三个分类，每个分类下面又有一些商品，与之对应的呢，就是左边的一个结构。我们拿到数据之后呢，赋值给数据，然后在模板里面就可以对他进行绑定了。例如，这里用一个image标签来展示shopping的img字段。同样的，在下面使用的三个字段来展示商家的市区地址信息，所以只要按照接口的相应字段绑定，即可以显示出我们需要的信息。

下边看到商家主页右边有一个红色的小电话按钮，点击之后将会提示是否拨打电话，我们来看这一段的代码。找到小电话的按钮，看到上面绑定的一个Co phone的事件。我们在这里可以看到这个方法的具体实现，因为微信小程序和APP端的调用API的方法不一样。我们暂时使用了一个助手函数，用于区分当前是否是小程序环境，我们可以根据具体的环境来做一些相应的API调用。我们再看到下面的推荐栏目，仔细观察这里的模板和数据，其实可以分为一个主题加上一组菜品这样的循环结构。其中一组菜品呢，又可以再使用一层循环渲染出单品。我们看到代码部分。

这里就是使用了一个for循环来循环分类数据信息。在这个for循环里面使用了一个goods list item组件。打开这个自定义组件。在这里我们可以看到这个组件的传值属性title下面呢，又使用了一层for循环来循环这个组件里面的list，然后做出一些商品名称、商品价格的渲染，每一个单品呢，又绑定了一个inTo Goods detail来实现跳转到商品详情页。我们可以看到，这里使用了一个open window的方法来打开一个新的窗口，并传递当前的一个商品参数。

下面看到页面的头部high的部分。为其动态绑定一个style属性，动态改变它的透明度。而这个透明度呢？取值来自于sc wheel的滚动高度，所以我们为这个SC绑定一个on sc，我们看到on sc函数里面可以获得当前页面的滚动高度，如果在原生端可以发现，随着页面滚动，状态栏的文本颜色也会跟着变化。使用端能力呢进行设置。点击商品可以进入商品详情页。商品详情页，上面展示了商品的基本信息以及一个购物车的数量。当页面加载的时候，可以通过api.pi prime拿到当前页面的参数，并且把数据交给goods这样一个字段。

商品的数量呢？则是存在一个名为cat data的全局数据中。在页面的生命周期函数API ready中拿到相关的一些数据，并给它赋值。商品详情页使用了两个字音组件，一个是good counter计数器。我们看到goods counter的代码。Good counter绑定了一个count字段，还绑定了一个自定义事件。我们进入组件的源码中看一下。这个组件很简单，使用了两个图片和一个文本来显示这样一个效果。其中在两个图片上面绑定了两个动作，用于触发cons这样一个事件。在组件内部实现了这样一个逻辑，在逻辑正确的情况下，向副页面传递了一个count change事件，可以看到这里通过拿到自定义事件传递过来的数据进行一个数据的更改。另外一个组件呢，就是下边这个架构的一个动作条，上面有两个动作，一个是加入购物车，一个是结算。

我们来看到源码部分。使用了一个goods action组件，同样的也是传递了一个good属性和一个count属性，并且自定义了一个I事件。我们看到这个组件的源码。这个组件因为它一般是出现在页面底部，所以我们使用了一个CFL来给它包裹起来。这样做的好处就是，如果下面有虚拟按键，我们就可以自动给他留出高度。

加入购物车和结算两个按钮，分别绑定了两个事件，一个是ADD cut，还有一个是结算。其中结算呢，就是打开一个新的页面，不需要和负极页面通信。而ADD cutt呢，是需要和负极页面通信，所以向上触发一个ad cutt事件，在负页面接收到a cutt事件之后，需要做一些数据的处理。可以通过拿到当前的数据信息，再次把它保存到全局数据中，然后再通过一个set tab bridge来统一设置底部的taar数字的小红点。我们看到这个函数的实现。这个函数里面依然也是区分的小程序和APP端的一个差异，需要传的参就只有两个，一个是index，一个是text。

再看到菜单页，它有一组非常常见的交互。就是右边的商品滚动。左边高量分类也会随之而改变，点击左边的分类，右边也会滚动到相应的区域。其实第一个交互逻辑类似于在开发生涯主页的滚动的触发头部透明度改变的一个逻辑，我们先打开这个页面的源码。可以看到使用了两个scwa来做左右两栏的一个布局。其中第一个效果跟开发商家主页类似，也是通过获取右边的高度来设置左边的指令的高亮效果。所以我们给右边的。

Scwa绑定上一个UN sc view函数。在这里我们通过一定逻辑计算出当前的高量index值，并且在左边给他动态的帮定一个高量的类，可以通过当前的index是否等于当前设置的高量的index，来给他动态设置这样一个类。并做到变色的效果。重点关注第二个逻辑，点击左侧的对应分类，右侧的sc view将会滚动到指定位置。我们先看到点击左侧的分类的函数，这里也是通过一系列计算获得当前应该滚动的高度。这里有一个offset list，可以看到这个数据是来自于compute计算函数。这里就是通过一些计算来得到每一个菜单对应的高度，我们只需要知道它是第几个索引，就可以获取它的高度。

最终拿到一个sc two这样的一个字段。我们在右侧的sc view上面绑定这样一个sc top，如果我们改变这个sc to，它就会自动滚动到相应的高度。