美观【微信小程序源码：】名片类小程序，可以直接运行的

wuliqq

扫码体验：





效果图如下：



工程文件

app.json

1. {
   
2.   "pages":[
   
3.     "pages/index/index",
   
4.     "pages/card/card",
   
5.     "pages/replace/replace",   
   
6.     "pages/addCard/addCard",
   
7.     "pages/ucard/ucard",  
   
8.     "pages/logs/logs",
   
9.     "pages/contactUser/contactUser",
   
10.     "pages/resource/resource"
    
11.   ],
    
12.   "window":{
    
13.     "backgroundTextStyle":"dark",
    
14.     "navigationBarBackgroundColor": "#000000",
    
15.     "navigationBarTitleText":"名片夹",
    
16.     "backgroundColor": "#FFFFFF",
    
17.     "navigationBarTextStyle":"white",
    
18.     "enablePullDownRefresh":"true"
    
19.   },
    
20.   "tabBar":{
    
21.     "color":"#8B8888",
    
22.     "selectedColor":"#2EBAEE",
    
23.     "backgroundColor":"#FFFFFF",
    
24.     "borderStyle":"black",
    
25.     "list":[{
    
26.       "pagePath":"pages/index/index",
    
27.       "text":"我的名片",
    
28.       "iconPath":"image/2.png",
    
29.       "selectedIconPath":"image/22.png"
    
30.     },{
    
31.       "pagePath":"pages/card/card",
    
32.       "text":"名片夹",
    
33.       "iconPath":"image/3.png",
    
34.       "selectedIconPath":"image/33.png"
    
35.     }]
    
36.   }
    
37. }
    

复制代码

index.wxml

1. <!--index.wxml-->
   
2. <!--这是用户信息缺失的页面-->
   
3. <view class="container1" style="display:{{index1}}">
   
4.   <image src="../../image/list.png" class="img"></image>
   
5.   <view class="font">你还没有名片哦,赶快来做一张吧</view>
   
6.   <view class="curl" bindtap="curls">去做一张</view>
   
7. </view>
   
8. 
   
9. <!--这是用户信息完善的页面-->
   
10. <view class="container"style="display:{{index2}}">
    
11.     <!--头部开始-->
    
12.     <view class="card-top">
    
13.             <view class="name">{{userDetail.username}}</view>
    
14.             <image src="{{userInfo.avatarUrl}}" class="images"></image>
    
15.         <view class="type">职位
    
16.             <view class="position">{{userDetail.position}}</view>
    
17.         </view>
    
18.         <view class="type">电话
    
19.             <view class="phone" id="{{userDetail.phone}}" bindtap="cphone">{{userDetail.phone}}</view>
    
20.         </view>
    
21.         <view class="type">公司
    
22.             <view class="nickname">{{userDetail.company}}</view>
    
23.         </view>
    
24.         <view class="type">邮箱
    
25.             <view class="email">{{userDetail.email}}</view>
    
26.         </view>
    
27.     </view>
    
28.     <view class="center">
    
29.         <view class="centers" bindtap="resource1">
    
30.             <image class="src srcs" src="../../image/renqi2.png"></image>
    
31.             <view class="space">人气<text class="character">:</text>{{userDetail.browse}}</view>
    
32.         </view>
    
33.         <view class="centers" bindtap="resource2">
    
34.             <image class="src" src="../../image/like2.png"></image>
    
35.             <view class="space">赞<text class="character">:</text>{{userDetail.likes}}</view>
    
36.         </view>
    
37.         <view class="centers" bindtap="resource3">
    
38.             <image class="src" src="../../image/coll2.png"></image>
    
39.             <view class="space">收藏<text class="character">:</text>{{userDetail.coll}}</view>
    
40.         </view>
    
41.     </view>
    
42.     <view class="bottom">
    
43.         <view class="more">更多</view>
    
44.         <view class="post" placeholder="{{userDetail.more}}">{{userDetail.more}}</view>
    
45.     </view>
    
46.     <!--<view><image src="src"></image>面对面扫名片</view>-->
    
47.     <!--<navigator bindtap="ShareCard" class="button button-first">递名片</navigator>-->
    
48.     <navigator url="../ucard/ucard" class="button button-first">编辑名片</navigator>
    
49.     <view class="reminder">点击右上角,可以分享你的名片哦.</view>
    
50.     <view class="reminder">再次使用:发现-小程序-搜索“Boss名片”</view>
    
51.     <image src="../../image/kefu.png" bindtap="lianxikefu" class="kefu"></image>
    
52.     <text class="lianxi">联系客服</text>
    
53. </view>
    
54. 
    
55. 
    

复制代码

项目是可以直接运行的带SQL


下载地址：

游客，如果您要查看本帖隐藏内容请回复