【经验分享】如何实现在支付宝小程序中开发营销组件

简介: 【经验分享】如何实现在支付宝小程序中开发营销组件
了解到要做的活动表现形式为?,首先当然是google、百度跑跑找找demo,看下人家是怎么实现的。


剖析了一波,划重点(要考的):

css的 background-position属性是设置背景图像的起始位置,那么我们控制背景图在0-3秒的时间内显示不同的位置,再加上过渡动画就可以达到? 旋转的效果

实现底部滚动停止后显示弹窗且跟后端返回的中奖码一致。


完整的实现效果在这里:

微信小程序版

点我查看完整的视频效果

支付宝小程序版(看着效果卡顿,真机正常)

点我查看完整的视频效果

注意两个点:

  • 旋转的背景图是雪碧图。我这里用到的是这张(https://qiniu-image.qtshe.com/20181113wheels.png)可供参考
  • 控制好图的位移单位,需要计算下,这样才可以让后端返回的值与你的图相匹配。我这里是15个icon所以计算方式如下
<view class="box-image" style="
     background: url('https://qiniu-image.qtshe.com/20181113wheels.png'); 
     background-position-y: {{isStart ? ((16 - item) * 100) + 1500 + 'rpx' : 0}}; 
     background-size: 100% 100%; 
     transition-property: {{isStart ? 'all' : 'none'}}; 
     transition-delay: {{(index + 1) * 100 + 'ms'}}; 
     transition-duration: 3.5s;">
</view>

这里可以封装成自定义组件,传入图片以及数量即可。后面如果有再用到 我会封装下再发出来。

最后说下弹窗显示的图的匹配方法,根据图片大小计算,比较麻烦:

axml

<view class="ci-wrapper">
  <view a:if="{{icontype ==='nomal'}}" class="icon-default  icon-nomal" style=" background-position-y: {{(-24 -  117.86 * (typeId - 1)) + 'rpx'}};"></view>
  <view a:else class="icon-default  icon-fade" style=" background-position-y: {{(-20 - 110.73 * (typeId - 1)) + 'rpx'}}; "></view>
</view>

acss

.icon-default {
  width: 70rpx;
  height: 70rpx;
  background-repeat: no-repeat;
 
}
.icon-nomal {
  background-image: url(https://qiniu-image.qtshe.com/20181113wheels.png);
  background-position-x: -17rpx;
   background-size: 100rpx 1768rpx
}
.icon-fade {
  background-image: url(https://qiniu-image.qtshe.com/20181113wheels_fade.png);
  background-size: 110rpx 1661rpx;
  background-position-x: -18rpx;
}

Js


Component({
  props: {
    icontype: 'nomal',
    iconid: 1
  },
  data: {
    nomalOrigin: {
      x: -17,
      y: -24
    },
    fadeOrigin: {
      x: -17,
      y: -24
    },
    typeId: 1
  }
})

以上就是一个完整小程序的? 实现方案,有什么优化点大家可以指出来,后续会整理一下出个文件拷贝就可使用。

目录
相关文章
|
10天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
10天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
10天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
10天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
10天前
|
小程序 前端开发 安全
小程序全栈开发中的跨域问题及其解决方案
【4月更文挑战第12天】本文探讨了小程序全栈开发中的跨域问题及其解决方案。跨域问题源于浏览器安全策略,主要体现在前后端分离、第三方服务集成和数据共享上。为解决此问题,开发者可采用CORS、JSONP、代理服务器、数据交换格式和域名策略等方法。实践中需注意安全性、兼容性和性能。通过掌握这些解决方案,开发者能更好地处理小程序的跨域问题,提升用户体验。
|
10天前
|
小程序 前端开发 API
小程序全栈开发中的RESTful API设计
【4月更文挑战第12天】本文探讨了小程序全栈开发中的RESTful API设计,旨在帮助开发者理解和掌握相关技术。RESTful API基于REST架构风格,利用HTTP协议进行数据交互,遵循URI、客户端-服务器架构、无状态通信、标准HTTP方法和资源表述等原则。在小程序开发中,通过资源建模、设计API接口、定义资源表述及实现接口,实现前后端高效分离,提升开发效率和代码质量。小程序前端利用微信API与后端交互,确保数据流通。掌握这些实践将优化小程序全栈开发。
|
10天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
10天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
10天前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
|
28天前
|
小程序 JavaScript 数据安全/隐私保护
分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存
看到好多坛友都在求SpringBoot2.X + Vue + UniAPP,全栈开发医疗小程序 - 带源码课件,我看了一下,要么链接过期,要么课件有压缩密码。特意整理了一份分享给大家,个人认为还是比较全面的。希望对大家有所帮助!课程仅供大家学习交流使用!
36 1
分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存