VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > C#教程 >
  • 基于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 文件中进行配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
"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自定义组件开发...


相关教程