基于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- ...
随机推荐
- react第X单元(redux)
第X单元(redux) #课程目标 理解redux解决的问题,理解redux的工作原理 熟练掌握redux的api 熟练掌握redux和react组件之间的通信(react-redux) 把redux ...
- react第二十单元(react+react-router-dom+redux综合案例2)
第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
- Flink 自定义触发器
import org.apache.flink.api.common.state.ReducingState; import org.apache.flink.api.common.state.Red ...
- 个人微信公众号搭建Python实现 -开发配置和微信服务器转入-配置说明（14.1.2）
@ 目录 1.查看基本配置 2.修改服务器配置 3.当上面都配置好,点击提交 4.配置如下 1.查看基本配置 登录到微信公众号控制面板后点击基本配置 这里要讲的就是订阅号 前往注册微信公众号 2.修改 ...
- SpringBoot从入门到精通教程（四）
前端时间整合SSM ,发现了一个现象,在整合的时候 配置文件过于复杂. 1.建工程,建目录,导入jar包. 2.配置 数据源 映射信息 等等 ... 3. 还有 各种 拦截器,控制器 ,头都大了... ...
- Java网络编程：QQ邮件发送客户端程序设计
目录 一.目标介绍 1.认识SMTP(邮件传输协议) 2.POP3(邮件接收协议) 二.基于Base64编码邮箱及授权码 1.开通QQ邮箱SMTP/POP3服务 2.Java编写BASE64编码程序 ...
- Spring AOP 实战运用
Spring AOP 实战 看了上面这么多的理论知识, 不知道大家有没有觉得枯燥哈. 不过不要急, 俗话说理论是实践的基础, 对 Spring AOP 有了基本的理论认识后, 我们来看一下下面几个具体 ...
- Android驱动学习-Eclipse安装与配置
在ubuntu系统下安装配置Eclipse软件.并且让其支持编译java程序和内核驱动程序. 1. 下载Eclipse软件. 打开官网:http://www.eclipse.org/ 点击 DOWN ...
- 用漫画的形式展现——什么是web
Web主要经历了web1.0和web2.0的阶段.万维网的初期都是web1.0的时代:静态页面. 在不同的时代,流行的web安全问题也不太相同.在web1.0时代,web安全主要是 Web1.0:sq ...
- Docker环境下升级PostgreSQL
查阅PostgreSQL官方文档可以得知,官方提供了两种方式对数据库进行升级--pg_dumpall与pg_upgrade. pg_dumpall是将数据库转储成一个脚本文件,然后在新版数据库中可以直 ...