微信小程序-华为商城demo

最近在学习微信小程序，看了很多相关文档，以及一些大佬的文章，决定来练练，下面是仿照华为商城来实现其相应功能。代码没有很高深的地方，适合小程序初学者来相互学习借鉴。

前期准备

• 有html、css、javascript基础,了解es6的一些语法，知道小程序开发步骤，详见微信小程序开发文档

• 如果你想很完整的把一个项目仿照下来，一些图片资源是必不可少的，那么如何获取图片资源呢？这里我看到大佬的一篇文章 两步快速获取微信小程序源码 可以获取到 源码和图片，具体操作步骤就不一一解释了，作者写的很清楚。当然像我这样的菜鸟源码还是看不太懂的，只能用它的一些图片资源。不过有了这些图片我已经相当满足了，哈哈。。。

• 有了图片还需要数据，利用easy-mock制作假数据，可以自己把需要的数据写下来，那么怎么获取这些数据呢，最简单的方法就是直接通过wx.request请求数据，不过一般都会对这个方法进行封装，下面来看看最简单的数据请求

onReady: function () {
    wx.request({
      url:'https://www.easy-mock.com/mock/5b122f9f8cd63333d30a6c8b/mobile',
      success:(res)=>{
         this.setData({
          theme:res.data
         })
        //  console.log(res.data);
      }    
    })
  }
复制代码

关于功能

下面就来说说我的一些功能实现吧

首页效果

首页实现方式很简单，不过需要注意：

• 在html中
  1. scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须..
  2. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号
• 在js中
  1. "toView","scrollTop"必须设置值
  2. "scrollTop": 0,必须为数值

详情页介绍

详情页数据信息比较多，主要实现各个功能的数据绑定

• 功能一

图片滑动时，图片右下角数字会根据图片滑动改变，同时选择颜色时，图片会滑到对应项，主要实现思路：

主要监听swiper属性current的改变，绑定bindchange事件，举例说明

//index.html
<swiper class='sw-tu' circular="true" current="0" bindchange='onSlideChangeEnd'>  
  <swiper-item class="sw-tuone" wx:for="{
    {list.img2}}">  
    <image class='sw-photo' src="{
    {item}}" />  
  </swiper-item>  
</swiper>  

//index.js
data: {  
    index: 1,  
  },  
  onSlideChangeEnd: function (e) {  
    var that = this;  
    that.setData({  
      index: e.detail.current + 1  
    })  
  },  
复制代码

• 功能二

根据你选择的商品属性跳转到订单页，同时计算商品总价，通过url带参数把数据传递到订单页

 <view class="num">
    <text>数量</text>
    <view class="count-content">
         <view class="count-down {
    {grey?'on':''}}" bindtap="minusCount" data-index="{
    {index}}">-</view>
        <view class=