文档章节

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

秀杰
 秀杰
发布于 2016/10/31 09:33
字数 732
阅读 558
收藏 1

##目标

使用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')

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

Page({
    onLoad: function(){
        AV.init({ 
        appId: "SgHcsYqoLaFTG0XDMD3Gtm0I-gzGzoHsz", 
        appKey: "xdv2nwjUK5waNglFoFXkQcxP",
        });
        var query = new AV.Query('Category');
        query.find().then(function (categories) {
            for (var i = 0; i < categories.length; i++) {
                var category = categories[i];
                console.log(category.attributes.title);
            }
        }).catch(function(error) {
            alert(JSON.stringify(error));
        });
    }
})

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

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

##条件查询获得顶级分类

query.equalTo('parent',null);

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

潮流女装 家用电器

##Pointer方式查询二级分类

        // 查询父级分类下的所有子类
        var parent = AV.Object.createWithoutData('Category', '581415bf2e958a005492150b');
        query.equalTo('parent',parent);

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

连衣裙
针织开衫
羽绒服
时尚T恤

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

wxml:

<view class="container">
	<!-- 侧边栏 -->
	<view class="sidebar">
		<text wx:for="{{topCategories}}" wx:key="objectId" bindtap="tapTopCategory" data-object-id="{{item.objectId}}" data-index="{{index}}" class="{{highlight[index]}}">{{item.title}}</text>
	</view>
	<!-- GridView -->
	<view class="gridview">
		<dl wx:for="{{subCategories}}" wx:key="objectId">
			<dt>
				<image src="{{item.avatar.attributes.url}}" mode="scaleToFit" />
			</dt>
			<dd>
				<text>{{item.title}}</text>
			</dd>
		</dl>
	</view>
</view>

wxss

/*页面背景*/
page {
	background-color: #f3f5f7;
}

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

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

/*text块状布局独占一行*/
.sidebar text {
	display: block;
	border: 1px solid #e5e5e5;
	border-top: 0;
	height: 40px;
	line-height: 40px;
	text-align: center;
	color: #232626;
	font-size: 14px;
	background-color: #fff;
}

/*hight light*/
.sidebar text.highlight {
	background-color: #f3f5f7;
	color: #f23131;
	border-right: 0;
}

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

/*向左流动*/
.gridview dl {
	float: left;
	margin: 5px;
}

/*图片*/
.gridview dt image {
	width: 60px;
	height: 60px;
}

/*文字*/
.gridview dd text {
	color: #6c6c6c;
	font-size: 12px;
	text-align: center;
	display: block;
	line-height: 20px;
}

js:

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

Page({
    data: {
        topCategories: [],
        subCategories: [],
        highlight:['highlight','','']
    },
    onLoad: function(){
        this.getCategory(null);
        // hard code to read default category,maybe this is a recommend category later.
        this.getCategory(AV.Object.createWithoutData('Category', '581415bf2e958a005492150b'));
    },
    tapTopCategory: function(e){
        // 拿到objectId,作为访问子类的参数
        var objectId = e.currentTarget.dataset.objectId;
        // 查询父级分类下的所有子类
        var parent = AV.Object.createWithoutData('Category', objectId);
        this.getCategory(parent);
        // 设定高亮状态
        var index = parseInt(e.currentTarget.dataset.index);
        this.setHighlight(index);

    },
    getCategory: function(parent){
        var that = this;
        var query = new AV.Query('Category');
        // 查询顶级分类,设定查询条件parent为null
        query.equalTo('parent',parent);
        query.find().then(function (categories) {
            if (parent){
                that.setData({
                    subCategories: categories
                });
            }else{
                that.setData({
                    topCategories: categories
                });
            }
        }).catch(function(error) {
        });
    },
    setHighlight: function(index){
        var highlight = [];
        for (var i = 0; i < this.data.topCategories; i++) {
            highlight[i] = '';
        }
        console.log(index);
        highlight[index] = 'highlight';
        this.setData({
            highlight: highlight
        });
    }
})

源码下载:关注下方的公众号->回复数字1007

对小程序开发有趣的朋友关注公众号: huangxiujie85,QQ群: 581513218,微信: small_application,陆续还将推出更多作品。

公众号

© 著作权归作者所有

秀杰
粉丝 153
博文 94
码字总数 50956
作品 0
瑞安
iOS工程师
私信 提问
手游开发如何选择后端服务

【 玩转 LeanCloud 】开发者经验分享: 作为一个通过 LeanCloud 入门后端开发的小白,一年多的开发历程让我收获满满。多个项目也在 LeanCloud 可靠的服务支撑下取得了不错的发展,其中用户量...

eapxuo
2017/11/27
0
0
超详细步骤 | 如何用小程序 SDK 实现电商评价模块

【 玩转 LeanCloud 】开发者经验分享: 在商城系统中给商品添加评价是一种非常典型的需求,我下面要来演示一下如何借助 LeanCloud 的小程序 SDK 来快速完整地实现这个需求,包括如何处理用户...

LeanCloud
2017/12/05
357
0
【专栏精选】实战:使用LeanCloud上传玩家分数,实现排行榜

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 https://blog.csdn.net/zhenghongzhi6/article/details/91362256 本文节选自洪流学堂公众号技...

关尔Manic
06/10
0
0
720 智能硬件与 LeanCloud 云端的默契协作

【 玩转 LeanCloud 】开发者经验分享: 谢子超,720技术负责人,从业十余年,一直负责软件开发工作。 我们的产品是与监控和改善室内空气质量相关的智能硬件,我们使用 LeanCloud 平台已经有 ...

eapxuo
2017/11/24
0
0
如何不浪费青春,让游戏快速上架 Steam

【 玩转 LeanCloud 】开发者经验分享: 我们做的是 VR 社交产品, 叫《VR Triber》,目前已在 Steam 上线。客户端采用 Unity 开发,后端数据存储、实时通信、推送和云服务基于 LeanCloud 开发...

eapxuo
2017/12/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Gradle 的项目导入到 IntelliJ 后子项目源代码不能导入

在一个 Gradle 项目中,有若干子项目。 当 Gradle 到如后,子项目不能被 IntelliJ 识别代码。 如下图的这个代码就没有被自动识别。 这个有可能是因为你的这个子项目没有被添加到父项目中。 ...

honeymoose
5分钟前
2
0
苹果cms下载地址及模板地址

https://github.com/magicblack/maccms10 程序下载: https://www.lanzous.com/b204882 教程下载: https://www.lanzous.com/b256378 模板下载: https://www.lanzous.com/b355667 插件下载:......

chenhongjiang
6分钟前
1
0
Java中使用HttpPost上传文件以及HttpGet进行API请求(包含HttpPost上传文件)

一、HttpPost上传文件 public static String getSuffix(final MultipartFile file){ if(file == null || file.getSize() == 0){ return null; } String......

codeobj
7分钟前
1
0
在Word中怎样批量删除空行,这些点主要注意

在工作中经常接触的办公软件就是Word了,熟练使用Word中的技能是准时下班的保证。这就要求我们对Word中的各项技能都熟练于心,很多朋友诉苦Word中的排版不熟悉,每次写一篇文章排版都要花费很...

干货趣分享
13分钟前
2
0
终端-Linux命令之非交互SSH密码验证-Sshpass

> Sshpass是使用SSH所谓的“交互式键盘密码身份验证”以非交互方式执行密码身份验证的工具 通俗来说就是 使用ssh密码登录 是需要在连接时手动输入密码的,没办法明文连接,如下图,需要交互的...

极客收藏夹
16分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部