暑假总结
暑假期间主要写一个小程序项目和修改另一个小程序,以下主要介绍一下项目经验以及技术
SC项目的开始
- 第一步:拿到项目首先写开发文档,主要是设计好数据库(设计好数据库最为关键!!)
- 第二步:首先建立好用户数据库,判断用户是新用户还有旧用户(保证一位用户一条数据),之后保留用户数据于本地。
- 第三步:可以开始写页面
SC项目小经验
tips:
- 该项目使用小程序云开发,用于用户注册公司,功能是做一个加一个,我的数据库设计得不是很好,有点乱糟糟的,也提醒大家在规划好功能后,类似板块的数据可以放到一个表中。例如在场地租赁和场地挂靠两个板块,我们做的时候在用户选择某一个场地后会去收集用户的姓名、联系电话、微信号等信息,此时两个页面中收集的数据可以放到一个表中,但是再加个参数做一下区分,让管理员可以知道我们用户是提交哪一个板块的信息。
- 底部要是多个相同的话可以抽取出来成为一个单独的组件,再从父组件中引入底部子组件并且传递信息,子组件中触发按钮后可以在父组件中调用某一方法。
- 后台数据库连接CMS内容管理器,可以对数据库进行增删改查。
SC项目技术总结
1.函数尽量单一,在uploadID这个主函数里面去调用其他函数,其他函数使用promise将值返回,之后再执行下一个函数(类似如下)
async uploadID(e) {
const upLoadImg = await this.chooseImage()
const resId = upLoadImg.fileID
const getUrlByIdinfo = await this.getUrlById(resId)
}
chooseImage() {
return new Promise((resolve, reject) => {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
}).then(res => {
resolve(res)
}).catch(err => {
console.log(err)
resolve(err)
})
})
},
2.CMS数据的建立
- 轮播图等(点击之后可跳转页面):在CMS设计模型的时候添加一个图片路径,当在小程序页面点击后可以拿到该路径并跳转到相关页面。可以选择跳转小程序或者跳转H5页面,此时判断是跳转哪一个类型,并做对应的处理。
- 枚举类型适合该数据库的模板相同,但是类型不一样,例如场地租赁和场地挂靠,收集的数据格式相同,但是是两个板块。
跳转H5页面
要单独放在一个页面中才能生效,url是从前一个需要跳转的页面传递过来的
//主页面,将参数传到h5页面
wx.navigateTo({
url: '../H5Page/H5Page?url=' + url
})
//h5页面
<web-view src="{{url}}"></web-view>
类似的方法可以使用一个函数
类似的方法可以用一个函数处理,在xwml页面中添加data-xxx="1"根据不同的xxx值判断区分,例如以下跳转页面的
//xwml
<view class="item" bindtap="pushTo" data-push="register">
<view class="title">A</view>
</view>
<view class="item" bindtap="pushTo" data-push="agency">
<view class="title">B</view>
</view>
//js,根据传递的不同的push值跳转不同页面
async pushTo(e) {
const push = e.currentTarget.dataset.push
wx.navigateTo({
url: '../' + push + '/' + push,
})
},
支付
支付板块需要开通商户号,其他博客有详细的介绍,这里就不介绍了
订单模板之一(每个订单至少应该都有订单编号以及订单状态)
订单编号:在提交订单的时候随机生成自定义位数的订单(这里不列出方法,可以自己上网找)
订单状态:一般分未支付和已支付,最好使用英文来表示
//点击支付后触发的函数(js)
/**
* 支付点击监听
*/
async payTap(e) {
wx.showLoading()
const payEvent = {
type: 'pay',
body: '测试',
totalFee: 订单价格,
orderTradeNo:订单编号,
}
const paymentObj = await callCloudFun('wxPay', payEvent)//云函数
const payment = paymentObj.data.result.payment//将云函数返回的值放入以下函数
const payResult = await this.wxPayRequest(payment)
console.log(payResult,'支付返回函数')
wx.hideLoading()
},
/** 支付操作
* @param {object} payment 支付所需参数对象
*/
wxPayRequest(payment,siteRorderTradeNo) {
const _this=this
return new Promise((resolve, reject) => {
wx.requestPayment({
...payment,
success(res){
_this.updataOrder(siteRorderTradeNo)
resolve({status: true, data: res})
},
fail(err){
resolve({status: false, data: err})
}
})
})
},
wxpay云函数
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
/**
*
* @param {string} event.body 商品描述
* @param {number} event.totalFee 支付金额
*/
exports.main = async (event) => {
const res = await cloud.cloudPay.unifiedOrder({
"body" : event.body, //商品描述
"outTradeNo" :event.orderTradeNo, // 商户订单号
"tradeType": "JSAPI", // 交易类型
"subMchId" : "xxxxx", // 商户号
"totalFee" : event.totalFee,
"envId": "xxxx",
"functionName": "getOrderInfo", // 交易申请回调云函数,在该函数里面去修改订单支付状态
"spbillCreateIp": "123.12.12.123"
})
return res
}
补贴板块(实现文件预览功能)
该板块是在CMS上面将文件上传,后在数据库拿到这个文件的链接后让它保存到本地
拿到数据库的文件链接fileUrl后将fileUrl传到toUploadFile函数里面
async toUploadFile(fileUrl) {
wx.downloadFile({
url: fileUrl,
success(res) {
// console.log(res)
//保存到本地
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function (res) {
const savedFilePath = res.savedFilePath;
// 打开文件
wx.openDocument({
filePath: savedFilePath,
success: function (res) {
console.log('打开文档成功')
},
});
},
fail: function (err) {
console.log('保存失败:', err)
}
});
}
})
},
订阅通知
先到在微信公众平台手动配置获取模板,选择适合自己的模板
因为该SC小程序想要在用户提交订单后可以通知给管理员。但是订阅没办法一直无限发送,需要自己增加订阅次数。
我的想法是在用户第一次访问并且同意该程序获取其微信昵称以及头像时保存用户信息在数据库用户表中(user),并且添加一个是否管理员身份(默认admin:false),并且添加订阅次数(默认为subNum:0),管理员可以在后台更改用户管理员身份(admin:true),只有时在打开小程序“我的”页面时可以看到订阅通知这一行,非管理员无法看到。
管理员可以通过点击订阅次数来添加订阅次数。
在对数据库(user)表中对该管理员的订阅次数+1,此时可以使用原子操作,
const _ = db.command
db.collection('user').doc('xxx').update({
data: {
subNum: _.inc(1)
}
})
当在云函数中给所有管理员(admin:true)发送消息之后,再对查到到的所有管理员的订阅次数-1(也是使用原子操作_.inc(-1))