100字范文 > 电商详情页设计小程序开发分享支持微信转发可用于增加微信转发提高转化率

电商详情页设计小程序开发分享支持微信转发可用于增加微信转发提高转化率

时间：2020-09-04 18:02:39

详情页设计小程序开发总结

简介详情页设计小程序功能详情页设计源码介绍详情页设计小程序首页详情页开发台文件介绍详情页设计小程序总结详情页设计免费源码

简介

从电商出现后，详情页设计变得非常重要，好的详情页设计不仅可以满足买家购买需求，从而提高购买转化率，还可以解决买家购买疑问，减少卖家接待工作量。

既然详情页设计这么重要，那么淘宝上的卖家是不是都有自己的设计师？

没有，对于一些中小卖家，他们并没有专属的美工或设计师，他们通常是将详情页设计或者店铺装修外包出去，这样更省事而且出图更快。

但是某宝上许多详情页设计不能满足很多外包的需求，因为经常有这种情况出现，他们接了卖家详情页外包的任务后，转头就丢给没经验的设计师练手；

更可怕的遇到一些不擅长沟通的设计师，沟通时效慢不说，一个不高兴就弃单逃人，最后什么详情页都拿不到！

看了太多这种情况，所以我觉得在详情页设计或者店铺装修上，这些情况都是可以避免的，更重要的是，用以下这种形式还可以将详情页赋予社群营销属性，增加曝光率，提高宝贝的转换率。

详情页设计小程序功能

1.能联系设计师、美工且沟通时效性高；

2.设计师、美工与客户之间有沟通正向反馈；

3.详情页设计、LOGO设计、包装设计的作品能够根据客户的意愿上架到小程序上进行展示；

4.做好的详情页用小程序分享到微信群、微信好友用于增加曝光率。

详情页设计源码介绍

详情页设计小程序

因为小程序今天测试上线，所以可以通过查找小程序进行首次使用。打开微信，在发现界面找到“小程序”，点击“搜索”，输入“LOGO详情页设计”，就可以找到小程序开始使用。

首页

首页在开发的时候，我是按简约风格，搭配具有设计感的黄色。首页的展示分五部分。

第一是粉设-魔灯的个人介绍；

第二是LOGO设计作品集，33格式显示；

第三是包装设计作品集 22格式显示；

第四是详情页设计作品集 3*3格式显示，这部分我们会根据用户上传他们的详情页作品，进行分享提高曝光率；

第五是底部预约设计师按钮以及介绍按钮；

页面展示如下：

首页的各个模块都是使用弹性盒子模型进行布局，这是目前前端开发者使用较多的盒子模型，这样的布局更便捷，使用起来比较方便，而且我们设置了按钮点击事件，可以通过点击作品进入到作品集详细页面。

详情页

这一部分比较简单，我们通过点击首页上的任何一个作品集就会跳转到这个页面，这个页面用于展示作品的详情，还有一个返回按钮可以返回小程序首页，继续浏览详情页，LOGO设计，包装设计的作品集。

在这里，我添加了一个功能，客户上传自己的详情页后，可以分享到微信群或微信好友，在做好设计的同时，将赋能商品社群营销属性，提高成交量。

详情页分享成功，效果图如下：

虽然页面看起来简单，后台程序是需要一些技巧的，这当中需要考虑到问题有：

1.分享后如何正确的进入到指定页面呢？

2.如果使用wx.redirectTo返回首页的，界面切换不流畅？

3.如何让用户更省流量，更快加载地使用？

最后，用两段代码解决这3个问题。

//用于分享的代码onShareAppMessage: function () {var id=this.data.id;return {title: '粉设魔灯：好的设计并不贵！',path: '/pages/detail/detail?id='+id,}}// 返回首页returnIndex:function(){if (getApp().globalData.scene == 1008 || getApp().globalData.scene == 1007){getApp().globalData.scene = 10 //修改场景值，这样分享后，页面切换不卡console.log("returnIndex getApp().globalData.scene:", getApp().globalData.scene)wx.redirectTo({url: '../index/index',})}else{wx.navigateBack({delta: 1})}},