最近微信小店开放了，赶着微信全面开放之前，把自己的小程序开源出来给大家使用～
小程序效果
开发心得
如何在项目中集成云开发
一开始项目并非基于云开发而开发的，目前考虑用云开发，因此，需要在项目中开启云开发的相关选项。
首先，在小程序文件夹中建立 cloud 文件夹，并在package文件中配置，建立用户登录的云函数并上传到微信小程序云中。相关的操作可以参考官方文档。
我在项目目录中添加了 cloud 和 miniprogram 两个目录，并在 project.config.json 文件夹进行配置
{
"miniprogramRoot": "./miniprogram"
"cloudfunctionRoot": "./cloud/"
}
开通云开发
配置完成后,可以点击控制台中的「云开发」来开通云开发。
在云开发的界面中配置，并开通云开发。
开通数据库集合
云开发不会自动创建数据库集合，因此，你需要手动创建集合。分别创建 店铺表Seller、分类表Category、商品表Food、订单表Order、地址表Address、用户表_User。
数据操作
有了数据库的表后，就可以在代码中对数据进行操作了。
下方是我进行目录操作的代码。
const db = wx.cloud.database()
const { showModal } = require('../../utils/utils')
Page({
onLoad: function(options) {
// 管理员认证
getApp().auth()
if (options.objectId) {
// 缓存数据
this.setData({
isEdit: true,
objectId: options.objectId
})
// 请求待编辑的分类对象
db.collection('Category')
.doc(options.objectId)
.get()
.then(res => {
// 获取分类信息
this.setData({
category: res.data
})
})
}
},
add: function(e) {
var form = e.detail.value
if (form.title == '') {
wx.showModal({
title: '请填写分类名称',
showCancel: false
})
return
}
form.priority = Number.parseInt(form.priority)
// 添加或者修改分类
// 修改模式
if (this.data.isEdit) {
const category = this.data.category
db.collection('Category')
.doc(category._id)
.update({
data: form
})
.then(res => {
console.log(res)
showModal()
})
} else {
db.collection('Category')
.add({
data: form
})
.then(res => {
console.log(res)
showModal()
})
}
},
showModal() {
// 操作成功提示并返回上一页
wx.showModal({
title: this.data.isEdit ? '修改成功' : '添加成功',
showCancel: false,
success: () => {
wx.navigateBack()
}
})
},
delete: function() {
// 确认删除对话框
wx.showModal({
title: '确认删除',
success: res => {
if (res.confirm) {
const category = this.data.category
db.collection('Category')
.doc(category._id)
.remove()
.then(res => {
console.log(res)
wx.showToast({
title: '删除成功'
})
wx.navigateBack()
})
}
}
})
}
})
联表查询
在使用数据库时，难免要进行联表查询，云开发支持在云函数侧进行联表查询，你可以参考我的代码，来实现联表查询的功能。
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
const result = await db.collection('Food')
.aggregate()
.lookup({
from: 'Category',
localField: 'category',
foreignField: '_id',
as: 'categories'
})
.end()
// .orderBy('priority', 'asc')
// .get()
console.log(result)
return result.list
}
文件上传
在小程序的操作中，难免会遇到需要进行图片上传的场景。在进行图片上传时，云开发提供了方便的云存储供我们查询数据。
在获取到文件的本地路径后，调用 wx.cloud.uploadFile 即可上传文件。
chooseImage() {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: res => {
const tempFilePaths = res.tempFilePaths
const file = tempFilePaths[0]
const name = utils.random_filename(file) //上传的图片的别名，建议可以用日期命名
console.log(name)
wx.cloud.uploadFile({
cloudPath: name,
filePath: file, // 文件路径
}).then(res => {
console.log(res)
const fileId = res.fileID
// 将文件id保存到数据库表中
db.collection('Seller').doc(this.data.seller._id)
.update({
data: {
logo_url: fileId
}
}).then(() => {
wx.showToast({
title: '上传成功'
})
// 渲染本地头像
this.setData({
new_logo: fileId
})
}, err => {
console.log(err)
wx.showToast({
title: '上传失败'
})
})
})
}
})
}
微信支付逻辑的实现
作为一个商城，难免会有微信支付相关逻辑的实现。在这种情况下，可以借助云开发提供的微信支付云调用功能实现快速的 API 调用和接口的实现。
绑定商户
在使用云开发提供的微信支付时，需要先执行微信支付的绑定，在云开发控制台添加相应的商户号
添加后微信会发来通知
根据提示，开通账号即可。
如果不绑定，将报“受理关系不存在”的错误
函数代码调用
配置完成后，只需要在云函数中调用微信支付的接口，就可以实现相关调用的能力
const cloud = require('wx-server-sdk')
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
console.log('请求中')
console.log(cloud.getWXContext().ENV)
let { orderId, amount, body } = event
const wxContext = cloud.getWXContext()
const res = await cloud.cloudPay.unifiedOrder({
body: body,
outTradeNo: orderId,
spbillCreateIp: '127.0.0.1',
subMchId: '1447716902',
totalFee: amount,
envId: 'dinner-cloud',
functionName: 'pay_cb'
})
return res.payment
}
这里 functionName: 'pay_cb'指的就是支付成功后，微信支付那侧给我的回调信息，后面我们就用它来更新我们的订单状态
小程序端代码调用
调用云函数后，会获得微信支付所需要的各种参数，
这个时候，就可以在小程序端调用微信支付接口，进行支付，相关代码可以参考
const { result: payData } = res
wx.requestPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package,
signType: 'MD5',
paySign: payData.paySign,
success: res => {
console.log('支付成功', res)
wx.showModal({
title: '支付成功',
showCancel: false,
success: () => {
// 跳转订单详情页
wx.navigateTo({
url: '/order/detail/detail?objectId=' + order._id
})
}
})
},
...
微信支付回调处理
微信统一下单里一个pay_cb回调函数，它是一个云函数，后续微信支付的支付信息将会发送在这个函数中，相应的，我们需要编写处理的方法
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
// API 调用都保持和云函数当前所在环境一致
env: cloud.DYNAMIC_CURRENT_ENV
})
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
console.log('支付回调')
console.log(event)
console.log(cloud.getWXContext().ENV)
const orderId = event.outTradeNo
const resultCode = event.resultCode
if (resultCode === 'SUCCESS') {
const res = await db
.collection('Order')
.doc(orderId)
.update({
data: {
status: 1
}
})
console.log(res)
return { errcode: 0 }
}
}
总结
云开发体验下来，优点自不必多说，微信登录与支付原生支持，调用与调试都很方便，特别是不用启本地服务开发，真的好用；
这个小程序的源码我已经开源了，你可以访问 Gitee 获取源码，自行使用～

如何开发一个自制题库答题考试的工具，可以自己输入题目创建考试的小程序。自助出题，然后转发给别人考试，直接在手机里打开就可以答题，也可以将考卷分享到微信群里，群里的人同时还是答题。

可以自己自制出题考试的软件。下面就给大家介绍下如何用这个软件出题考试。





每个人都可以通过这个小程序系统出考题，然后给到你的用户考试（同事、学生或者客户都可以）。 首先，打开答题考试王小程序，点击我要出题。进到出题界面 。     要出一场考试，需要分两个步骤。一个是添加考卷，一个是添加考题。    添加考卷和添加考题没有先后顺序，随便先开始哪个都可以。  点击添加考题，就可以出题了。   点击添加考卷，就可以出考卷了，添加考卷里你可以添加设置你的考试信息，比如考卷的名字，考试的开始时间、结束时间以及是否设置红包，让别人答题可以领到红包。 添加设置好了考卷，就可以在你的考卷列表里找到你的这场考卷，点击编辑，然后点击增加考题，就可以把你添加好的考题题目，添加到你的考卷里了。

              Gateway::sendToGroup($groupName=$redisName, $sendDataString);

                $ary['groupCount']= Gateway::getClientCountByGroup($groupName);

                $ary['groupClientsession']= Gateway::getClientSessionsByGroup($groupName);

                $ary['getAllClientCount']= Gateway::getAllClientCount($groupName);

 

打开答题王小程序，在小程序的首页找到——我要出题版块——点击进去以后可以看到右下角的悬浮按钮有两个：一个是添加考题，另一个是添加考卷。在里面添加考题和添加考卷就可以了。   

   



（微信扫一扫即可进入答题小程序体验）

对上面说到的，如果还有什么不明白的，可以和我微信沟通。（微信号：lhb-1025）

响应式长度单位rpx

->问题引入：如何让元素大小适配不同宽度屏幕

希望图片宽和高均为屏幕宽度一半

<view class='container'>
  <image class='about-banner' src="/images/004.jfif"></image>
  <text>电影周围看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：xxxx</text>
</view>

.container {
  background-color: #eee;
  height:100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
}
.about-banner {
  width: 187.5px;
  height: 187.5px;
}

希望在所有设备上图片的宽和高都能保持为屏幕宽度的一半

使用px这种绝对长度无法始终保持为屏幕的一半，这就是小程序引入的一个相对长度单位rpx。

小程序规定所有设备的屏幕宽高均为750rpx

<view class='container'>
  <image class='about-banner' src="/images/004.jfif"></image>
  <text style="font-weight: bold; font-size: 60rpx;">电影周围看</text>
  <text>我每周推荐一部好片</text>
  <text>我的微博：xxxx</text>
</view>

.container {
  background-color: #eee;
  height:100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
}
.about-banner {
  width: 375rpx;
  height: 375rpx;
  border-radius: 50%;
}

 

-仅展示本周推荐电影

-如何快速调试新增页面

-公共样式表app.wxss

-配置weekly页的标题

 

pages下新建weekly文件夹

里面有weekly文件四个，后缀分别js，json，wxml，wxss

weekly.js

Page({})

weekly.json

{
  "usingComponents": {}
}

weekly.wxml

<view>
  <text>本周推荐</text>
  <image src='/images/Adobe.png'></image>
  <text>教父</text>
  <text>点评：最精彩的剧本，最真实的黑帮电影。</text>
</view>

每一个用户可能访问到的页面，都需要在前局配置中来登记他的访问路径。

app.json

{
  "pages": [
    "pages/weekly/weekly",
    "pages/about/about"
  ]
}

weekly.wxml

<view class='container'>
  <text>本周推荐</text>
  <image src='/images/Adobe.png'></image>
  <text>教父</text>
  <text>点评：最精彩的剧本，最真实的黑帮电影。</text>
</view>

weekly.wxss

.container {
  background-color: #eee;
  height:100vh;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items:center;
}

weekly.json

{
  "usingComponents": {},
  "navigationBarTitleText": "每周推荐"
}