首页>>app
原生电商App如何开发,首页与列表
2023-07-16
76浏览
一、首页样式首页分类样式1、顶部banner图片,可以有连接进入相关的页面如图:banner图片json格式{"type":"banner","height":"150",//图片高度"list":[{"imgurl":"http://xxxx.png",//图片地址

一、首页样式

首页分类样式

1、顶部banner图片,可以有连接进入相关的页面

如图:

image.png

banner图片json格式

{
		"type": "banner",
		"height": "150",//图片高度
		"list": [ {
			"imgurl": "http://xxxx.png",//图片地址
			"link": ""//联接地址
		}]
}


2、宫格区,二宫格,三宫格,四宫格,六宫格,八宫格。。。。

如图:

image.pngimage.pngimage.png

宫格json结构

{
		"type": "gongge",
		"num": "5",//每行显示的个数
		"list": [ {
			"imgurl": "http://53469401.png",//图片地址
			"title": "数码",//名字
			"link": "",//跳转地址
			"width": "50",//宽度
			"height": "50",//高度
			"titlecolor": "0x009966",//字体颜色
			"titlesize": "14"//字体大小
		}]
}

3、左右卡片区:

如图:

image.pngimage.pngimage.png

img4:两排四张图片

image.png

img3left:两排三图

image.png

img3right:两排三图

image.png

titleimg3:带标题三图格式

image.png

titleimg2:带标题二图格式

image.png

titleimg1:带标题的一图格式

image.png

图片区JSON格式

{
		"type": "titleimg1",//样式img4,img3left,img3right,titleimg3,titleimg2,titleimg1
		"imgleft": "http://tm.png",
		"title": "图片组件展示风格1",
		"subtitle": "一个可能有点儿字的子标题",
		"titlesize": "20",
		"titlecolor": "0x009966",
		"subtitlesize": "14",
		"subtitlecolor": "0x009966",
		"imgright": "http://ancher.jpg",
		"list": [{
			"imgurl": "http://53469401.png",
			"link": ""
		}]
}

4、例表样式,图片左右可以互换。

如图:

image.png

5、商品例表样式

如图:

image.pngimage.png


例表JSON结构,详细查看

{
		"type": "goodslistimgup_subleft",
		"list": [{
			"imgurl": "http://310x310.jpg_.webp",
			"link": "",
			"titles": [{
				"imgleft": "http://tm.png",
				"imgleftwidth": "30",
				"imgleftheight": "17",
				"text": "运动套装春秋季纯色长袖卫衣",
				"textcolor": "0x222222",
				"textsize": "18",
				"imgright": ""
			}, {
				"imgleft": "http://a-209-42.png",
				"imgleftwidth": 50,
				"imgleftheight": "10",
				"text": "39.5",
				"textcolor": "0x00FF00",
				"textsize": "20",
				"imgright": ""
			}, {
				"imgleft": "",
				"text": "已售400",
				"textcolor": "0x222222",
				"textsize": "14",
				"imgright": ""
			}, {
				"imgleft": "http://!85.webp",
				"imgleftwidth": 50,
				"imgleftheight": "10",
				"text": "旗舰店",
				"textcolor": "0x222222",
				"textsize": "14",
				"imgright": "http://ncher.jpg",
				"imgrightwidth": "10",
				"imgrightheight": "10"
			}]
		}

二、商品分类页

image.png

左侧菜单的接口

{
    "color": "0x000000",
    "fontsize": "14",
    "list": [{
        "name": "手机数码",
        "url": " //用来请求右侧数据 
    }, {
        "name": "精品男装",
        "url": "https://ehuoma.com/api/appd/class1"
    }, {
        "name": "精品女装",
        "url": "https://ehuoma.com/api/appd/class1"
    }, {
        "name": "家用电器",
        "url": "https://ehuoma.com/api/appd/class1"
    }, {
        "name": "母婴童装",
        "url": "https://ehuoma.com/api/appd/class1"
    }]
}

右侧区块JSON格式

{
    "num": "3",
    "all": "3",
    "current": "1",
    "list": [{
        "img": "http://ehuoma.com/static/appimg/O1CN01pdZEwX2BF7DaVrwSH_!!2211270848308.jpg_310x310.jpg_.webp",//图片可以是png,webp格式
        "width": "30",
        "height": "30",
        "url": "#",//跳转的域名
        "txt": "苹果",//名字
        "color": "0x000000",
        "size": "14"
    }, {
        "img": "http://ehuoma.com/static/appimg/O1CN01pdZEwX2BF7DaVrwSH_!!2211270848308.jpg_310x310.jpg_.webp",
        "width": "30",
        "height": "30",
        "url": "#",
        "txt": "华为",
        "color": "0x000000",
一、首页样式首页分类样式1、顶部banner图片,可以有连接进入相关的页面如图:banner图片json格式{"type":"banner","height":"150",//图片高度"list":[{"imgurl":"http://xxxx.png",//图片地址...
07-16
电商原生App,自主开发电商原生app
html包的制作配置文件名replace.txt ,建好文件存在包根目录即可,包内文件目录与文件名不能有中文。文件内容{“拦截网址”:“本地文件”}如:{"http://www.baidu1.com":"index.html","http://www.sina2.com":"test.html",}replace.txt写好后放到html目录下,打包...
06-27
创建App,打开网址:https://www.appbsl.cn/encapsulationApp/%20选择初级版本,年限七天免费,网址随便输入一个。配置页里面找到“本地资源上传”,把离线的zip上传即可本地资源如何配置配置文件名replace.txt文件,建好文件存在包根目录即可。注意:包内文件目录与文件名不能有任何中文。有是无法使用的。replace.t...
06-09
h5打包app,h5在线生成app,uniapp生成app
前端使用uniapp开发项目完成后,需要将页面打包,生成H5的静态文件,部署在服务器上。这样通过服务器链接地址,直接可以在手机上点开来访问。也可以用变色龙打包app功能,打包成App,过苹果上架时4.3问题。点击菜单栏“发行”,点击选择“网站-PC Web或手机H5”,填写网站标题和网站域名/服务器的IP地址。点击进入manifest....
05-19
Uinapp写的怎么导出h5,编译html,uniapp4.3
变色龙IOS免签功能列表:1、IOS免签推送消息给用户2、顶部栏颜色修改3、菜单栏配置4、全屏化显示5、支持支付功能6、注入JS,CSS功能...
05-17
苹果免签推送功能,IOS免签,不上架封装苹果不掉签
功能介绍1、App封装实现App封装,混合开发App,100多JS接口功能交互。2、制作小程序通过接口网站封装成小程序。下载地址https://pan.baidu.com/s/1KRYRk2ZG83B6w9p5rvJNzw提:0opi环境环境:PHP 5.6 + MySQL存储:七牛存储服务器最低要求CPU:1核,内存:2G,硬盘:10G,1M带宽不能用空间,有要修改php环境的要求。...
05-12
网站生成app源码,网站源码,生成app网站
在线一键网站网页生成app,包括安卓与苹果。...
05-12
网页生成app免费,网页app生成器无广告,在线生成网页转app,生成app,封装app,打包app
...
11-12