微信小程序“交作业”兔年加油

看到今年的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();
        }
      });
    });
  },

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值