基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库开发实战（一）

时间 2021-01-25

标签 javascript css 前端 vue java android ios 编程 json 小程序栏目 JavaScript 繁體版

原文原文链接

基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库开发实战（一）

1. 优宝库介绍

　　优宝库是基于阿里妈妈、淘宝联盟淘宝商品Api，前端使用HBuilderX + UniApp + ColorUi,后端采用UniCloud 精选淘宝商品进行推荐的App程序。下一步将实现H五、微信小程序，支付宝小程序等不一样平台。
　　HBuilder 是DCloud（数字天堂）推出一款支持HTML5的Web开发的免费开发工具。“快"，是HBuilder的最大优点，经过完整的语法提示和代码输入法、代码块及不少配套，HBuilder能大幅提高HTML、js、css的开发效率。HBuilderX是HBuilder的下一代版本。
　　UniApp 是一个使用 Vue.js 开发全部前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各类小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
　　ColorUi 是一款适应于H五、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库。
　　UniCloud 是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台。javascript

1.1. 首页

1.2. 类目

1.3. 搜索

1.4. 搜索结果

1.5. 商品详情

　 2. App开发介绍

　　App定义两个选项：首页及个人选项。首页采用自定义导航栏，App名称+搜索框+App分享功能，实现淘宝官方活动轮播、商品类目、优惠券类及目商品推荐。css

　　2.1. tab选项

　　tab 选项在pages.json 文件中进行配置前端

"tabBar":{
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/home/default",
			"iconPath": "static/tabbar/home.png",
			"selectedIconPath": "static/tabbar/home_cur.png",
			"text": "首页"
		}, {
			"pagePath": "pages/myself/default",
			"iconPath": "static/tabbar/myself.png",
			"selectedIconPath": "static/tabbar/myself_cur.png",
			"text": "个人"
		}]
	}

　2.2. 自定义导航栏

　　首先在App.vue中获取导航位置vue

uni.getSystemInfo({
　　success: function(e) {
    // #ifndef MP
    vue.prototype.statusBar = e.statusBarHeight;
    if (e.platform == 'android') {
        vue.prototype.customBar = e.statusBarHeight + 50;
    } else {
        vue.prototype.customBar = e.statusBarHeight + 45;
    };
    // #endif
            
    // #ifdef MP-WEIXIN
    vue.prototype.statusBar = e.statusBarHeight;
    let clientRect = wx.getMenuButtonBoundingClientRect();
    vue.prototype.clientRect = clientRect;
    vue.prototype.customBar = clientRect.bottom + clientRect.top - e.statusBarHeight;
    // #endif        
            
    // #ifdef MP-ALIPAY
    vue.prototype.statusBar = e.statusBarHeight;
    vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight;
    // #endif
}
})

首页中使用自定义组件，设置App名称、搜索框及分享功能按钮。

<mui-header v-bind:isBack="false" v-bind:isShare="false">
    <block slot="left">
           <text class="text-bold">优宝库</text>
    </block>
    <block slot="right">
        <text class="cuIcon-add text-bold"></text>
    </block>
</mui-header>

　2.3. 淘宝官方活动轮播java

<!--轮播-->
            <swiper class="screen-swiper square-dot" v-bind:indicator-dots="true" v-bind:circular="true"
             v-bind:autoplay="true" interval="5000" duration="500">
                <swiper-item v-for="(item,index) in activitys" :key="index" @click="openActivity(item)">
                    <image v-bind:src="item.ImageUrl" mode=" aspectFill"></image>
                </swiper-item>
            </swiper>

　2.4. 商品类目

<!--栏目-->
            <view class="cu-list grid col-5 no-border">
                <view class="cu-item text-red" @click="openMaterialName('鞋包配饰')">
                    <view class="cuIcon-pic"></view>
                    <text>鞋包配饰</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('母婴')">
                    <view class="cuIcon-goods"></view>
                    <text>母婴</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('女装')">
                    <view class="cuIcon-goods"></view>
                    <text>女装</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('美妆个护')">
                    <view class="cuIcon-pic"></view>
                    <text>美妆个护</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('食品')">
                    <view class="cuIcon-pic"></view>
                    <text>食品</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('家居家装')">
                    <view class="cuIcon-goods"></view>
                    <text>家居家装</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('男装')">
                    <view class="cuIcon-pic"></view>
                    <text>男装</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('数码家电')">
                    <view class="cuIcon-goods"></view>
                    <text>数码家电</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('内衣')">
                    <view class="cuIcon-pic"></view>
                    <text>内衣</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('运动户外')">
                    <view class="cuIcon-pic"></view>
                    <text>运动户外</text>
                </view>
            </view>

　2.5. 优惠券类目

<!--栏目-->
            <view class="cu-list grid col-4 no-border">
                <view class="cu-item text-red" @click="openMaterialId('大额券')">
                    <view class="cuIcon-choiceness"></view>
                    <text>大额券</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('品牌券')">
                    <view class="cuIcon-selection"></view>
                    <text>品牌券</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('好券直播')">
                    <view class="cuIcon-pic"></view>
                    <text>好券直播</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('母婴')">
                    <view class="cuIcon-pic"></view>
                    <text>母婴</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('今日爆款')">
                    <view class="cuIcon-rank"></view>
                    <text>今日爆款</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('特惠')">
                    <view class="cuIcon-pic"></view>
                    <text>特惠</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('有好货')">
                    <view class="cuIcon-goods"></view>
                    <text>有好货</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('潮流范')">
                    <view class="cuIcon-pic"></view>
                    <text>潮流范</text>
                </view>
            </view>

　2.6. 商品推荐

<view class="cu-bar solid-bottom bg-white margin-top">
                <view class="action">
                    <text class="cuIcon-title text-red">掌柜推荐</text> 
                </view>
                <view class="action">
                    <text class="cuIcon-more"></text>
                </view>
            </view>
            <view class="cu-list grid col-2 no-border">
                <mui-material v-for="(item,index) in materials"
                    v-bind:Id="item._id"
                    :ItemId="item.ItemId" 
                    :PictUrl="item.PictUrl" 
                    :Title="item.Title"
                    :ZKFinalPrice="item.ZKFinalPrice"
                    :Volume="item.Volume"
                    :CouponAmount="item.CouponAmount"
                    :Price="item.Price">
                </mui-material>
            </view>

　首页完整代码

<template>
    <view>
        <mui-header v-bind:isBack="false" v-bind:isShare="false">
            <block slot="left">
                <text class="text-bold">优宝库</text>
            </block>
            <block slot="right">
                <text class="cuIcon-add text-bold"></text>
            </block>
        </mui-header>
        
        <scroll-view scroll-y class="page">
            <!--轮播-->
            <swiper class="screen-swiper square-dot" v-bind:indicator-dots="true" v-bind:circular="true"
             v-bind:autoplay="true" interval="5000" duration="500">
                <swiper-item v-for="(item,index) in activitys" :key="index" @click="openActivity(item)">
                    <image v-bind:src="item.ImageUrl" mode=" aspectFill"></image>
                </swiper-item>
            </swiper>
            <!--栏目-->
            <view class="cu-list grid col-5 no-border">
                <view class="cu-item text-red" @click="openMaterialName('鞋包配饰')">
                    <view class="cuIcon-pic"></view>
                    <text>鞋包配饰</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('母婴')">
                    <view class="cuIcon-goods"></view>
                    <text>母婴</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('女装')">
                    <view class="cuIcon-goods"></view>
                    <text>女装</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('美妆个护')">
                    <view class="cuIcon-pic"></view>
                    <text>美妆个护</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('食品')">
                    <view class="cuIcon-pic"></view>
                    <text>食品</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('家居家装')">
                    <view class="cuIcon-goods"></view>
                    <text>家居家装</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('男装')">
                    <view class="cuIcon-pic"></view>
                    <text>男装</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('数码家电')">
                    <view class="cuIcon-goods"></view>
                    <text>数码家电</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('内衣')">
                    <view class="cuIcon-pic"></view>
                    <text>内衣</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialName('运动户外')">
                    <view class="cuIcon-pic"></view>
                    <text>运动户外</text>
                </view>
            </view>
            <!--栏目-->
            <view class="cu-list grid col-4 no-border">
                <view class="cu-item text-red" @click="openMaterialId('大额券')">
                    <view class="cuIcon-choiceness"></view>
                    <text>大额券</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('品牌券')">
                    <view class="cuIcon-selection"></view>
                    <text>品牌券</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('好券直播')">
                    <view class="cuIcon-pic"></view>
                    <text>好券直播</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('母婴')">
                    <view class="cuIcon-pic"></view>
                    <text>母婴</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('今日爆款')">
                    <view class="cuIcon-rank"></view>
                    <text>今日爆款</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('特惠')">
                    <view class="cuIcon-pic"></view>
                    <text>特惠</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('有好货')">
                    <view class="cuIcon-goods"></view>
                    <text>有好货</text>
                </view>
                <view class="cu-item text-red" @click="openMaterialId('潮流范')">
                    <view class="cuIcon-pic"></view>
                    <text>潮流范</text>
                </view>
            </view>
            <!--今日爆款-->
            <view class="cu-bar solid-bottom bg-white margin-top">
                <view class="action">
                    <text class="cuIcon-title text-red">掌柜推荐</text> 
                </view>
                <view class="action">
                    <text class="cuIcon-more"></text>
                </view>
            </view>
            <view class="cu-list grid col-2 no-border">
                <mui-material v-for="(item,index) in materials"
                    v-bind:Id="item._id"
                    :ItemId="item.ItemId" 
                    :PictUrl="item.PictUrl" 
                    :Title="item.Title"
                    :ZKFinalPrice="item.ZKFinalPrice"
                    :Volume="item.Volume"
                    :CouponAmount="item.CouponAmount"
                    :Price="item.Price">
                </mui-material>
            </view>
            <!--底部空间-->
            <view class="cu-tabbar text-center padding margin-bottom" style="vertical-align: middle;height: 32px;">
                <navigator url="/pages/material/default?name=高佣榜" class="text-blue">查看更多</navigator>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    var mySelf;
    export default {
        data() {
            return {
                activitys:[],
                materials:[]
            }
        },
        onLoad(){
            mySelf = this;
            uni.getStorage({key:"activitys",success(e) {
                mySelf.activitys = JSON.parse(e.data);
            }});
            uni.getStorage({key:"materials",success(e) {
                mySelf.materials = JSON.parse(e.data);
            }});
        },
        methods: {
            openSearch(){
                uni.navigateTo({
                    url:"/pages/search/default"
                });
            },
            openFullVideo()
            {
                uni.navigateTo({
                    url:"/pages/index/fullVideo?v=20210102"
                });
            },
            openActivity(item){
                console.log(item);
                uni.showLoading({
                    title:"获取信息，请稍候..."
                });
                uniCloud.callFunction({
                    name: "tbk_DefaultActivity",
                    data: {
                        "keyValue":item._id
                    }
                }).then((res) => {
                    uni.hideLoading();
                    console.log(res);
                    if(res.success != true)
                    {
                        uni.showModal({
                            content: `加载数据失败！`,
                            showCancel: false
                        });
                        return;
                    }
                    let shortUrl = res.result.data.ShortUrl;
                    if (plus.os.name == 'Android') {
                        plus.runtime.openURL(shortUrl
                        , function (res) {}, 'com.taobao.taobao');
                    }else{
                        shortUrl=shortUrl.split('//')[1]
                        plus.runtime.openURL('taobao://'+shortUrl
                        , function (res) {}, 'taobao://');
                    }
                }).catch((err) => {
                    uni.hideLoading();
                    console.error(err);
                    uni.showModal({
                        content: `读取数据失败，错误信息为：${err.message}`,
                        showCancel: false
                    });
                });
            },
            openMaterialId(item){
                //console.log(item);
                uni.navigateTo({
                    url:"/pages/material/default?v=202101034&name="+item
                });
            },
            openMaterialName(item){
                console.log(item);
                uni.navigateTo({
                    url:"/pages/material/name?v=20210122&name="+item
                });
            }
        }
    }
</script>

<style>

</style>

　　本节先分享至此,但愿对混合式移动App开发感兴趣的同窗，有点帮助！android

下回将分享App自定义组件开发...ios

　　App 下载体验地址：https://m3w.cn/__uni__5b004c0编程

基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库 开发实战（一）

基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库 开发实战（一）

1. 优宝库介绍

1.1. 首页

1.2. 类目

1.3. 搜索

1.4. 搜索结果

1.5. 商品详情

2. App开发介绍

2.1. tab选项

2.2. 自定义导航栏

2.4. 商品类目

2.5. 优惠券类目

2.6. 商品推荐

首页完整代码

基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库开发实战（一）

基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库开发实战（一）

　 2. App开发介绍

　　2.1. tab选项

　2.2. 自定义导航栏

　2.4. 商品类目

　2.5. 优惠券类目

　2.6. 商品推荐

　首页完整代码