导图社区 小程序开发知识点
腾讯云小程序学习路径-电商小程序知识导图
社区模板帮助中心，点此进入>>
互联网9大思维
电商部人员工作结构
组织架构-单商户商城webAPP 思维导图。
域控上线
python思维导图
供应链类型
供应链管理平台
css
CSS
计算机操作系统思维导图
小程序开发知识点
小程序云开发
优点
无需自建服务器
项目快速上线
无需配置域名
无需ICP备案
无需绑定SSL证书
轻松获取用户凭证
缺点
基础CDN流量太少
需要对文件压缩
云数据库限制多
对外开放限制多
自己的后台管理系统访问云资源需要调用相应接口并有资源限制
入门
开启云开发环境
腾讯云控制台开启
开发平台开启
基础库要配置云开发的版本
要不然wx.cloud.XX找不到
电商小程序开发
代码链接： 链接:https://pan.baidu.com/s/1gARHdPXlHoLVhL23OndYfw 密码:povp
电商小程序初探
小程序特点
短时长，高频
传播广，增速快，扫码，转发
展示客服，支付，物流接口
电商小程序现状
京东
拼多多
智慧零售
电商走得最远
前置知识
JS ES6语法
小程序语法
电商小程序技术栈
需要的技术
小程序学习路径
需要的技术基础
JS
HTML
微信小程序项目结构，API，组件等
电商相关的API和组件
云开发
开始前准备
注册小程序账号
开发设置——》APPID
绑定客服
绑定物流
开通支付
微信搜索
...
下载安装开发者工具
新建项目填入appid
个人中心
云开发环境开通
云开发组织架构
小程序
云函数
云数据库
云存储
部署+数据统计
云开发管理界面
第一个云函数
button
opentype
微信开放能力
getUserInfo
回调
bindgetuserinfo
子主题 1
新建云函数目录
配置云函数目录
添加“cloudfunctionRoot”
新建云函数
login
云函数依赖包
wx-server-sdk
云函数初始化云环境
cloud.init
云函数入口函数
exports.main
上传并部署云函数
小程序app.js初始化云环境
使用云函数
wx.cloud.callFunction
云开发实现微信登录
云函数login返回openid或者wxcontext
小程序端解析result并获取openid
将openid拼接在userinfo中
将拼接了openid的userinfo本地持久化存储
wx.setStorageSync
在app onlaunch时检查本地存储是否存有userinfo
在页面 onlaunch时检查全局变量 userinfo是否有值
有值就setData
电商小程序雏形
电商功能模块分析
首页
购物车
优惠券
云数据库添加商品信息
添加button，设置监听事件
bindtap
云开发界面手动添加集合emall
获取云数据库实例,添加数据并设置回调
代码片段
云存储上传商品图片
步骤
本地选择图片
wx.chooseImage
上传图片
wx.cloud.uploadFile
云存储+云数据库存储商品信息
上传图片获取fileID
将fileID字段存到数据库中
电商通用功能（上）
获取商品信息列表
tabbar+商品列表显示
tabbar
app.json配置tabbar
tabbar元素
pagePath
text
iconPath
selectedconPath
商品列表显示
获取列表信息
布局中for循环展示item元素
商品列表页面+详情页跳转
商品列表页展示
代码
效果
详情页跳转
wxml添加bindtap
wxml添加id
监听方法获取currentTarget.id
跳转并携带id
详情页onload-options获取传入参数
wxml
js
detail.js
商品图片懒加载
image加上lazy-load
下拉刷新+触底分页加载
app.json
enablePullDownRefresh
main.js中在onPullDownRefresh，onReachBottom回调中处理加载逻辑
getlist中通过数据库skip，limit实现分页加载
回调接口
加载逻辑
首页轮播大图
商品列表添加count字段
进入详情更新并自增count字段
update，db.command.inc(1)
定义getTop方法
oderBy("count","des").limit(3)
wxml中添加swiper 展示过滤排序后的top数组
电商通用功能（下）
添加购物车
添加触发事件
catchTap
传递item到逻辑层
data-item
新增app全局购物车数组
carts:[]
查找carts中与item.id匹配的元素
findIndex
找到将item中num加1，没有找就添加字段num=1，并添加到数组carts中
push(item)
购物车页面onshow时加载carts数据
购物车的增删改查
添加购物车时，tabbar显示总数
新建setTabBar方法
carts数组num相加算和
reduce
设置tabbar显示
wx.setTabBarBadge
将购物车数据本地持久化存储
购物车页面“+“”-”实现
wxml需要将item索引传入逻辑层
data-index
逻辑层获取索引，从数组中找到对应item并且num加一
更新数组并调用app的setTabBar更新缓存以及tabbar数据
购物车总价
num*price
转发
显示转发按钮
wx.showShareMenu
监听转发点击，添加转发信息
wx.onShareAppMessage
注：该接口需要添加到转发行为对应页面的js中
选择收货地址
使用微信开放能力
wx.chooseAddress
云开发实现微信支付
微信支付开发流程官方介绍
申请微信支付
商户
公司
通过tenpay云开发支付详细教学
添加购买方法buy并调云函数接口传递商品id，数量等信息
支付云函数
安装tenpay
拼装config请求参数
使用tenpay封装返回API
const api = new tenpay(config)
使用API对象方法获取支付参数并返回给前端
getPayParams
前端根据返回参数调用支付接口完成支付
wx.requestPayment
云函数实现
前端实现
原生方式支付云开发教学
客服
前端个人中心添加联系客服
open-type= “contact”
小程序平台绑定客服人员
登录网页端或小程序端进入客服页面
电商业务营销功能
营销活动
抽奖
拼团
秒杀
秀场
关注公众号
小程序canvas
动画wx.createAnimation
云数据库配置
邀请好友转发
团长+团员
拼团设计
拼团类型
拼团活动表
团员+团长表
秒杀难点
多人读取
秒杀超卖
请求上游拦截
秒杀架构
负载均衡
缓存队列
限流防刷
避免重复
小程序秒杀
截止日期倒计时
配置订单秒杀价格
云数据库配置秒杀
秀场+关注公众号
live-player
live-pusher
Offical-account组件
后台小程序关联公众号
