基於HBuilderX+UniApp+ColorUi+UniCloud 優寶庫 開發實戰（一）

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

首頁中使用自定義組件，設置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自定義組件開發...

　　App 下載體驗地址：https://m3w.cn/__uni__5b004c0