1、创建个人中心页面views/AdminInfo.vue 2、在路由中添加：有Home跳转到个人中心由于是在Home下点击“个人中心”，所以需要在home页面下，添加个人中心页面的展示import Home from "../views/Home"; import AdminInfo from "../views/AdminInfo"; { path: '/home', name: 'Home', component: Home, children:[ { path: '/userinfo', name: '个人中心', component: AdminInfo, } ] } 3、在Home下实现跳转到个人中心的按钮 {{user.name}} 个人中心 设置 注销登录 -- methods: { if (command == 'userinfo') { this.$router.push('/userinfo'); } } 从Home点击“个人中心”后，跳转到此页面，然后进行“个人中心的展示。”template 标签是图样的展示，每个 div 是一行信息script 调用后端的数据的处理。- mouted() 是钩子函数，点进来第一个触发的函数- Method 获取后端接口信息的函数，并且进行处理数据。例如增删改查- style 样式，页面的展示，前面指定为class=“函数名字” ，在style进行名字.{} 具体的HTML的页面展示。例如宽度大小、斑马纹等等。AdmminInfo.vue }

情侣券 v2.0 使用的 4 款开源组件
前言
之前写了《情侣券 v2.0 版本迭代思考》的产品思考接下来，我来分享下里面用的开源组件。
案例
1. 裁剪组件
使用场景
首页自定义图片
[图片]
自定义卡券背景
[图片]
自定义分享图
[图片]
使用流程
先在触发页面调用选择图片API
[代码]wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
let tempPath = res.tempFilePaths[0];
wx.navigateTo({
url: '/pages/cropper/cropper?action=home&src=' + tempPath,
})
}
})
[代码]
选择完成之后把图片地址传递到截图页面
[代码]onLoad: function (options) {
this.cropper = this.selectComponent("#image-cropper");
this.cropper.pushImg(options.src)
}
[代码]
截图后把截图地址回传到触发页面进行上传替换。
[代码]submit() {
this.cropper.getImg((obj) => {
app.globalData.imgSrc = obj.url;
console.log('obj.url', obj.url)
wx.navigateBack({
delta: -1
})
});
}
[代码]
组件地址
https://github.com/wx-plugin/image-cropper
2. 日历组件
使用场景
我们的回忆模块
[图片]
使用时候直接把数据处理成组件需要的格式就好了。
风格支持
[图片]
组件地址
https://github.com/treadpit/wx_calendar
3. 海报组件
使用场景
记录完成之后的分享海报功能。
[图片]
海报json
[代码]this.setData({
imgDraw: {
width: '750rpx',
height: '1334rpx',
background: '背景图地址',
views: [
{
type: 'image',
url: 卡券背景图地址,
css: {
top: '393rpx',
left: '40rpx',
width: '670rpx',
height: '240rpx',
borderRadius: '16rpx'
},
},
{
type: 'text',
text: 卡券标题,
css: {
top: '440rpx',
left: '100rpx',
align: 'left',
fontSize: '40rpx',
color: 标题文字颜色
}
},
{
type: 'text',
text: 卡券介绍,
css: {
top: '520rpx',
left: '100rpx',
align: 'left',
fontSize: '26rpx',
color: 介绍文字颜色
}
},
{
type: 'image',
url: 头像A地址,
css: {
top: '75rpx',
left: '190rpx',
width: '120rpx',
height: '120rpx',
borderWidth: '2rpx',
borderColor: '#FAC0BE',
borderRadius: '60rpx'
}
},
{
type: 'image',
url: '爱心图片地址',
css: {
top: '102rpx',
left: '322rpx',
width: '108rpx',
height: '65rpx',
}
},
{
type: 'image',
url: 头像B地址,
css: {
top: '75rpx',
left: '441rpx',
width: '120rpx',
height: '120rpx',
borderWidth: '2rpx',
borderColor: '#FAC0BE',
borderRadius: '60rpx'
}
},
{
type: 'text',
text: 用户A昵称 +'与'+ 用户B昵称 +'的美好回忆',
css: {
top: '253rpx',
left: '375rpx',
maxLines: 1,
align: 'center',
fontWeight: 'bold',
fontSize: '36rpx',
color: '#2A2A2A'
}
},
{
type: 'text',
text: 用户A昵称 +'使用了'+ 用户B昵称 +'制作的'+卡券标题+'，并留下记录。',
css: {
top: '317rpx',
left: '375rpx',
maxLines: 1,
align: 'center',
fontWeight: 'bold',
fontSize: '26rpx',
color: '#F58C98'
}
},
{
type: 'image',
url: 小程序码地址,
css: {
top: '674rpx',
left: '283rpx',
width: '184rpx',
height: '184rpx'
}
},
{
type: 'text',
text: '长按识别小程序码
围观TA的甜蜜时刻',
css: {
top: '882rpx',
left: '375rpx',
width: '216rpx',
align: 'center',
fontSize: '24rpx',
color: '#2A2A2A'
}
}
]
}
})
},
[代码]
详细介绍
《生成海报很复杂？有它轻松搞定！》
4. 导航组件
使用场景
每一个页面的导航。
详细介绍
《自定义导航栏开源库》
总结
好的轮子能够帮助我们剩下不少的时间。
后续我会分享更多实用组件的案例给到大家。
}