关键词：
一、前言
不知不觉间还有几天就是新的一年了，值此佳节祝福语肯定也是必不可少，毕竟难得有机会能给ta发消息，ta会不会也在想终于又能给你回消息呢。跟随此文使用小程序制作一个祝福语生成器，让你的祝福脱颖而出吧。
二、实现步骤
2.1、创建小程序
- 访问微信公众平台，点击账号注册。
- 选择小程序，并在表单填写所需的各项信息进行注册。
- 在开发管理选择开发设置，将AppID及AppSecret复制出来进行存储。
- 下载安装微信web开发者工具并创建一个新的项目，填入上图所复制的AppId。
2.2、类别选择页
- 准备对应的角色图片素材。
- 创建一个页面将身份图片以及性别图片渲染在界面上并通过下标实现选择切换效果。
<!-- 类别 -->
<view class="cate" >
<div class="hd">
<text>TA是你的</text>
</div>
<div class="bd">
<radio-group name="relationID">
<view class="row r1">
<block wx:for="relation1">
<template is="realtionAvatar" data="query,item"/>
</block>
</view>
<view class="row r2" >
<block wx:for="relation2">
<template is="realtionAvatar" data="query,item"/>
</block>
</view>
</radio-group>
</div>
</view>
<!-- 性别 -->
<view class="sex">
<div class="hd">
<text>TA的性别</text>
</div>
<div class="bd">
<radio-group name="genderID">
<view class="row">
<block wx:for="gender">
<template is="genderAvatar" data="query,item,index"/>
</block>
</view>
</radio-group>
</div>
</view>
- 在页面增加一个文本框以及按钮，提供给用户输入称呼及跳转页面。
<!-- 称呼 -->
<view class="named isMore ? 'more' : ''">
<input bindinput="changeToName" name="toname" placeholder="怎么称呼TA?(不超过10个字)" input-placeholder="i-named"/>
</view>
<!-- 生成 -->
<view>
<button form-type="submit" hover-class="navigator-hover" class="submit-btn" >捎句祝福话</button>
</view>
- 点击按钮时携带选择的类别、性别、称谓进行跳转。
generate: function(e)
app.clearWishes();
let data = e.detail.value;
if (data.toname)
app.setToName(data.toname);
wx.navigateTo(
url : `/pages/preview/preview?state=0&relation=$data.relationID&sex=$data.genderID`
)
,
"tap_relation" : function(e)
this.setData("query.relationID":e.currentTarget.dataset.id);
,
"tap_gender" :function(e)
this.setData("query.genderID":e.currentTarget.dataset.id);
,
2.3、祝福编辑页
- 新建一个页面实现编辑称呼、落款、祝福语功能。
<form bindsubmit="save">
<!-- to name -->
<view class="item">
<text class="key">对方称呼</text>
<input name="toname" class="value" value="toname" bindblur="setToName"></input>
</view>
<!-- from name -->
<view class="item">
<text class="key">祝福落款</text>
<input name="nickName" class="value" value="userInfo.nickName" bindblur="setNickName"></input>
</view>
<!-- best wishes -->
<view class="item best-wishes">
<textarea bindinput="bindChangeText" class="textarea" name="best-wishes" value="wishes" id="best-wishes" bindblur="setWishes"></textarea>
<text class="word-tips isRed ? 'red' : ''">50字以内</text>
</view>
<!-- select panel -->
<view class="select-panel">
<button class="tips" plain="true" hover-class="tapped" bindtap="more-template">
<text>选择其他推荐祝福语</text>
<image class="bg" src="../../images/indicator.png"></image>
</button>
</view>
<!-- controls -->
<view class="btns">
<!--<button class="cancel-btn" hover-class="hover-btn" bindtap="cancel">取消</button>-->
<button form-type="submit" class="save-btn" hover-class="hover-btn">保存</button>
</view>
</form>
2.4、祝福选择页
- 如果不知道怎么编辑祝福语，可以新建一个选择祝福语的界面，根据性别、选择的人物身份将主服务进行推荐。
- 在utils文件夹新建一个JS文件，用于收录祝福语信息，大家可以去网上搜索一些进行填充。
const sentence =
'001': '你和红包之于我，都是此生最好的安排！2017年，大鸡大利，平安喜乐！',
'002': '这条祝福由金鸡创作，由快乐编写，由幸福发送，由我投资，愿你鸡年大吉，快乐惬意！',
'003': '怕三十晚上祝福太多，怕初一早上鞭炮太响，赶紧给你送来祝福，生活别太累，开心就很好！',
'004': '今夜烟花满天，幸福在侧，多想与你同醉，把美好往昔细细品味，亲爱哒，新年快乐！',
'005': '平时联系少，你可不要恼；生活忙碌事，推也推不了；新年最美妙，祝福把你找；有空见个面，快活又逍遥',
'006': '2017年，你要365天天天开心，8760小时时时快乐，5256000分分分精彩，31536000秒秒秒幸福！',
'007': '鸡描竹叶三中颂，犬绘梅花五福临。',
- 新建一个页面将JS文件中的祝福语句进行渲染，并提供单选框让用户选择。
<view class="container">
<scroll-view scroll-y="true">
<!-- <form bindsubmit="save"> -->
<!-- <radio-group name="select-more"> -->
<block wx:for="wishList">
<view class="item checkedID === item.id ? 'on' : ''" bindtap="check" data-id="item.id" >
<!-- <radio value="item.id" hidden id="item.id"/> -->
<!-- <label class="label" for="item.id" bindtap="check" data-id="item.id"> -->
<view class="state">
<view class="circle itemIndex == item ? 'on' : ''"></view>
</view>
<view class="sentence">
item.wishes
</view>
<!-- </label> -->
</view>
</block>
<!-- </radio-group> -->
<!-- </form> -->
</scroll-view>
<button class="save" hover-class="save-hover" bindtap="save">确定</button>
</view>
- 当用户选择好祝福语时，携带数据返回到祝福编辑页。
save:function()
let id = this.data.checkedID;
let wishList = this.data.wishList;
let i = wishList.findIndex(function(item,index,arr)
return item.id == id;
)
if (i >= 0)
app.setWishes(wishList[i].wishes,true);
wx.navigateBack()
else
console.error(`no item with id $id in wishList`)
,
2.5、祝福分享页
- 新建一个页面，将称谓、祝福语、落款、时间等信息进行展示。
- 将图片设置为背景
- 通过自定义JS函数获取祝福语信息。
// 点击事件，强制拉去数据
let that = this;
if (e)
util.request(
path: 'wishes', // 改变path名与util.request中的path名一致可以调试请求失败的情况
relation: o.relation,
sex: o.sex,
id: ''
,function(w)
console.log(w)
that.setData(
toname: app.getToName() || w.to,
sentence: w.wishes,
wishesId: w.wishes_id
)
)
return;
- 增加分享提示，点击送祝福按钮时增加遮盖层及操作指引
shareTips ()
let that = this;
this.setData(
showOverlay: true
)
setTimeout(function()
that.hideOverlay()
, 1500);
,
<div class="overlay" wx:if="showOverlay" bindtap="hideOverlay">
<image class="tips" src="../../images/share-tips.png"></image>
</div>
2.6、贺卡保存
- 可以在祝福分享页进行一些优化，用更加直观的方式将祝福进行分享，不用别人点进小程序。
- 在祝福分享页贺卡内容区域套上一个canvas标签。
<canvas class="myCanvas" canvas-id="myCanvas" ></canvas>
- 增加保存海报按钮，用户点击时将canvas画布上的内容进行绘制并保存图片至本地。
<view catchtap="saveImg" class="btn2">保存贺卡</view>
- 保存前需要获得用户授权，是否允许图片保存至本地。如果用户之前已经同意过授权，那么则不会出现授权弹窗，会直接进入成功的回调。
wx.getSetting(
success(res)
if (!res.authSetting['scope.writePhotosAlbum'])
wx.authorize(
scope: 'scope.writePhotosAlbum',
success()
that.saveImageFunction();
);
else
that.saveImageFunction();
);
- 在JS中增加一个函数，将画布内容进行导出，同时可以增加加载中的动画，优化用户体验。
wx.showLoading(
title: '转换中..'
);
let that= this;
const ctx = wx.createCanvasContext('myCanvas');
ctx.drawImage(self.bgSrc, 0, 0, 375, 375);
ctx.drawImage(self.imgSrc, 1, -20, 175, 175);
ctx.draw(false, function (e)
// 保存到本地
wx.canvasToTempFilePath(
x: 0,
y: 0,
width: 375,
height: 417,
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();
);
);
三、代码块
3.1、wxml
<view class="container">
<view class="inner">
<!-- wishes panel -->
<view class="wishes-panel">
<image class="bg" src="../../images/wishes-panel.png"></image>
<!-- custom card -->
<block wx:if="state === '0'">
<view bindtap="bindViewTap">
<view class="userinfo">
<image class="userinfo-avatar" src="userInfo.avatarUrl" background-size="cover"></image>
</view>
<view class="to-name">
<text>祝 toname :</text>
</view>
<view class="best-wishes">
<text>sentence</text>
</view>
<view class="from-name">
<text wx:if="state === '0'">userInfo.nickName</text>
<text wx:if="state === '1'">fromname</text>
</view>
<view class="date">
<text>today</text>
</view>
</view>
</block>
<!-- receive card -->
<block wx:if="state === '1'">
<view class="userinfo"python，微信小程序，教你如何快速生成半透明头像(代码片段)
...个头像。目录第一种：python实现第二种方式：微信小程序实现，（可用于发布线上供用户使用）第三种方式：uni-app实现第一种：py 查看详情
微信小程序｜使用小程序制作一个核酸检测点查询工具(代码片段)
...点查询、地图导航、拨号等功能。小程序创建小程序访问微信公众平台，点击账号注册。选择小程序 查看详情
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力。一、小程序1.创建小程序</ 查看详情
微信小程序｜基于小程序+c#制作一个聊天系统(代码片段)
...与服务端的聊天功能。用小程序自带的客服功能只能绑定微信且一对一沟通，接入市面上成熟的即时通讯预算又略显不足，干脆自己开发一个也能应对简单的业务场景。实现流程1、服务端1.1、项目创建1.2、设计界面1.3、... 查看详情
微信小程序使用swiper制作一个滑动导航(代码片段)
最近在做一个导航的时候，发现使用overflow-x:auto来做多内容滑动导航效果很不好，思索是不是可以使用swiper来做一个，研究了下其实发现原理基本相同这里说下，要用swiper做导航菜单，有几个要特别注意的参数1：autoplay，官方说... 查看详情
微信小程序怎么用webstore开发
微信小程序开发的方法及步骤：首先要下载微信官方的微信Web开发者工具。打开微信公众平台，找到右下方的小程序模块，点击「开发」按钮；点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开... 查看详情
如何制作微信小程序
如何制作微信小程序,今天教大家只要三个步骤就可以制作出一个简单的小程序。第一步，就是注册小程序的账号,首先，进入公众平台，点击立即注册，选择小程序。按照页面提示填写注册信息即可，在这里，建议先注册一个服... 查看详情
微信小程序生成excel(代码片段)
微信小程序生成Excel一、问题描述最近一直在查找在微信小程序中生成Excel的办法。需求就是根据一个json数据或者对象数组，生成一个Excel文件，或者打开Excel文件。网上找了很久，没找到很有效的解决办法。最后自己... 查看详情
微信小程序生成excel(代码片段)
微信小程序生成Excel一、问题描述最近一直在查找在微信小程序中生成Excel的办法。需求就是根据一个json数据或者对象数组，生成一个Excel文件，或者打开Excel文件。网上找了很久，没找到很有效的解决办法。最后自己... 查看详情
微信小程序生成excel(代码片段)
微信小程序生成Excel一、问题描述最近一直在查找在微信小程序中生成Excel的办法。需求就是根据一个json数据或者对象数组，生成一个Excel文件，或者打开Excel文件。网上找了很久，没找到很有效的解决办法。最后自己... 查看详情
微信制作跨年代码小程序怎么弄
参考技术A1.首先，需要先安装微信开发者工具，可以从微信官网下载。2.然后，在微信开发者工具中创建一个新的小程序项目，并选择“跨年代”模板。3.接下来，编写跨年代小程序的代码，在微信开发者工具中可以使用WXML和WXSS... 查看详情
微信小程序怎么将文字变成图片
参考技术A1、在微信顶部搜索文字图片制作，点击文字图片制作小程序，进入小程序。2、点击制作，选择模板。3、进入文字图片制作小程序后，点击制作按钮，点击一个模板。添加手机图片或在线图片然后添加文字。4、输入自... 查看详情
微信小程序怎么制作自己的程序
参考技术A一、认识微信小程序（1）先了解应用如何开发WebApp（内嵌内浏览器打开指定网页）NativeApp（原生开发，也就是使用iOS和Android代码开发）HybridApp（混合APP开发，写DIV+CSS+JS+PHP代码开发）（2）微信、公众号、小程序微信：... 查看详情
微信小程序码如何生成微信小程序码生成方法攻略教程大全
参考技术A微信小程序（weixinxiaochengxu），简称小程序，缩写XCX，英文名MiniProgram，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。全面开放申请后，主体类... 查看详情
微信小程序｜基于小程序+c#制作一个考试答题小程序
基于小程序+C#制作一个考试答题小程序打破传统线下考试答题的边界线问题，使考试不用再局限与某个统一的场所，只要有设备，哪里都能考试。一、小程序 查看详情
#yyds干货盘点#愚公系列2022年11月微信小程序-项目篇(祝福语)-01首页页面设计(代码片段)
前言祝福语是指对人们的美好祝福的语句。祝福语在社会发展中已经不是仅限于在节日和宴会上出现，常见的情侣互发手机信息祝福，天气冷暖变化问候祝福，朋友日常间的鼓励祝福，每天的清晨问候祝福等等。1、在聚会、宴... 查看详情
微信小程序怎么弄成二维码？
...提升转化率。参考技术A一、使用网络上的微信带二维码生成器生成的二维码二、1也可以登陆小程序后台，打开【设置】获取相应的APPID和Secret。微信给我们提供了接口以此来获得小程序二维码。2如果不懂得如何配置和发起接口... 查看详情
微信小程序开发工具怎么用小程序开发工具使用方法
1、首先要下载微信官方的微信Web开发者工具。打开微信公众平台（mp.weixin.qq.com），找到右下方的小程序模块，点击「开发」按钮；2、点击顶部导航栏的「工具」按钮，在新页面的左侧栏中找到「下载」。可以看到，开发工具提... 查看详情