看到今年的flag,学习前端的小目标_前端季度目标_啥咕啦呛的博客-CSDN博客
我来交作业啦:目标四:熟练运用微信提供的api,开发小程序或公众号
主要分为两个模块:
新年祝福:功能主要是新年祝福展现+背景喜庆图片,生成本地图片,可以发朋友圈或发给好友。
新年目标:功能也是文字+背景图片,生成本地图片,用来立flag.
先列一下整个小程序的路由:
体积主要是我找的背景图片占了大部分。
首页
没什么好说的哈,就是两按钮,跳转下一页。
wxml代码:
<view class="index">
<view class="banner">
<image src="./hengfu.jpg" mode=""/>
</view>
<view class="iconlist">
<view class="iconBtn" bindtap="tozhu">
<image src="./zhu.png" alt=""/>
<text>新年祝福</text>
</view>
<view class="iconBtn" bindtap="tosao">
<image src="./xin.png" alt=""/>
<text>新年目标</text>
</view>
</view>
</view>
js代码:
tozhu(){
wx.navigateTo({url: `/pages/wishindex/index`})
},
tosao(){
wx.navigateTo({url: `/pages/flagindex/flag`})
},
wxss自己脑补。
新年祝福填写页:
wxml代码:
<view class="container">
<form bindsubmit="save">
<!-- to name -->
<view class="item">
<text class="key">对方称呼</text>
<input bindinput="bindChangeToName" name="toname" class="value" value="{{toname}}"></input>
</view>
<!-- from name -->
<view class="item">
<text class="key">祝福落款</text>
<input bindinput="bindChangeFromName" name="nickName" class="value" value="{{fromname}}" ></input>
</view>
<!-- best wishes -->
<view class="item best-wishes">
<textarea bindinput="bindChangeText" class="textarea" name="best-wishes" value="{{wishes}}" id="best-wishes" ></textarea>
<text class="word-tips {{isRed ? 'red' : ''}}">100字以内</text>
</view>
<!-- select panel -->
<view class="select-panel">
<button class="tips" hover-class="tapped" bindtap="selectwish">
<text>随机祝福语></text>
</button>
</view>
<!-- controls -->
<view class="btns">
<button form-type="submit" class="save-btn" hover-class="hover-btn" bindtab="save">保存</button>
</view>
</form>
</view>
js代码:
const app = getApp();
const sentence = {
1: '你和红包之于我,都是此生最好的安排!2023年,兔年大利,平安喜乐!',
2: '兔年来到,福兔祝你鸿福齐天,万事如意;祥兔祝你财气冲天,好运无穷;吉兔祝你吉星高照,心想事成;灵兔祝你天天开心,福寿安康;朋友则祝你兔年如意,万事顺心!',
3: '怕三十晚上祝福太多,怕初一早上鞭炮太响,赶紧给你送来祝福,生活别太累,开心就很好!',
4: '今夜烟花满天,幸福在侧,多想与你同醉,把美好往昔细细品味,亲爱哒,新年快乐!',
5: '平时联系少,你可不要恼;生活忙碌事,推也推不了;新年最美妙,祝福把你找;有空见个面,快活又逍遥',
6: '2023年,你要365天天天开心,8760小时时时快乐,5256000分分分精彩,31536000秒秒秒幸福!',
7: '兔年耳长长,招运进宝;兔年眼圆圆,风光无限;兔年腿蹦蹦,事业上冲;兔年尾短短,烦恼不见;兔年唇三瓣,快乐无限;兔年身白白,鸿运不歇;兔年舌舔舔,新年如愿!',
8: '兔年到来鞭炮闹,红妆对联也娇俏,迎春花儿悄然笑,祝福声声不停消,愿你在新年伊始之际把幸福紧紧套牢,把快乐紧紧拥抱,和好运互相依靠,把忧伤统统抛掉。兔年快乐。',
9: '兔年大吉喜气临,昂首摆尾迎春来。双眼圆睁看世界,万水千山尽开颜。胡须翘翘美姿态,人人开心祝平安。巨大身躯摇摆摆,坎坷困境当笑谈。愿你兔年万事顺,吉星高照!',
10: '兔年除夕送您五个团圆:愿老人盼子孙平安归来,团团圆圆;愿女人盼爱人归来,团团圆圆;愿事业盼成功归来,团团圆圆;愿爱情盼甜蜜归来,团团圆圆;愿除夕盼亲朋归来,团团圆圆。',
11: '兔儿蹦兔儿跳,新年鸿运到;兔儿欢兔儿笑,新年身体好;兔儿睡得香,出门贵人帮;兔儿耳朵长,万事都吉祥;祝新年快乐,新年吉祥!',
12: '兔年到,包水饺,萝卜白菜拌馅好;红灯笼,门前照,财神铺下金银道;放礼花,响鞭炮,祥光瑞气身边绕;要起早,多蹦跳,身康体健呱呱叫!',
13: '兔耳长长,招运进宝;兔眼圆圆,风光无限;兔腿蹦蹦,事业上冲;兔尾短短,烦恼不见;兔唇三瓣,快乐无限;兔身白白,鸿运不歇;兔舌舔舔,新年如愿!',
14: '兔耳青云直上前程好,兔眼红红火火进步好,兔嘴无声胜有和谐好,兔毛温暖你我共享好,金龙送宝全收到,祝华夏子孙新年好。',
15: '春天的钟声响,兔年的脚步迈,祝兔年的钟声,敲响你心中快乐的音符,幸运与平安,如春天的脚步紧紧相随!春华秋实,我永远与你同在!',
16: '兔年好!给您拜年了!过去的一年我们合作得都很愉快,谢谢您的关照,祝您兔年快乐!吉祥如意!心想事成!',
17: '新春福兔送吉祥,银兔进家富满堂,肥兔祝你寿延长,奶兔为你送健康,耕兔愿你粮满仓,红兔祝你事业旺,兔郎望你爱情长!',
18: '兔年运程零时的钟声响彻天涯,新年的列车准时出发。它驮去一个难忘的岁日,迎来了又一度火红的年华。祝新年快乐!',
19: '愿你新的一年:事业“兔”飞猛进,“钱”兔无量,“兔”步青云,大展宏“兔”,前“兔”似锦!',
20: '兔兔到,拜大年,喜鹊枝头叫。风雨顺,收入高,事事如意步步高。',
}
Page({
data: {
"toname": "张三",
"fromname":"happy",
"wishes":"你和红包之于我,都是此生最好的安排!2023年,兔年大利,平安喜乐!",
"isRed":false,
},
onReady() {
// console.log(app.globalData.userInfo)
},
bindChangeToName:function(val){
this.setData({
"toname": val.detail.value,
})
},
bindChangeFromName:function(val){
this.setData({
"fromname": val.detail.value,
})
},
bindChangeText:function(val){
if(val.detail.value.length>100){
this.setData({
"isRed": true,
})
}
this.setData({
"wishes": val.detail.value.substring(0,100),
})
},
save:function(){
app.globalData.toname = this.data.toname;
app.globalData.fromname = this.data.fromname;
app.globalData.wishes = this.data.wishes;
wx.navigateTo({
url: `/pages/wish/wish`
})
},
selectwish(){
let random
this.setData({
"wishes": sentence[Math.floor(Math.random() * 20)],
})
},
})
wxss自己脑补:
生成新年祝福页:
wxml代码:
<view class="container">
<view class="inner">
<canvas class="myCanvas" canvas-id="myCanvas" ></canvas>
<view class="wishesbox">
<image src="{{bg}}" class="image" mode=""/>
<view class="block">
<text class="toname">祝:{{info.toname}}</text>
<text class="wishes">{{info.wishes}}</text>
<text class="fromname">{{info.fromname}}</text>
<text class="fromname">{{info.today}}</text>
</view>
</view>
<view class="bot-button">
<button bindtap="goback">重新编辑</button>
<button bindtap="tochangebg">换背景图</button>
<button class="mainbutton" bindtap="sendwishes">送祝福</button>
</view>
</view>
</view>
js代码:
const app = getApp();
const bgs = {
0:'./bg.jpg',
1:'./bg1.jpg',
2:'./bg2.jpg',
3:'./bg3.jpg',
}
Page({
/**
* 页面的初始数据
*/
data: {
info:{
"toname": "",
"fromname":"",
"wishes":"",
"today":"",
},
bg:'./bg.jpg',
i:0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
var date = new Date();
var seperator1 = "/";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
this.setData({
info:{
"toname": app.globalData.toname,
"fromname":app.globalData.fromname,
"wishes":app.globalData.wishes,
"today":currentdate,
},
"bg": './bg.jpg'
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
console.log(app.globalData.toname);
console.log(app.globalData.fromname);
console.log(app.globalData.wishes);
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
return {
title: `${this.data.info.fromname}给您发来祝福`,
desc: "你也可以制作祝福话送给TA哟!",
path: '/pages/index/index'
}
},
//返回上一页
goback(){
wx.navigateBack()
},
// 换背景
tochangebg(){
if( this.data.i>3){
this.setData({
i:0,
})
}else{
this.setData({
i:this.data.i+1,
})
}
this.setData({
bg: bgs[this.data.i],
})
},
// 授权保存图片
sendwishes(){
let _this = this;
wx.getSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
_this.saveImg();
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
_this.saveImg();
},
fail(){
wx.showToast({
title: '您没有授权,无法保存到相册',
icon: 'none'
})
}
})
}else {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
_this.saveImg();
}else{
wx.showToast({
title:'您没有授权,无法保存到相册',
icon:'none'
})
_this.setData({ isSaving: false });
}
}
})
}
}
})
},
toFormateStr (ctx, str, draw_width, lineNum, startX, startY, steps ) {
var strWidth = ctx.measureText(str).width; // 测量文本源尺寸信息(宽度)
var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;
var liner = Math.ceil(sreLN); // 计算文本源一共能生成多少行
let strlen = parseInt(str.length / sreLN); // 等比缩放测量一行文本显示多少个字符
// 若文本不足一行,则直接绘制,反之大于传入的最多行数(lineNum)以省略号(...)代替
if (strWidth < draw_width) {
ctx.fillText(str, startX, startpoint);
} else {
for (var i = 1; i < liner + 1; i++) {
let startPoint = strlen * (i-1);
if (i < lineNum || lineNum == -1) {
keyStr = str.substr(startPoint, strlen);
ctx.fillText(keyStr, startX, startpoint);
} else {
keyStr = str.substr(startPoint, strlen-5) + '...';
ctx.fillText(keyStr, startX, startpoint);
break;
}
startpoint = startpoint + steps;
}
}
},
// 保存图片
saveImg(){
console.log(1);
wx.showLoading({
title: '转换中..'
});
let that= this;
const ctx = wx.createCanvasContext('myCanvas');
ctx.fillStyle='red';
ctx.fillRect(0, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight);
ctx.drawImage(this.data.bg, 1, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight);
ctx.fillStyle='#efc384';
ctx.textAlign = "left";
ctx.font= "bolder 16px Microsoft YaHei";
this.toFormateStr(ctx,'祝:'+this.data.info.toname,wx.getSystemInfoSync().windowWidth-160,-1,80,140,30)
ctx.fillStyle='#efc384';
ctx.textAlign = "left";
ctx.font= "bolder 16px Microsoft YaHei";
this.toFormateStr(ctx,this.data.info.wishes,wx.getSystemInfoSync().windowWidth-160,-1,80,210,40)
ctx.fillStyle='#efc384';
ctx.textAlign = "right";
ctx.font= "bolder 16px Microsoft YaHei";
this.toFormateStr(ctx,this.data.info.fromname,wx.getSystemInfoSync().windowWidth-180,-1,wx.getSystemInfoSync().windowWidth-90,wx.getSystemInfoSync().windowHeight-240,30)
ctx.textAlign = "right";
this.toFormateStr(ctx,this.data.info.today,wx.getSystemInfoSync().windowWidth-180,-1,wx.getSystemInfoSync().windowWidth-90,wx.getSystemInfoSync().windowHeight-200,30)
ctx.draw(false, function (e) {
// 保存到本地
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: wx.getSystemInfoSync().windowWidth,
height: wx.getSystemInfoSync().windowHeight,
canvasId: 'myCanvas',
success: function (res) {
let pic = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: pic,
success(res) {
wx.hideLoading();
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
}, fail: function (res) {
wx.hideLoading();
}
});
},
fail: function (res) {
wx.hideLoading();
}
});
});
},
})
wxss自己脑补:
以上就可以点击【送祝福】,生成本地图片了。
新年祝福页面同理:
业务上加了一下增删改查的交互:
完成页排版加了时间记录。
代码就不在这里一一列举了,就当抛转引玉,相信大家能有更好的设计和代码规范。
讲一下要点,便于回顾:
1.时间的方法:
var date = new Date();
var seperator1 = ".";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
var H = date.getHours();
var M = date.getMinutes();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
if (H >= 0 && H <= 9) {
H = "0" + H;
}
if (M >= 0 && M <= 9) {
M = "0" + M;
}
var currentdate = year + seperator1 + month + seperator1 + strDate + ' ' + H + ':' + M;
2.返回上一页的方法:
wx.navigateBack()
3.授权保存图片的方法:
// 授权保存图片
sendFlag(){
let _this = this;
wx.getSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
_this.saveImg();
} else if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
_this.saveImg();
},
fail(){
wx.showToast({
title: '您没有授权,无法保存到相册',
icon: 'none'
})
}
})
}else {
wx.openSetting({
success(res) {
if (res.authSetting['scope.writePhotosAlbum']) {
_this.saveImg();
}else{
wx.showToast({
title:'您没有授权,无法保存到相册',
icon:'none'
})
_this.setData({ isSaving: false });
}
}
})
}
}
})
},
4.微信小程序中loading弹框提示:
wx.showLoading({
title: '转换中..'
});
5.微信小程序调用canvas画布:
const ctx = wx.createCanvasContext('myCanvas');
ctx.fillStyle='#fff';
ctx.fillRect(0, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight);
ctx.drawImage(this.data.bg, 1, 0, wx.getSystemInfoSync().windowWidth, wx.getSystemInfoSync().windowHeight);
ctx.fillStyle='#f00';
ctx.textAlign = "center";
ctx.font= "normal 24px Microsoft YaHei";
6.canvas画布图片生成保存到手机本地:
ctx.draw(false, function (e) {
// 保存到本地
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: wx.getSystemInfoSync().windowWidth,
height: wx.getSystemInfoSync().windowHeight,
canvasId: 'myCanvas',
success: function (res) {
let pic = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: pic,
success(res) {
wx.hideLoading();
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
});
}, fail: function (res) {
wx.hideLoading();
}
});
},
fail: function (res) {
wx.hideLoading();
}
});
});
},