一、项目基本效果
IMG_1783.PNG
WeChatefb6bc3a3b27596687426d135e1d8020.png
IMG_1788.PNG
IMG_1801.PNG
二、后台框架搭建
项目后端使用node.js,MongoDB数据库的mongoose框架，Koa网络框架,阿里云服务器OSS对象存储。
koa网络框架,利用了koa框架实现http请求，比较简单可以查看具体代码，或者查询koa相关的使用方法。下边贴出基本的实现。
const app = new Koa();
const router = require('koa-router')();
const bodyParser = require('koa-bodyparser');
// log request URL:
app.use(async (ctx, next) => {
console.log(`Process ${ctx.request.method} ${ctx.request.url}...${ctx.request.body}`);
await next();
});
// add url-route:
router.get('/hello/:name', async (ctx, next) => {
var name = ctx.params.name;
ctx.response.body = `<h1>Hello, ${name}!</h1>`;
});
app.use(bodyParser());
app.use(router.routes());
app.listen(3000);
MongoDB非关系型数据库，利用mongoose框架，搭建项目所需的数据库结构。下边贴出基本的实现。
// 引入模块
var mongoose=require('mongoose');
// 连接数据库
mongoose.connect('mongodb://localhost:27017/coin')
// 得到数据库连接句柄
var db=mongoose.connection;
//通过 数据库连接句柄，监听mongoose数据库成功的事件
db.once('open' ,() => {
console.log(
'连接数据库成功'
);
})
//定义表数据结构
var coinModel=new mongoose.Schema({
id:Number,
wechat_id:String,
title:String,
front_title:String,
back_title:String,
front_url:String,
back_url:String,
isvalid:{type:Boolean,default:true},
})
// 将表的数据结构和表关联起来
var coinModel=mongoose.model("coin",coinModel);
//导出数据
module.exports={
coinModel:coinModel
}
三、阿里云centos服务端配置
首先最基础的是域名购买，域名备案，SSL证书配置，Nginx配置，基本上比较简单，阿里云上都有教程的，下边是我Nginx的配置信息:
proxy_pass:http://localhost:3000;,这条就是设置了反向代理，将域名直接代理到3000端口下，也就是我node服务所指定的端口。443端口就是https默认的访问端口，正确配置下证书的地址就能使用https访问了。
server {
listen 80 default backlog=2048;
listen 443 ssl http2 default_server;
listen [::]:443 ssl http2 default_server;
server_name [www.xiaoyun7.com;](http://www.xiaoyun7.com;/)
root /usr/share/nginx/html;
ssl_certificate "/etc/nginx/chain/1945854_[www.xiaoyun7.com.pem";](http://www.xiaoyun7.com.pem/)
ssl_certificate_key "/etc/nginx/chain/1945854_[www.xiaoyun7.com.key";](http://www.xiaoyun7.com.key/)
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location /{
proxy_pass [http://localhost:3000;](http://localhost:3000;)
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
MongoDB按照一般教程设置即可，注意设置为开机启动，oss文件服务器需要绑定下我的域名，这样就能通过我的域名上传和下载文件了，这里也就是在阿里云控制台oss的域名管理中，上传下新的证书也就好了。oss比较简单，建一个唯一的Bucket然后会生成自己专属的域名，并支持https，其实不用绑定域名，可直接添加但小程序域名列表里。
四、小程序开发要点
阿里云OSS文件上传，我这里将key和密钥直接写在了小程序代码里(最好通过服务器获取)，参考代码是来自(微信小程序上传文件到阿里云OSS的代码)。
因为我的图片是需要裁剪的，所以图片选择的时候增加了图片剪裁页面，参考代码为we-cropper.js这个文件，github上也有相应的开源代码，我也是拿别人的来做的。
简单的3d效果，我是通过图片堆叠来实现的，就是改变坐标轴的Z轴放置图片，比如我厚度为10px，我就会放10张图片叠在一起，每张相隔1个px，然后最后一张做下翻转，这样就有3D的硬币效果了。
然后是抛掷动画：用的是keyframes这个关键帧动画效果，这里遇到的问题就是keyframes只会在页面第一次加载的时候做动画，那么我的做法就是利用js不断切换样式，这样下次点击抛掷的时候就有新的动画效果。
#euro {
width: 150px;
height: 150px;
margin-left: -75px;
margin-top: -75px;
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
animation: spin 5s linear;
}
@keyframes spin {
0% {
top: 50%;
transform: rotateX(0deg);
}
10% {
top: 40%;
transform: rotateX(1440deg);
}
20% {
top: 30%;
transform: rotateX(2160deg);
}
30% {
top: 20%;
transform: rotateX(2880deg);
}
40% {
top: 15%;
transform: rotateX(2960deg);
}
50% {
top: 10%;
transform: rotateX(3040deg);
}/* 60% {
top: 15% ;transform: rotateX(3120deg);
}
70% {
top: 20% ;transform: rotateX(3200deg);
} */
100% {
top: 50%;
transform: rotateX(4320deg);
}
}
总结
这个是我个人从原型设计到UI效果到前端开发到后端开发完全个人完成的一个项目，当然非常的简陋，这里就当是记录下个人的学习记录，希望有看到的大神们多多提意见，帮助小弟进步。github地址https://github.com/Jianghongjohn/weapp-luck
网友评论