证件照(兼容H5,APP,小程序)

证件照由uniapp+uyui开发完成,并同时兼容H5、App、微信小程序、支付宝小程序,其他端暂未测试。

先看部分效果图吧具体可以下方复制链接体验demo

首页代码

<template><view class=""><view class="uy-m-x-30 uy-m-b-20"><!-- 轮播图-广告位 --><view class="uy-m-t-30"><uy-swiper :list="bannerList" :height="150"></uy-swiper></view><!-- 胶囊组一 --><view class="uy-flex uy-m-t-30"><view class="uy-m-r-30 uy-m-l-r uy-b-r-10 uy-flex uy-flex-direction-column uy-flex-column-center uy-flex-row-center uy-flex-1 uy-p-y-20" :style="[item.bgColor]" v-for="(item,index) in indexCapsule1" :key="index" @tap="$openPage({name: item.url, query: item})"><uy-image width="33" height="33" :src="item.icon"></uy-image><text class="uy-m-t-10 uy-font-24">{{item.name || ''}}</text></view></view></view><!-- 筛选 --><uy-sticky bgColor="#FFFFFF" customNavHeight="0"><uy-tabs :list="$mConstDataConfig.indexMenu"></uy-tabs></uy-sticky><view class="uy-m-x-30"><view class="uy-b-r-10 uy-flex uy-flex-column-center uy-p-x-20 uy-p-y-25 uy-bs-000000-5 uy-m-t-20" v-for="index in 20" :key="index" @tap="chooseDetails"><uy-image width="35" height="42" src="/static/img/index1.png" radius="5"></uy-image><view class="uy-flex-1 uy-p-x-20"><view class="uy-flex uy-flex-column-center"><text class="uy-m-r-10 uy-font-b">大一寸</text><view class="uy-bg-F76A8B uy-color-FFFFFF uy-font-18 uy-p-x-10 uy-p-y-2 uy-b-r-t-l-20 uy-b-r-b-r-20">热门</view></view><view class="uy-flex uy-m-t-10"><uy-text size="12" color="#999999" v-for="index2 in 2" :key="index2">33x48mm</uy-text></view></view><uy-image width="35" height="35" src="/static/img/index2.png"></uy-image></view><uy-loading-more></uy-loading-more></view></view>
</template><script>export default {data() {return {bannerList: [{image: '/static/img/banner.png'}],indexCapsule1: []}},onLoad() {this.init()},methods: {chooseDetails() {this.$openPage({name: 'photoMakerDetails', query: {}})},init() {let newsArr = this.$mConstDataConfig.indexCapsule1;this.indexCapsule1 = newsArr.map(item => {return {...item,bgColor: this.capsuleStyle()}})},// 胶囊随机背景capsuleStyle() {let style = {background: this.$mConstDataConfig.bgSetting[this.$uy.randArr(this.$mConstDataConfig.bgSetting)],};return style}}}
</script><style lang="scss"></style>

有什么问题可小程序通过客服联系技术进行修复。

多多关注,后续会开发更多模板,如有需要开发的项目可以客服联系哦。

开发不易,有需要的可以客服联系,感谢大家的支持。

体验demo链接:http://demo.qianyupan.cn/h5/photo/#/

更多内容请关注微信小程序,源码、插件、模板及时更新

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/698969.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

adb push 使用

adb push命令用于将文件从本地计算机推送到Android设备。要使用adb push命令&#xff0c;需要先连接Android设备并启动ADB调试模式。以下是使用adb push命令的基本步骤&#xff1a; 打开终端&#xff08;命令提示符&#xff09;。 使用cd命令导航到存储要推送文件的文件夹。 …

R语言【ClusterR】——KMeans_rcpp()

Package ClusterR version 1.3.2 Description 使用RcppArmadillo计算k-means。 Usage KMeans_rcpp(data,clusters,num_init = 1,max_iters = 100,initializer = "kmeans++",fuzzy = FALSE,verbose = FALSE,CENTROIDS = NULL,tol = 1e-04,tol_optimal_init = 0.3,se…

Redis 事务机制之ACID属性

事务属性 事务是对数据库进行读写的一系列操作。在事务执行时提供ACID属性保证&#xff1a; 包括原子性&#xff08;Atomicity&#xff09;、一致性&#xff08;Consistency&#xff09;、隔离性&#xff08;Isolation&#xff09;和持久性&#xff08;Durability&#xff09;…

如何申请代码签名证书?

代码签名证书是一种关键的数字证书&#xff0c;它的功能在于为软件代码提供安全签名和验证服务&#xff0c;从而提升软件整体的安全性和用户信任度。获取代码签名证书的过程通常涉及多个严谨步骤&#xff0c;确保通过正式流程获得的证书能有效加强软件完整性和真实性保护。以下…

Innodb底层原理与Mysql日志机制深入剖析

MySQL的内部组件结构 大体来说&#xff0c;MySQL 可以分为 Server 层和存储引擎层两部分。 Server层 主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函…

力扣hot100题解(python版10-12题)

哎- -最近本来就没时间写算法 这算法怎么还这么难。。。 10、和为 K 的子数组 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1]…

uniappQQ登录是如何实现的,请说明其流程

QQ登录功能的实现分成以下几个步骤&#xff1a; 注册QQ互联账号并创建应用&#xff0c;获取 appid 配置回调地址 recirect_uri在页面中放置 QQ登录按钮&#xff0c;点击按钮后跳转到 QQ 登录页面&#xff0c;链接地址是由 QQ 平台提供的&#xff0c;需要拼接上申请的 appid登录…

华为配置WDS手拉手业务示例

配置WDS手拉手业务示例 组网图形 图1 配置WDS手拉手业务示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 企业用户通过WLAN接入网络&#xff0c;以满足移动办公的最基本需求。但企业考虑到AP通过有线部署的成本较高&#xff0c;所以通过建立…

Android 开发一个耳返程序(录音,实时播放)

本文目录 点击直达 Android 开发一个耳返程序程序编写1. 配置 AndroidManifast.xml2.编写耳返管理器3. 录音权限申请4. 使用注意 最后我还有一句话要说怕相思&#xff0c;已相思&#xff0c;轮到相思没处辞&#xff0c;眉间露一丝 Android 开发一个耳返程序 耳返程序是声音录入…

内容检索(2024.02.23)

随着创作数量的增加&#xff0c;博客文章所涉及的内容越来越庞杂&#xff0c;为了更为方便地阅读&#xff0c;后续更新发布的文章将陆续在此汇总并附上原文链接&#xff0c;感兴趣的小伙伴们可持续关注文章发布动态&#xff01; 本期更新内容&#xff1a; 1. 电磁兼容理论与实…

oracle读写分离多数据源

1、配置数据源 package com.netintech.core.config;import com.alibaba.druid.pool.DruidDataSource; import com.alibaba.druid.spring.boot.autoconfigure.DruidDataSourceBuilder; import com.alibaba.druid.spring.boot.autoconfigure.properties.DruidStatProperties; im…

springboot基础(82):分布式定时任务解决方案shedlock

文章目录 前言简介shedlock dbSchedulerLock注解说明 shedlock redis遇到的问题1.配置shedlock不生效 前言 多节点或者多服务器拥有相同的定时任务&#xff0c;这种情况下&#xff0c;不同节点的相同定时任务会被重复执行。如何解决分布式定时任务重复执行问题&#xff1f;此…

fpga_cpu加速

一 cpu流水线执行指令 二 计算机体系结构 注&#xff1a;ARM就是典型的哈佛结构 三 cpu加速 同样采用流水线&#xff0c;哈佛结构的指令效率更高&#xff0c;通过指令预取&#xff0c;提高了流水线的并行度。

【初中生讲机器学习】11. 回归算法中常用的模型评价指标有哪些?here!

创建时间&#xff1a;2024-02-19 最后编辑时间&#xff1a;2024-02-23 作者&#xff1a;Geeker_LStar 你好呀~这里是 Geeker_LStar 的人工智能学习专栏&#xff0c;很高兴遇见你~ 我是 Geeker_LStar&#xff0c;一名初三学生&#xff0c;热爱计算机和数学&#xff0c;我们一起加…

有趣且重要的JS知识合集(19)前端实现图片的本地上传/截取/导出

input[file]太丑了&#xff0c;又不想去改button样式&#xff0c;那就自己实现一个上传按钮的div&#xff0c;然后点击此按钮时&#xff0c;去触发file上传的事件, 以下就是 原生js实现图片前端上传 并且按照最佳宽高比例展示图片&#xff0c;然后可以自定义截取图片&#xff0…

ChatGpt的初步认知(认知搬运工)

前言 ChatGpt火了有一段时间了&#xff0c;对各行各业也有了一定的渗透&#xff0c;当然发展过程中也做了一些安全约束&#xff0c;今天主要是来跟大家分享下关于chatGpt的初步认知。 一、chatGpt是什么&#xff1f; ChatGPT&#xff0c;全称聊天生成预训练转换器&#xff08;英…

X-Rhodamine maleimide ,ROX 马来酰亚胺,实验室常用的荧光染料

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;X-Rhodamine maleimide &#xff0c;X-Rhodamine mal&#xff0c;ROX-maleimide&#xff0c;ROX 马来酰亚胺 一、基本信息 【产品简介】&#xff1a;ROX, also known as Rhodamine 101, is a product whose active …

使用ffmpeg实现视频片段截取并保持清晰度

1 原始视频信息 通过ffmpeg -i命令查看视频基本信息 ffmpeg -i input.mp4 ffmpeg version 6.1-essentials_build-www.gyan.dev Copyright (c) 2000-2023 the FFmpeg developersbuilt with gcc 12.2.0 (Rev10, Built by MSYS2 project)configuration: --enable-gpl --enable-ve…

算法沉淀——FloodFill 算法(leetcode真题剖析)

算法沉淀——FloodFill 算法 01.图像渲染02.岛屿数量03.岛屿的最大面积04.被围绕的区域05.太平洋大西洋水流问题06.扫雷游戏07.衣橱整理 Flood Fill&#xff08;泛洪填充&#xff09;算法是一种图像处理的基本算法&#xff0c;用于填充连通区域。该算法通常从一个种子点开始&am…

nginx基础模块配置详解

目录 一、Nginx相关配置 1、nginx配置文件 2、nginx模块 二、nginx全局配置 1、关闭版本或修改版本 1.1 关闭版本 1.2 修改版本 2、修改nginx启动的子进程数 3、cpu与worker进程绑定 4、PID路径 5、nginx进程的优先级 6、调试worker进程打开文件的个数 7、nginx服…