微信小程序开发

开发工具地址：https://mp.weixin.qq.com/debug/wxadoc/dev/

css，js，html 不熟练

 

<!--index.wxml-->

< view class= "container">

< view class= "userinfo">

< view class= "userinfo2">

< text class= ".usermotto-zuo">{{motto}} </ text >

< image class= "userinfo-you" src= "{{userInfo.avatarUrl}}" background-size= "cover"></ image >

</ view >

< text style= "border-bottom:1px dashed;"></ text >

< view class= "userinfo-text">

< text class= "user-motto">{{address}} </ text >

< text class= "user-motto">{{workingHours}} </ text >

< text class= "user-motto">{{telephone}} </ text >

< text class= "user-motto">{{photos}} </ text >

</ view >

< view class= "userinfo1">

< image bindtap= "bindViewTap" class= "userinfo-avatar" src= "{{userInfo.avatarUrl}} " background-size= "cover"></ image >

< image bindtap= "bindViewTap" class= "userinfo-avatar" src= "{{userInfo.avatarUrl}}" background-size= "cover"></ image >

< image bindtap= "bindViewTap" class= "userinfo-avatar" src= "{{userInfo.avatarUrl}}" background-size= "cover"></ image >

</ view >

</ view >

</ view >

/**index.wxss**/

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

line-height: 100 rpx;

}

.userinfo1 {

flex-direction: column;

align-items: center;

}

.userinfo-text {

display: flex;

flex-direction: column;

align-items: left;

}

.userinfo2 {

flex-direction: column;

align-items: center;

margin-top: 0px;

}

.userinfo-avatar {

width: 200 rpx;

height: 150 rpx;

margin: 20 rpx;

border-radius: 50%;

border-bottom: 1px dashed;

}

.userinfo-you {

margin-top: 0px;

border-radius: 50%;

width: 300 rpx;

height: 300 rpx;

border-bottom: 1px dashed;

align-items: right;

}

.userinfo-nickname {

color: #aaa;

}

.usermotto {

text-align: left;

}

.usermotto-zuo {

text-align: left;

}

data: {

address: '住 址：金马小区',

workingHours: '工 作：8:30 - 17:30',

telephone: '电 话：12345678910',

photos: '狗窝照：',

motto: '一壶的小窝',

userInfo: {},

hasUserInfo: false,

canIUse: wx.canIUse( 'button.open-type.getUserInfo')

}

下一步目标：

住址上面需要虚线划分为上下两个区域，住址连接到地图，电话连接到拨打电话界面。

总目标：

制作最简单的企业界面小程序。