基于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- ...
随机推荐
- Linux OOM Killer造成数据库访问异常排查
服务器上的服务器访问异常,查看/va/log/messages发现如下: Sep 22 16:08:21 safeserver kernel: java invoked oom-killer: gfp ...
- .net core 3.1 过滤器(Filter) 与中间件与AOP面向切面 与拦截器及其应用
Filter(过滤器) 总共有五种,Authorization Filter,Resource Filter,Exception Filter,Action Filter,Result Filter ...
- 使用GitHub发布自己的静态网站
可参考GitHub官方文档 https://pages.github.com/ https://help.github.com/ 1.在本地新建一个文件夹.然后在文件夹中用git初始化文件夹 git ...
- webform中DropdownList绑定多个字段
说明 ListItem中有Attributes属性,手动创建一个自定义属性,赋值需要绑定的字段的值. 这样的话,前台js也可以获取到,能够显示到前台html,进行控制. 代码 foreach(Data ...
- Spring-步入Spring旅途
一.Spring前言 讲Spring之前先写段代码,体会一下Java创建对象的方式,这块你理解了对后面有好处! 1.原始时代-new对象 直接new创建对象,代码如下: //User.java pac ...
- 采购订单写入sap失败后，抛出自定义异常，回滚数据库
@Transactional(rollbackFor = Exception.class) @Override public Map<String,Object> getOderInfo( ...
- Android驱动-Java入门学习（java安装）
在ubuntu 14.04上java开发环境. 下载 jdk-7u75-linux-x64.tar.gz 使用tar xvf jdk-7u75-linux-x64.tar.gz 解压 在/usr/li ...
- Redis+LUA整合使用
.前言 从本章节开始我们就开始讲解一些 Redis 的扩展应用了,之前讲的主从.哨兵和集群都相当重要,也许小公司用不到集群这么复杂的架构,但是也要了解各知识点的原理,只要了解了原理,无论什么时候是有, ...
- 在 CAP 中使用 AOP ( Castle.DynamicProxy )
简介 本篇文章主要介绍如何在 CAP 中集成使用 Castle.DynamicProxy,Castle DynamicProxy 是一个用于在运行时动态生成轻量级.NET代理的库.代理对象允许在不修改 ...
- Kafka知识总结及面试题
目录 概念 Kafka基础概念 命令行 Kafka 数据存储设计 kafka在zookeeper中存储结构 生产者 生产者设计 消费者 消费者设计 面试题 kafka设计 请说明什么是Apache K ...