基于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- ...
随机推荐
- ctf/web源码泄露及利用办法
和上一篇文章差不多,也算是对web源码泄露的一个总结,但是这篇文章更侧重于CTF 参考文章: https://blog.csdn.net/wy_97/article/details/78165051? ...
- Kubernetes学习笔记_尚硅谷
https://www.bilibili.com/video/BV1w4411y7Go?p=1 一.K8s介绍 k8s是一个编排容器的工具,其实也是管理应用的全生命周期的一个工具,从创建应用,应用的部 ...
- 【剑指offer】04 重建二叉树
题目地址:重建二叉树 题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不 ...
- MySQL：判断逗号分隔的字符串中是否包含某个字符串 && 如何在一个以逗号分隔的列表中的一个字段中连接MySQL中的多对多关系中的数据
需求: sql语句中,判断以逗号分隔的字符串中是否包含某个特定字符串,类似于判断一个数组中是否包含某一个元素, 例如:判断 'a,b,c,d,e,f,g' 中是否包含 'a',sql语句如何 ...
- Core3.0发布到IIS的流程
前言 参考链接 https://www.cnblogs.com/wutongjun/p/11981798.html 在IIS上部署 .Net Core 3.0 项目的主要流程有: 安装并启用IIS 安 ...
- （六）、mv-一个具备更改文件名和移动文件的命令
一.mv的命令格式和作用 既可以在不同目录之间移动文件和目录,也可以在同一目录下对文件或者目录重命名,如果目标文件已经存在,则可覆盖他,若 目标文件或者目录不存在,则创建他:移动的dst必须为目录 命 ...
- oracle 19c dataguard silent install (oracle 19c dataguard 静默安装)
环境说明 1.关闭透明大页 RHEL 6: # cat /sys/kernel/mm/redhat_transparent_hugepage/enabled [oracle@rhel 6 ~]$ c ...
- Qt学习笔记-支持Gif动画显示
写QT程序时遇到个问题,本机编译完成的应用程序的Gif正常显示,但移到开发板上,gif无法显示,最后发现是其实是插件的关系. 在编译安装的路径中有一个 plugins/imageformats 里面是 ...
- Centos7无网络下安装mysql5.7——mysql-rpm安装
本教程指将mysql安装到系统默认目录下,如想自定义修改目录,请在rpm安装时自行修改: rpm -ivh --prefix= /opt xxx.rpm #将xxx.rpm安装到/opt下 一.下载m ...
- 阿里技术专家详解 Dubbo 实践，演进及未来规划
Dubbo 整体介绍 Dubbo 是一款高性能,轻量级的 Java RPC 框架.虽然它是以 Java 语言来出名的,但是现在我们生态里面已经有 Go.Python.PHP.Node.JS 等等语言. ...