小程序
文章平均质量分 65
米米余
不断学习进步着!
展开
-
常用动画效果
1.翻转:关键是加 perspective,有3d的翻转效果.compose-img{ width: 220px; height: 330px; margin: 10px auto; animation: miss 1.3s ease;}@keyframes miss { from{} to{transform: perspective(600px) rotateY(360deg) scale(1.2);}}2.放大:使用position实现更好.shunk{原创 2020-05-28 11:08:24 · 585 阅读 · 0 评论 -
小程序快速开发海报图
由于小程序没有开放分享朋友圈的功能,所以直接走曲线救国的方法,生成一张带有小程序码或者其他二维码的海报图,然后将海报图保存至手机相册,通过分享海报图来实现目标。海报图一般都是使用canvas进行绘制的,现在有很多的奖canvas封装好作为一个插件,通过使用插件可以快速开发海报图。使用Painter快速开发...原创 2020-05-28 11:00:09 · 582 阅读 · 0 评论 -
小程序中对http请求进行加密处理
1. 前言我们使用http协议传输数据很容易被抓包,项目中做了活动模块,里面有很多敏感信息,所以需要对传输的数据进行加密。使用方法是大家常用的,用md5 和AES 加密方式,小程序端和后端约定好加解密的秘钥,小程序端在传输数据前先对请求参数进行md5加密,然后再进行AES加密得到的数据放入请求头部信息中,后端得到数据后进行解密,最后解密信息经过比对成功后才返回请求数据,否则返回数据有误提示。虽然...原创 2020-03-26 15:49:54 · 2022 阅读 · 0 评论 -
小程序如何实现一直滚动到页面最底部
小程序可以用wx.pageScrollTo({ scrollTop: 0 })实现回到页面顶部,也可以用wx.pageScrollTo({ scrollTop: 99999})实现滚动到页面最底部1.效果图:按钮原处于页面底部,点击后出现橙色块内容,并且橙色块内容自动顶上去2、实现addDiv () { this.theDiv = true setTime...原创 2019-11-12 11:41:16 · 4171 阅读 · 0 评论 -
小程序如何在input中的placeholder中加图标
小程序如何在input中的placeholder中加图标方式二可用,方式一不可用,1.使用mpVue编写小程序代码,首先想到的就是Vue实现的方式,<input :placeholder="placeholdrValue" class="iconfont"> export default { data () { placeholderValue: '/uxe669' ...原创 2019-11-11 10:25:06 · 5998 阅读 · 3 评论 -
小程序实现中奖动态定时滚动效果
方法:使用小程序swiper组件,设置内容自动滚动:autoplay=‘true’, 内容滚动无缝衔接:circular=“true”, 然后再设置滚动时长:interval=“3000”, 最最主要的是设置同时显示多少个item:display-multiple-items=“4”<div class="award-back"> <div class="awar...原创 2019-06-13 10:39:52 · 3422 阅读 · 8 评论 -
小程序跳转公众号
小程序跳转公众号是通过组件进行跳转的,步骤如下:1.在微信公众平台上关联公众号,然后打开公众号关注组件2.在页面上使用:<official-account></official-account>标签引入公众号关注组件注意组件使用的限制,共有三个限制:当小程序从扫小程序码场景(场景值1047)打开时,(场景值1011)当小程序从聊天顶部场景(场景值1089)中的「...原创 2019-06-13 09:37:13 · 6617 阅读 · 0 评论 -
小程序弹出弹框后,底层内容禁止滚动
方法一:给背景内容加position:fixed,不可取,因为底部内容会自动滑动到顶部<view class="back-content" :class="'isFixed':isFixed"></view><view class="modal"></view>css:.fixed{ position:fixed; top:0;...原创 2019-05-31 14:17:51 · 5954 阅读 · 0 评论 -
canvas绘制文本内容自动折行(mpvue实现)
一、说明在微信小程序中使用canvas绘制文本,文本内容是不会自动折行的,所以封装方法使得内容能够自动折行。二、代码 <canvas class="myCanvas" canvas-id="myCanvas"></canvas> onLoad () { let ctx = wx.createCanvasContext('myCanva...原创 2019-03-07 16:44:21 · 871 阅读 · 0 评论 -
mpvue小程序营销活动——canvas实现刮刮卡
一、效果图二、说明1.使用mpVue编写小程序刮刮奖,底部的优惠券信息可以随时变化2.如果有需要刮奖涂层可以是一个图片,也可以是纯色背景,依据coating变量是否为空来控制选项。3.如果刮奖涂层是一个图片,在绘制的时候需要注意网络图片不能直接绘制,需要缓存到本地(wx.downloadfile),用本地地址进行绘制,wx.download花费时间,会导致优惠券内容先显示...原创 2019-03-04 16:36:44 · 1647 阅读 · 0 评论 -
mpvue小程序实现翻牌抽奖
一、效果图二、说明1.主要是用css来实现动画效果2.使用给数组生成随机数,然后利用随机数来打乱数组排序的方式洗牌三、代码<template> <div class="page"> <div class="gridcard"> <div v-for = "(item, idx) in card" :ke原创 2019-03-06 15:23:54 · 1293 阅读 · 1 评论 -
mpvue小程序实现砸金蛋
一、效果图二、说明1.素材没选好,金蛋和已砸开的蛋大小不匹配,看着不太协调2.mpvue实现砸金蛋主要也是利用css动画,然后使用v-if来控制锤子和开花的金蛋的显隐。三、代码<template> <div class="page"> <div class="stage"> <img src="https:...原创 2019-03-05 18:55:47 · 2667 阅读 · 0 评论 -
mpvue小程序实现老虎机
一、效果图:二、说明很简单的三列数字在Y轴旋转,然后将三列数字布局在一个老虎机的背景图上,点击按钮触发旋转事件,旋转到哪个数字停下来可以设置,可以由后端传回获奖数字。三、代码<template> <div class="page"> <div class="slot-machine"> <img class=...原创 2019-03-05 09:11:07 · 15082 阅读 · 1 评论