uni-app 19二维码名片页开发

不废话先看效果图，由于我们没有二维码名片所以先用一个照片代替

下面是代码部分

code.nvue

<template><view class="page"><!-- 导航栏 --><free-nav-bar title="二维码名片" showBack :showRight="false"></free-nav-bar><view class="p-5"><view class="bg-white rounded p-4"><view class="flex align-center mb-4"><free-avatar src="/static/images/demo/demo6.jpg"></free-avatar><view class="pl-4 flex flex-column"><text class="font-md">昵称</text><text class="font text-light-muted">地区</text></view></view><view class="flex flex-column align-center justify-center"><image src="/static/images/qrcode_for_gh_82c777d227b9_258.jpg" mode="" style="width: 550rpx;height: 550rpx;" class="bg-secondary mb-4"></image><text class="font text-light-muted">扫一扫上面的二维码，加我的微信</text></view></view></view></view>
</template><script>import freeNavBar from '@/components/free-ui/free-nav-bar.vue';import freeAvatar from '@/components/free-ui/free-avatar.vue';export default {components:{freeNavBar,freeAvatar},data() {return {}},methods: {}}
</script><style></style>

引入的文件

// free-nav-bar.vue
<template><view><view :class="getClass"><!-- 状态栏 --><view :style="'height:'+statusBarHeight+'px;'"></view><!-- 导航 --><view class="w-100 flex align-center justify-between" style="height: 90rpx;"><!-- 左边 --><view class="flex align-center"><!-- 返回按钮 --><free-icon-button v-if="showBack" @click="back"><text class="iconfont font-md"></text></free-icon-button><!-- 标题 --><text v-if="title" class="font-md ml-3" >{{getTitle}}</text></view><!-- 右边 --><view class="flex align-center" v-if="showRight"><slot name="right"><free-icon-button @click="search"><text class="iconfont font-md"></text></free-icon-button><free-icon-button @click="openExtend"><text class="iconfont font-md"></text></free-icon-button></slot></view><!--\ue6e3 \ue682 --></view></view><!-- 站位 --><view v-if="fixed" :style="fixedStyle"></view><!-- 扩展菜单  --><free-popup v-if="showRight" ref="extend" maskColor bottom :bodyWidth="320" :bodyHeight="525" bodyBgColor="bg-dark" transformOrigin="right top"><view class="flex flex-column" style="width:320rpx;height: 525rpx;"><view v-for="(item,index) in menus" :key="index" class="flex-1 flex align-center" hover-class="bg-hover-dark" @click="clickEvent(item.event)"><text class="pl-3 pr-2 iconfont font-md text-white">{{item.icon}}</text><text class="font-md text-white">{{item.name}}</text></view></view></free-popup></view>
</template><script>import freeIconButton from './free-icon-button.vue';import freePopup from './free-popup.vue';export default {components: {freeIconButton,freePopup},props: {showBack:{type:Boolean,default:false},title: {type: String,default: ''},fixed:{type:Boolean,default:false},noreadnum:{type:Number,default:0},bgColor:{type:String,default:"bg-light"},showRight:{type:Boolean,default:true}},data() {return {statusBarHeight: 0,navBarHeight: 0,menus:[{name:'发起群聊',event:"",icon:"\ue633"},{name:'添加好友',event:"",icon:"\ue65d"},{name:'扫一扫',event:"",icon:"\ue614"},{name:'收付款',event:"",icon:"\ue66c"},{name:'帮助与反馈',event:"",icon:"\ue61c"}],}},mounted() {// 获取任务栏高度// #ifdef APP-PLUS-NVUEthis.statusBarHeight = plus.navigator.getStatusbarHeight()// #endifthis.navBarHeight = this.statusBarHeight + uni.upx2px(90)},computed: {fixedStyle() {return `height:${this.navBarHeight}px`;},getTitle(){let noreadnum = this.noreadnum>0 ? '('+this.noreadnum+')' : '';return this.title + noreadnum;},getClass(){let fixed = this.fixed?"fixed-top":"";return `${fixed} ${this.bgColor}`;}},methods:{openExtend(){this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150));},// 返回back(){uni.navigateBack({delta:1})}}}
</script><style></style>// free-avatar.vue
<template><image :src="src" mode="widthFix" :style="getStyle" :class="type" :clickType="clickType" @click="clickEvent"></image>
</template><script>export default{props:{size:{type:[String,Number],default:90},src:{type:String,default:""},type:{type:String,default:"rounded"},clickType:{type:String,default:"none"}},computed:{getStyle(){return `width: ${this.size}rpx;height: ${this.size}rpx;`;}},methods:{clickEvent(){switch(this.clickType){case 'navigateTo':uni.navigateTo({url:'/pages/mail/user-base/user-base',});break;default:this.$emit('click');break;}}}}
</script><style>
</style>

好了感谢大家观看，我们下期见

对了大家可以关注我公众号，如下图

uni-app 19二维码名片页开发相关推荐

uni-app 109生成个人二维码名片
code.vue <template><view class="page"><free-nav-bar title ...
用WeX5做一个二维码名片应用！有源码！
本文由起步科技原创.未经许可,禁止转载! 作者:起步科技前端研究员小茄,专注分享HTML5 App快速开发工具 WeX5 的黑魔法以及各种有趣炫酷的前端技术. 前言二维码现在是无处不在,无孔不入 ...
微信二维码名片生成示例【转】
二维码的对于现在已经很流行了,主要是因为其大数据量和容错能力.出于爱好,学了下google的zxing对二维码的处理. 首先生成一张二维码的话,只要输入文本就OK了. 下面是加密的代码 1 2 3 4 ...
【uni-app】App实现二维码分享图合成(支持单张或多张)
[uni-app]App实现二维码分享图合成写在前面, 该文章目前仅支持合成特定数量的分享图, 不支持随意数量分享图合成一. 背景 app内实现一个邀请拉新功能, 需要根据每个用户生成各自的二维码 ...
iOS_二维码名片vCard
今天我们来总结下二维码名片 "vCard" 的相关信息,在我们的项目中不乏会使用到二维码相关的功能,其中常用到的几项分别是跳转网站.跳转APP.跳转应用内指定页面,而二维码名片的使 ...
Android二维码名片生成扫码识别
功能描述: 填入联系人信息,动态生成二维码名片,长按二维码保存,打开扫码识别内容.app实现了在android6.0或以上动态权限申请功能,适合新手研究.搭建方法请看入门教程菜单中的androidst ...
经验分享：查看手机微博二维码名片方法
分享一个和技术开发无关的经验,但是对手机微博不熟悉的话,这个经验还是很有作用的,就是通过手机微博查看个人的微博二维码.感觉微博二维码完全是照搬照抄微信二维码来弄的,微博二维码和微信二维码的作用类似,就 ...
二维码名片怎么制作？这几种方法都能够生成二维码
怎么制作二维码名片呢?制作二维码名片是一种方便快捷的方式,可以使我们更加轻松地分享联系方式和提高专业形象.通过制作二维码名片,可以将所有联系方式(例如手机号码.电子邮件地址和社交媒体账户)集中在一个二 ...
Kotlin高仿微信-第23篇-个人信息-二维码名片
Kotlin高仿微信-项目实践58篇详细讲解了各个功能点,包括:注册.登录.主页.单聊(文本.表情.语音.图片.小视频.视频通话.语音通话.红包.转账).群聊.个人信息.朋友圈.支付服务.扫一扫.搜 ...

uni-app 19二维码名片页开发

code.nvue

uni-app 19二维码名片页开发相关推荐

最新文章

热门文章