WeChat mini program mall development uses WeChat authorization and implements the page code of the personal center

不言
Release: 2018-08-16 17:03:37
Original
10126 people have browsed it

The content of this article is about the development of WeChat mini program mall using WeChat authorization and implementing the page code of the personal center. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. help.

See the effect


Development plan

1. Implement WeChat authorization and obtain user information
2. Personal center Page layout

1. Implement WeChat authorization and obtain user information

mine.js

onLoad: function () { if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } }, getUserInfo: function (e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }
Copy after login

2. Implement WeChat authorization and obtain user information

mine. wxml

    {{userInfo.nickName}}  我的订单 查看全部订单    {{item.name}}     优惠券     我的收藏     收货地址     售后记录     我的评价     在线客服 
Copy after login

mine.wxss

.userinfo { display: flex; flex-direction: column; align-items: center; background: #f0145a; width: 100%; height: 300rpx; } .userinfo-btn{ margin-top: 50rpx; background: none !important; color: #fff !important; font-size: 40rpx; } .account-bg { width: 100%; height: 150rpx; } .userinfo-avatar { width: 108rpx; height: 108rpx; margin: 40rpx; border-radius: 50%; } .userinfo-nickname { color: #fff; } /* 订单 */ .order { display: flex; flex-direction: row; align-items: center; width: 100%; height: 90rpx; } .myorder-text { font-size: 34rpx; color: gray; margin: 20rpx; width: 40%; } .myorderlook-text { font-size: 32rpx; color: gray; position: relative; right: 20rpx; width: 60%; text-align: right; } .next-image { width: 20rpx; height: 25rpx; position: relative; right: 10rpx; } .navs { display: flex; } .nav-item { width: 25%; display: flex; align-items: center; flex-direction: column; padding: 20rpx; } .nav-item .nav-image { width: 55rpx; height: 55rpx; margin: 5rpx; } .nav-item text { margin-top: 20rpx; font-size: 28rpx; color: gray; } /* 列表 */ .person-list { display: flex; flex-direction: column; align-items: left; } .list-item { display: flex; flex-direction: row; align-items: center; height: 80rpx; } .item-image { width: 40rpx; height: 40rpx; margin: 20rpx; } .item-text { color: gray; font-size: 30rpx; margin-left: 20rpx; } .person-line { width: 80%; height: 2rpx; background: lightgray; margin-left: 90rpx; }
Copy after login

mine.js

var app = getApp() Page({ data: { userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), orderItems: [ { typeId: 0, name: '待付款', url: 'bill', imageurl: '../../images/person/personal_pay.png', }, { typeId: 1, name: '待收货', url: 'bill', imageurl: '../../images/person/personal_receipt.png', }, { typeId: 2, name: '待评价', url: 'bill', imageurl: '../../images/person/personal_comment.png' }, { typeId: 3, name: '退换/售后', url: 'bill', imageurl: '../../images/person/personal_service.png' } ], }, //事件处理函数 toOrder: function () { wx.navigateTo({ url: '../order/order' }) } }
Copy after login

mine.json

{ "navigationBarTitleText": "个人中心"}
Copy after login

Related recommendations:

WeChat Mini Program Mall Development to Implement the Function of Adding Products to the Shopping Cart (Code)

#WeChat Mini Program Mall Development Dynamic API to Implement the Streaming Layout Code of Special Sale Products

WeChat Mini Program Mall Development Dynamic API Implementation of Product Details Page Code (Part 2)

The above is the detailed content of WeChat mini program mall development uses WeChat authorization and implements the page code of the personal center. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!