起因
目前所在的公司是一个新成立的做社交电商小程序。借由这个工作机会接触了解社交电商小程序的业务，记录下以作梳理分析。
社交电商小程序首页
未标题-1.jpg
首页功能如图：
- 提示收藏小程序
- 搜索入口（点击触发跳转到搜索页面）
- 底部tabBar导航
- 上面的tab分类类目条
- 不同入口跳转详情页/webpage/优惠券页/品牌详情页等
- 品牌产品文字图片信息展示，下拉到底加载更多
简单梳理下大致JS逻辑框架：
- onLoad加载完毕
判断进入页面，页面参数a.scene，解析小程序码（涉及后面商品单品生成带小程序码的海报分享功能） ，进入对应的商品详情页面。
调用全局方法userInfo接口，获取用户身份userInfo数据信息，判定授权，判定绑定上级
获取tab分类类目条接口数据 - onShow显示页面：
获取购物车接口数据（判断购物车图标是否显示+N提示），获取品牌接口数据 - onReachBottom页面上拉触底：
加载更多 - 点击上面导航tab分类条目切换
- onShareAppMessage分享
……
部分代码示例
- 右上角分享
onShareAppMessage: function (event) {
var i = '/pages/home/home?from=menu';
var title = '分享标题！';
var brandBg = event.target.dataset['bg'];
var shareInfo = {
title: title,
path: i,
imageUrl: brandBg
};
return shareInfo;
},
- 图片点击放大预览
previewImg: function(event) {
var imgSrc = event.currentTarget.dataset['imgsrc'];
var imgs = event.currentTarget.dataset['imgs'];
wx.previewImage({
current: imgSrc,
urls: imgs
})
},
- 跳转页面和复制内容
wx.switchTab(Object object)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.reLaunch(Object object)关闭所有页面，打开到应用内的某个页面
wx.redirectTo(Object object)关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。最多十层。
wx.navigateBack(Object object)关闭当前页面，返回上一页面或多级页面。
bindCouponsTap: function(o) {
wx.navigateTo({
url: "../couponlist/couponlist"
});
},
goToBrand: function() {
wx.switchTab({
url: '../brandRush/brandRush',
})
},
copy: function(e) {
wx.setClipboardData({
data: e.target.dataset.val,
success: function(res) {
wx.showToast({
title: '复制成功',
});
}
});
},
- webPage跳转
<view bindtap='goView' data-url="/pages/webPage/webPage?artUrl=https://ytal.qkmai.com/wapShop/ArticleDetails?ArticleId=3" data-id='3'>
<image src='http://cos.qkmai.com/qkmbb/ytal/xsdd.png' style='width:375rpx;background-color:#fff;box-sizing:border-box;' mode='widthFix' lazy-load></image>
</view>
goView: function(event) {
var url = "https://ytal.qkmai.com/vShop/ArticleDetails?ArticleId=" + event.currentTarget.dataset.id
var deurl = encodeURIComponent(url)
var s = '/pages/webPage/webPage?artUrl=' + deurl
e.globalData.fundebug.notifyError(new Error("首页跳转文章"), {
name: "文章链接",
metaData: s
});
wx.navigateTo({
url: s
})
},
- navigator跳转应用内页面
<navigator style='margin-bottom:10rpx;' url='/pages/productdetail/productdetail?id=2386'>
<image src='http://cos.qkmai.com/qkmbb/ytal/haixian2.png' style='z-index:99;width:360rpx;border-radius:20rpx;box-sizing:border-box;z-index:99;height:auto;' mode='widthFix' lazy-load></image>
</navigator>
- 联系客服按钮
<view style='display:inline-block;position:relative'>
<image src="http://cos.qkmai.com/qkmbb/ytal/sykf.png" style='display:inline-block;width:65rpx;height:57rpx'></image>
<button openType="contact" plain='true' style='position:absolute;left:0;top:0;width:100%;height:100%;border:0;color:transparent;'>1</button>
</view>
- 包含固定搜索入口和滚动tab分类条目导航
<scroll-view scroll-x style="width: 100%;height:160rpx;white-space: nowrap; display: flex;background:#3c3b45;position:fixed;top:0rpx;left:0;z-index:998;align-items:flex-start;">
<view style='position:fixed;z-index:998;width:750rpx;background:#3c3b45'>
<view style='display:flex;flex-direction:row;justify-content:space-around;align-items: center;width:100%;background-size:cover;width:750rpx;height:105rpx'>
<view style='color:#959595;font-size:24rpx;display:inline-block;background:#f7f7f7;width:680rpx;border-radius:30rpx;height:55rpx;display:flex;flex-direction:row;align-items: center;padding:0 20rpx;justify-content:center' bindtap='GoToSearch'>
<image src='http://cos.qkmai.com/qkmbb/ytal/searchtb.png' style='width:30rpx;height:30rpx;'></image>
<text style='color:#959595;font-size:24rpx;display:inline-block;line-height:64rpx;padding-left:20rpx'>搜商品关键字/VIP自购最高返40%</text>
</view>
</view>
</view>
<view bindtap="changeCate" data-cateName='{{item.cateName}}' class="catetitle" wx:key="{{item}}" wx:for='{{barndRushCate}}' style='margin-top:105rpx'>
<view class="{{selectedCate==item.cateName?'active':''}}">{{item.cateName}}
<text class='brandCount'>{{item.brandCount}}</text>
</view>
<view class="tabline {{selectedCate==item.cateName?'active':''}}"></view>
</view>
</scroll-view>
- 系统底部tabBar设置
{
"pages":[…………],
"tabBar": {
"backgroundColor": "#fff",
"color": "#959595",
"selectedColor": "#db3c40",
"list": [
{
"pagePath": "pages/home/home",
"text": "首页",
"selectedColor": "#db3c40",
"iconPath": "images/temai.png",
"selectedIconPath": "images/temai_hover.png"
},
{
"pagePath": "pages/brandRush/brandRush",
"text": "品牌",
"selectedColor": "#db3c40",
"iconPath": "images/pinpai.png",
"selectedIconPath": "images/pinpai_hover.png"
},
{
"pagePath": "pages/discovery/discovery",
"text": "赚赚",
"selectedColor": "#db3c40",
"iconPath": "images/vip.png",
"selectedIconPath": "images/vip.png"
},
{
"pagePath": "pages/shopcart/shopcart",
"text": "购物车",
"selectedColor": "#db3c40",
"iconPath": "images/gouwuche.png",
"selectedIconPath": "images/gouwuche_hover.png"
},
{
"pagePath": "pages/usehome/usehome",
"text": "我的",
"selectedColor": "#db3c40",
"iconPath": "images/wode.png",
"selectedIconPath": "images/wode_hover.png"
}
]
}
}
为 tabBar 某一项的右上角添加文本(注意是转化为字符串，超过4个字符显示成…)
wx.setTabBarBadge({
index: 3,
text: t.data.TotalNum.toString()
})
