一、项目简介： 白喝吧这个项目是作为我论文答辩回来的开启的第一个小程序项目，也是我从事前端以来的第一个独立完成的小城序项目。距今已时隔两年，当看到项目复盘的这个活动时，我便想起了这第一个独立开发的小程序项目。从项目开启时的与甲方的需求沟通、技术选型、文档编写、编写页面、前后端数据交互以及微信支付的反复调试，到最后交付给甲方，一共经历45天。（至于记得这么清楚，这很感谢我大学时期的老师，是他一遍又一遍的提醒我要写工作日记）
二、项目背景： 关于为什么要做这个项目呢，主要是我去答辩期间，手头的项目移交给其他同事了。恰好boss新接了这个小程序。 白喝吧这个项目面向的业务主要是面向办理购买酒水的会员浏览商品、下单、同时获得相应的回扣，以及购买不同会员获得不同的权限，下线成员的销售量。。。 在开发过程中，我首先遇到ui设计图的问题，由于设计图是甲方提供的（好像对方是个学生，很难及时联系到对方的ui），在开发过程中会遇到页面的逻辑不通，且设计图出的很慢，这在很大程度上影响了我开发的进程。以至于这个问题由我们的主管和对方沟通后，才得以解决（因为很可能会影响交付日期。。。） 其次呢，我们的后端小哥是我在答辩期间新入职的，（就是项目启动的时候我们还在相互认识期间，这在一定程度上会对我们的数据交付进度产生影响）
三、实践过程： 白喝吧我选用了vant weapp作为框架，因为之前都是使用原生开发，前期会遇到一些比如如何引入、配置的问题。 如果是多个页面会用到，就在app.json中引入，如果是单个页面使用，则在相应的index.json中引入组件
"usingComponents": {
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index"
}
使用echarts时，需要引入依赖脚本
// 1、引入依赖脚本
import * as echarts from '../../ec-canvas/echarts';
// 2、进行初始化数据
允许获取公开信息及手机号码需要：
wx.login({
success(res) {
//发起网络请求向后台传递code换取token
console.log("打印code", res.code)
wx.request({
url: '访问路由地址',
method: 'post',
data: {
code: res.code,
},
success: function (data) {
console.log("打印获取的数据获取手机号", data）
// 缓存sessionkey
wx.setStorageSync('sessionkey', data.data.sessionkey)
const sessionKey = data.data.sessionkey
console.log('获取sessionKey', sessionKey)
that.setData({
sessionKey: data.data.sessionkey
})
}
})
}
})
// 查看是否授权
//获取用户本地是否是第一次进入新版本
var versions = wx.getStorageSync('versions');
if (versions == '1') {
wx.getSetting({
success: function (res) {
if (res.authSetting['scope.userInfo']) {
//调用共通的登录方法
app.util.getUserInfo(
function (userinfo) {
that.setData({
userinfo: userinfo
})
});
} else {
// 用户没有授权
// 改变 isHide 的值，显示授权页面
that.setData({
isHide: true
});
}
}
});
} else {
// 用户没有授权
// 改变 isHide 的值，显示授权页面
that.setData({
isHide: true
});
}
}
// 获取授权状态
scopeStatus() {
wx.getSetting({
success: res => {
console.log(res.authSetting['scope.userInfo']);
console.log('打印授权状态',res)
if (res.authSetting["scope.userInfo"]) {
wx.showLoading({
title: '加载中',
mask: true,
success: function(res) {
wx.switchTab({
url: '/pages/getphone/getphone',
})
},
})
this.setData({
isScope: false
});
} else {
this.setData({
isScope: true
});
}
}
});
},
// 获取用户信息
xc() {
var that = this
wx.login({
success(res) {
if (res.code) {
//发起网络请求向后台传递code换取token
console.log("打印code",res.code)
wx.request({
url: '路由地址',
method: 'post',
data: {
code: res.code,
},
success: function(data) {
console.log("返回用户信息")
console.log(data)
// 缓存token
wx.setStorageSync('token', data.data.token)
wx.setStorageSync('sessionkey', data.data.sessionkey)
const sessionKey = data.data.sessionkey
console.log('获取sessionKey', sessionKey)
that.setData({
sessionKey: data.data.sessionkey
})
//获取用户头像及昵称传后台入库
wx.getUserInfo({
//成功的回调函数，获取到用户头像以及昵称
success(res1) {
console.log('8409328048', res1)
//传值给后台，根据token入库
console.log('提交，', wx.getStorageSync('token'))
console.log('提交，', wx.getStorageSync('sessionkey'))
console.log('提交，', res1.userInfo.nickName)
console.log('提交，', res1.userInfo.avatarUrl)
wx.request({
url: '路由地址',
method: 'POST',
data: {
token: wx.getStorageSync('token'),
username: res1.userInfo.nickName,
usertv: res1.userInfo.avatarUrl,
},
success: function(res) {
console.log('返回值，', res)
wx.reLaunch({
url: `跳转页面`,
})
}
})
}
})
}
})
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},
但好在上手以后效率得以提升，这大大的提高了我的页面开发进度。而至于为什么选用这个框架呢，当然是因为vant是轻量、可靠的小程序 UI 组件库。
嗯！现在对于小程序开发，如果没有特别需求，我都是使用这个框架。
五、总结思考： 这个项目当时做完还是挺有成就感的吧！因为这个项目交付的那一刻，意味着我将近两个月的努力得到了甲方的认可，同时在这期间我懂得了应该如何与客户交流，如何快速和同事磨合，提高工作效率也学会如何远程向客户报备当前的项目进度（原来是需要边向客户演示项目边讲解！而第一次我则是全程沉默不语。。。还好对方没有太在意）
作者：掘金酱 链接：juejin.cn/post/693932… 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
