基于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- ...
随机推荐
- 移动端 better-scroll基础
一.什么是better-scroll better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件 #滚动原理 1. 与浏览器滚动原理一致,父容器高度固定,子元素内容撑开,必 ...
- [日常摸鱼]bzoj3224普通平衡树-Treap、Splay、01Trie、替罪羊树…
http://www.lydsy.com/JudgeOnline/problem.php?id=3224 经典的平衡树模板题-各种平衡树好像都可以(黄学长之前好像还用vector卡过了这题) 所以这篇 ...
- AD PCB模块复用
该文档为原创,转发需注明出处!https://www.cnblogs.com/brianblog/ 在画图的时候如果遇到PCB中有多个模块原理图是一模一样的时候,我们便会想能不能偷点懒,只画一个模块, ...
- 5. 穿过拥挤的人潮，Spring已为你制作好高级赛道
目录 ✍前言 版本约定 ✍正文 默认转换器注册情况 StreamConverter 代码示例 使用场景 兜底转换器 ObjectToObjectConverter part1:快速返回流程 part2 ...
- 解决[BScroll warn]: Can not resolve the wrapper DOM. Vue better-scroll
在开发项目过程中,使用better-scroll插件中遇到了滚动一次重复提示相同错误 [BScroll warn]: Can not resolve the wrapper DOM. Vue bett ...
- Java学习日报10.1
学习内容一 ********************************** 代码 **********************************public class EnumTest ...
- vue3系列：vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件
基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...
- Linux 时间同步 01 简介
Linux 时间同步 01 简介 目录 Linux 时间同步 01 简介 时间同步 公共NTP服务器地址及IP 系统时间相关文件 时间同步 大数据产生与处理系统是各种计算设备集群的,计算设备将统一.同 ...
- github与svn的区别
github与svn都属于版本控件系统,但是两者不同于,github是分布式的,svn不是分布的是属于集中式的. 1) 最核心的区别Git是分布式的,而Svn不是分布的.能理解这点,上手会很容 ...
- linux根文件系统 /etc/resolv.conf 文件详解
Linux根文件系统/etc/resolv.conf文件,它是DNS客户机配置文件,用于设置DNS服务器的IP地址及DNS域名,还包含了主机的域名搜索顺序.该文件是由域名解析器(resolver,以恶 ...