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

1. 优宝库介绍

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

1.1. 首页

1.2. 类目

1.3. 搜索

1.4. 搜索结果

1.5. 商品详情

　 2. App开发介绍

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

　　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中获取导航位置

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
}
})

1	`首页中使用自定义组件，设置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. 淘宝官方活动轮播

<!--轮播-->
            <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开发感兴趣的同学，有点帮助！

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

posted on 2021-01-24 22:59 衡斅阅读(1244) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示

实全软件科技有限公司

公告

搜索

常用链接

我的标签

积分与排名

随笔分类

随笔档案

相册

企业开发

设计模式

阅读排行榜

评论排行榜

推荐排行榜

最新评论

基于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 优宝库 开发实战（一）

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 优宝库开发实战（一）

　 2. App开发介绍

　　2.1. tab选项

　2.2. 自定义导航栏

　2.4. 商品类目

　2.5. 优惠券类目

　2.6. 商品推荐

　首页完整代码