基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库 开发实战（一）
1. 优宝库介绍
优宝库是基于阿里妈妈、淘宝联盟 淘宝商品Api，前端使用HBuilderX + UniApp + ColorUi,后端采用UniClound 精选淘宝商品进行推荐的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
1.1. 首页
1.2. 类目
1.3. 搜索记录
1.4. 搜索结果
1.5. 商品详情
基于HBuilderX+UniApp+ColorUi+UniCloud 优宝库 开发实战（一）的更多相关文章
- 基于HBuilderX+UniApp+ThorUI的手机端前端开发处理
现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔概括性的介绍基于HB ...
- 基于UniApp社区论坛多端开发实战
什么是移动端WebApp 移动端WebApp: 泛指手持设备移动端的web 特点: - 类App 应用,运行环境是浏览器 - 可以包一层壳,成为App - 常见的混合应用: ionic, Cordov ...
- 基于DDD的微服务设计和开发实战
你是否还在为微服务应该拆多小而争论不休?到底如何才能设计出收放自如的微服务?怎样才能保证业务领域模型与代码模型的一致性?或许本文能帮你找到答案. 本文是基于 DDD 的微服务设计和开发实战篇,通过借鉴 ...
- 基于HBuilderX+UniApp+ThorUI的手机端前端的页面组件化开发经验
现在的很多程序应用,基本上都是需要多端覆盖,因此基于一个Web API的后端接口,来构建多端应用,如微信.H5.APP.WInForm.BS的Web管理端等都是常见的应用.本篇随笔继续分析总结一下项目 ...
- Spring 3.x企业实用开发实战(1)
有关Spring的介绍这里就不赘述了,主要是学习了陈雄华版的<Spring 3.x企业应用开发实战>并做了一点笔记,以助于后期的回顾和复习. 废话不多说,直接进入主题,以下所有代码基于&l ...
- 驱动领域DDD的微服务设计和开发实战
你是否还在为微服务应该拆多小而争论不休?到底如何才能设计出收放自如的微服务?怎样才能保证业务领域模型与代码模型的一致性?或许本文能帮你找到答案. 本文是基于 DDD 的微服务设计和开发实战篇,通过借鉴 ...
- 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- 手牵手，使用uni-app从零开发一款视频小程序 (系列下 开发实战篇)
系列文章 手牵手,使用uni-app从零开发一款视频小程序 (系列上 准备工作篇) 手牵手,使用uni-app从零开发一款视频小程序 (系列下 开发实战篇) 扫码体验,先睹为快 可以扫描下微信小程序的 ...
- uni-app 小程序从零开始的开发流程
前言 本文基于 HBuilderX 3.1.22 + 微信开发者工具 1.05.2106300为主要内容进行说明. 文档版本:1.0.0 更新时间:2021-09-03 15:32 一.准备 uni- ...
随机推荐
- 多图详解Go的互斥锁Mutex
转载请声明出处哦~,本篇文章发布于luozhiyun的博客:https://www.luozhiyun.com 本文使用的go的源码时14.4 Mutex介绍 Mutex 结构体包含两个字段: 字段s ...
- Laravel Argument 1 passed to App\Models\Recipients\AlertRecipient::__construct() must be an instance of App\Models\Recipients\string, string given,
今天测试snipet的计划任务,库存低于警告值的时候,时候会会自动发送邮件到邮箱 class SendInventoryAlerts extends Command { /** * The name ...
- 关于c语言单项链表尾添加
犹豫了几天,看了很多大牛写的关于c语言链表,感触很多,终于下定决心,把自己对于链表的理解随之附上,可用与否,自行裁夺.由于作者水平有限也是第一次写,不足之处,竭诚希望得到各位大神的批评指正.制作不易, ...
- 【剑指offer】01 二维数组中的查找
题目地址:二维数组中的查找 题目描述 在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照 ...
- 探究 position-sticky 失效问题
CSS 的 position 值中,有一个非常有用的值 -- position: sticky,通常会被用于各种吸顶,吸底,吸边的效果中. 如果你对 sticky 还不太熟悉,可以先看看我的这篇文章: ...
- 利用设计模式消除业务代码中的 if-else
准备工作:假设这样的一个业务场景:有一个自动开票的功能需要实现,在程序里面需要根据账单的类型执行对应的处理逻辑. 以下使用了 Lombok 简化代码!!! 账单类型枚举: /** * @author ...
- Node.js躬行记（5）——定时任务的调试
最近做一个活动,需要用到定时任务,于是使用了 node-schedule 库. 用法很简单,就是可配置开始.结束时间,以及重复执行的时间点,如下所示,从2020-12-23T09:00:00Z开始,每 ...
- spring 切面织入报错：java.lang.ClassCastException: com.sun.proxy.$Proxy7 cannot be cast to...
报这个错,只有一个原因,就是转化的类型不对. 接口过父类的子类,在强制转换的时候,一定要用接口父类来定义. 代码示例: package com.luoluo.dao.impl; import java ...
- 2020年Python文章盘点，我选出了个人TOP10
大家好,我是猫哥.2020年过得真快啊!总感觉这一年里还没有做成多少事,一眨眼就又到了写年度总结的时候了-- 去年1月1日的时候,我写了<我的 2019 年 Python 文章榜单>,简单 ...
- 每日一个linux命令2
cd命令 Linux cd命令可以说是Linux中最基本的命令语句,其他的命令语句要进行操作,都是建立在使用cd命令的基础之上. 1. 命令格式 cd [目录名] 2.命令功能 切换当前目录至dirN ...