小程序教程

基于LeanCloud实现访问网络与数据存储

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

目标

使用LeanCloud JS_SDK读取电商系统的商品分类

准备

在https://www.leancloud.cn上注册帐号，创建仓库，建Category表，建title字段

无限级分类建表结构

建立字段parent，类型为Pointer，指向Category对象

下载JS_SDK

https://unpkg.com/leancloud-storage@2.0.0-beta.2/dist/av-weapp.js

文档出处：https://leancloud.cn/docs/weapp.html

安装

将上面的js文件保存此util目录

使用

在category.js中引入

const AV = require('../../utils/av-weapp.js')

连接数据仓库，取查询所有分类

  1. Page({
  2.     onLoad: function(){
  3.         AV.init({
  4.         appId: "SgHcsYqoLaFTG0XDMD3Gtm0I-gzGzoHsz",
  5.         appKey: "xdv2nwjUK5waNglFoFXkQcxP",
  6.         });
  7.         var query = new AV.Query('Category');
  8.         query.find().then(function (categories) {
  9.             for (var i = 0; i < categories.length; i++) {
  10.                 var category = categories[i];
  11.                 console.log(category.attributes.title);
  12.             }
  13.         }).catch(function(error) {
  14.             alert(JSON.stringify(error));
  15.         });
  16.     }
  17. })
复制代码

这时控件台可以看到输出category所有分类

潮流女装 连衣裙 针织开衫 羽绒服 时尚T恤 家用电器 电视 空调

条件查询获得顶级分类
  1. query.equalTo('parent',null);
复制代码

这时控件台可以看到输出category顶级分类

潮流女装 家用电器

Pointer方式查询二级分类
  1.         // 查询父级分类下的所有子类
  2.         var parent = AV.Object.createWithoutData('Category', '581415bf2e958a005492150b');
  3.         query.equalTo('parent',parent);
复制代码

这时控件台可以看到输出category潮流女装分类下的所有子类

  1. 连衣裙
  2. 针织开衫
  3. 羽绒服
  4. 时尚T恤
复制代码

配合布局与js文件，实现分类页面

wxml:

  1. <view class="container">
  2.     <!-- 侧边栏 -->
  3.     <view class="sidebar">
  4.         <text wx:for="{{topCategories}}" wx:key="objectId" bindtap="tapTopCategory" data-object-id="{{item.objectId}}" data-index="{{index}}" class="{{highlight[index]}}">{{item.title}}</text>
  5.     </view>
  6.     <!-- GridView -->
  7.     <view class="gridview">
  8.         <dl wx:for="{{subCategories}}" wx:key="objectId">
  9.             <dt>
  10.                 <image src="{{item.avatar.attributes.url}}" mode="scaleToFit" />
  11.             </dt>
  12.             <dd>
  13.                 <text>{{item.title}}</text>
  14.             </dd>
  15.         </dl>
  16.     </view>
  17. </view>
复制代码

wxss

  1. /*页面背景*/
  2. page {
  3.     background-color: #f3f5f7;
  4. }

  6. /*容器总体布局为左右两列*/
  7. .container {
  8.     display: flex;
  9.     flex-direction: row;
  10.     justify-content: space-between;
  11. }

  13. /*侧边栏顶级分类给予固定宽度*/
  14. .sidebar {
  15.     width: 120px;
  16.     border-top: 1px solid #e5e5e5;
  17.     height: 568px;
  18. }

  20. /*text块状布局独占一行*/
  21. .sidebar text {
  22.     display: block;
  23.     border: 1px solid #e5e5e5;
  24.     border-top: 0;
  25.     height: 40px;
  26.     line-height: 40px;
  27.     text-align: center;
  28.     color: #232626;
  29.     font-size: 14px;
  30.     background-color: #fff;
  31. }

  33. /*hight light*/
  34. .sidebar text.highlight {
  35.     background-color: #f3f5f7;
  36.     color: #f23131;
  37.     border-right: 0;
  38. }

  40. /*网格布局子类九宫格分布*/
  41. .gridview {
  42.     width: 100%;
  43.     background-color: #fff;
  44.     margin-left: 5px;
  45. }

  47. /*向左流动*/
  48. .gridview dl {
  49.     float: left;
  50.     margin: 5px;
  51. }

  53. /*图片*/
  54. .gridview dt image {
  55.     width: 60px;
  56.     height: 60px;
  57. }

  59. /*文字*/
  60. .gridview dd text {
  61.     color: #6c6c6c;
  62.     font-size: 12px;
  63.     text-align: center;
  64.     display: block;
  65.     line-height: 20px;
  66. }
复制代码

js:

  1. const AV = require('../../utils/av-weapp.js')

  3. Page({
  4.     data: {
  5.         topCategories: [],
  6.         subCategories: [],
  7.         highlight:['highlight','','']
  8.     },
  9.     onLoad: function(){
  10.         this.getCategory(null);
  11.         // hard code to read default category,maybe this is a recommend category later.
  12.         this.getCategory(AV.Object.createWithoutData('Category', '581415bf2e958a005492150b'));
  13.     },
  14.     tapTopCategory: function(e){
  15.         // 拿到objectId，作为访问子类的参数
  16.         var objectId = e.currentTarget.dataset.objectId;
  17.         // 查询父级分类下的所有子类
  18.         var parent = AV.Object.createWithoutData('Category', objectId);
  19.         this.getCategory(parent);
  20.         // 设定高亮状态
  21.         var index = parseInt(e.currentTarget.dataset.index);
  22.         this.setHighlight(index);

  24.     },
  25.     getCategory: function(parent){
  26.         var that = this;
  27.         var query = new AV.Query('Category');
  28.         // 查询顶级分类，设定查询条件parent为null
  29.         query.equalTo('parent',parent);
  30.         query.find().then(function (categories) {
  31.             if (parent){
  32.                 that.setData({
  33.                     subCategories: categories
  34.                 });
  35.             }else{
  36.                 that.setData({
  37.                     topCategories: categories
  38.                 });
  39.             }
  40.         }).catch(function(error) {
  41.         });
  42.     },
  43.     setHighlight: function(index){
  44.         var highlight = [];
  45.         for (var i = 0; i < this.data.topCategories; i++) {
  46.             highlight[i] = '';
  47.         }
  48.         console.log(index);
  49.         highlight[index] = 'highlight';
  50.         this.setData({
  51.             highlight: highlight
  52.         });
  53.     }
  54. })
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习
l