目录
目录
效果预览
登录
微信登录
账号密码登录
主页
主页之搜索
主页之详情
主页之导出
主页之渠道量统计
渠道及通道管理
通道编辑
渠道编辑
订单管理
订单管理之订单编辑
订单管理之区域限量
订单管理之区域配置城市选择
代码预览
代码结构预览
要点讲解
登录
此小程序的登录有两种方式,分别是微信授权登录和账号密码登录。账号密码登录比较简单,就不多说。
由于该小程序不向大众开放,只允许内部员工使用,所以并非所有微信号授权以后都可以登录,手机号与账号密码在同一张数据库表,有且仅有在电脑端后台注册过的手机号才允许微信授权登录。
手机号授权登录操作流程:
- 点击页面上的微信登录按钮,微信自动弹出官方授权个人信息的弹窗
- 点击允许后 弹出我们自定义的授权手机号弹窗,点击授权,弹出官方授权手机号的弹窗
- 再次点击允许后我们就获取到了手机号,此时将手机号传到后台去匹配用户名密码,直接在后台完成后续登录步骤
手机号授权登录的逻辑流程:
- 用手机号登录的逻辑是用手机号去后台匹配账户名和密码,匹配上后以账户名和密码直接在后台登录。当然前提是怎么获取到手机号,大概分为三步,如下
- 获取sessionKey:参数appid,secretkey,grantType,和code。前三个参数都是固定的,可以在微信小程序后台查到,最后一个code就是wx.login返回的。页面点击微信登录弹出授权个人信息窗后点击允许授权,之后我们调用微信的wx.login({})方法,该方法会返回openid和code,opneid暂时用不到,先不管他。我们在自己的服务器上需要写一个接口来通过这个code换取sessionKey,当然直接在js以code为参数请求官方的接口也可以获取到sessionKey。随后将sessionKey返回给前端。
- 解密得到手机号:参数:encryptedData,iv,sessionKey。页面上必须要有一个获取手机号的按钮,用户点击后弹出官方的授权按钮,点击允许授权后就会获得加密的手机号字符串encryptedData,这个encryptedData字符串必须要iv和sessionKey才能解密。这个解密的过程可以再js中完成,也可以在java服务器端完成。解密完成后就获取到手机号了。sessionKey我们已经获取到了,怎么获取encryptedData和iv呢,只需要一个button 按钮就好了,open-type=“getPhoneNumber” bindgetphonenumber="getPhoneNumber"这两个属性是官方固定的,不允许修改:
<button class="cu-btn line-green text-green" style="margin-left:10px" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确定</button>
getPhoneNumber: function (e) {
var that = this;
var data = {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv,
sessionKey: that.data.session_key,
}
console.log(data);
if (e.detail.errMsg == "getPhoneNumber:ok") {
// 做解密的操作,可以直接js解密,也可以请求自己的后台服务器解密
}
},
要点总结:
先授权个人信息获取到code,再根据code获取到sessionKey,根据sessionKey解密字符串得到手机号。授权个人信息和手机号只能通过官方按钮得到返回值,没有接口进行授权。
页面上至少有两个按钮,一个是授权个人信息,一个是授权手机号,先授权个人信息,再授权手机号。点击授权个人信息后弹出官方授权个人信息弹窗,允许后再点击授权手机号按钮,随后会弹出官方授权个人手机号弹窗,点击允许后就可以获取到加密串和iv了,随后就解密
侧边栏条件筛选
此处用到了一个侧边栏插件side,这个插件找不到出处了,侵删。
js:
// components/side/index.js
var touchDot = 0; //触摸时的原点
var time = 0; // 时间记录,用于滑动时且时间小于1s则执行左右滑动
var interval = ''; // 记录/清理 时间记录
var nth = 0; // 设置活动菜单的index
var nthMax = 5; //活动菜单的最大个数
var tmpFlag = true; // 判断左右华东超出菜单最大值时不再执行滑动事件
Component({
properties: {
//是否有遮罩
mask: {
type: Boolean,
value: true
},
//是否全屏
fullScreen: {
type: Boolean,
value: false,
},
//类型 左侧 右侧
type: {
type: String,
value:</