网站策划制作公司 北京／有域名后如何建网站

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

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

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

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

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

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

• 在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事件，举例说明

• 功能二

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

• 功能三

可以点击顶部评价进入评论页面，也可以点击商品页中的用户评价进入，评论页主要实现上拉加载功能

cuurentpage即为当前请求数据时第几页，每请求一次currentPage++，totalpage表示总页数，hasMore用于显示暂时没有评论了，noLoading由于显示上拉加载更多评论。当我们网络请求数据成功后，将currentPage设为1，当currentPage<totalPage时，noLoading设为false，显示上拉加载更多数据，当currentPage>totalPage是显示没有更多数据可以加载,noLoading为true，hasMore为false显示没有更多评论。

利用表单实现对输入数据的提交，注意表单每项都要有name属性才能获取到表单数据，同时提交表单时对各项数据进行校验

在订单列表项可以点击右边的修改项，进入修改列表，在修改项中通过订单列表中传递过来的数据可以选择修改、删除或者保存地址

关于地区选择，利用picker组件实现

订单列表项需要判断是从哪个选项跳转过来的，如果是删除项，则需要获取删除项的下标，利用数组的splice方法删除如果是从修改项过来，同样需要获取的修改项的下标，同时修改的数据也需要传递过来

• 关于页面传值，方法各异，具体实例请点击这里

  1. wx.navigateTo和wx.redirectTo通过url带参传递数据
  2. wx.switchTab进行跳转，但是switchTab不可以传递url参数，后面提供了wx.reLaunch函数。
  3. wx.getStorage获取本地缓存数据
  4. 在app.js配置全局数据app.globalData获取全局数据
  5. wx.request获取第三方服务器数据
  6. 通过event.currentTarget.dataset获取我们自定义的变量
  7. 接收上一页面传递过来的数据的页面通过onLoad事件的options参数接收数据

• 数据缓存 实例请点击这里

  1. wx.setStorage（wx.setStorageSync）来设置缓存
  2. wx.getStorage(key) 获取缓存
  3. wx.clearStorage() 清理本地数据缓存
  4. wx.removeStorage(OBJECT) 从本地缓存中异步移除指定 key
  5. localStorage 是永久存储的

小程序还有很多不足，见谅哈~

写得不好，也留个赞呗