``uni-app```个人中心页开发

1.拍照，选择图片

user.vue：

<template><view><view class="takephoto" @click="takephoto">拍照</view><image v-for="(item,index) of imglist" :src="item" :key="index"></image></view>
</template><script>export default {data() {return {imglist: []}},methods: {takephoto () {uni.chooseImage({count: 6, //默认9sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择success: (res) => {console.log(JSON.stringify(res.tempFilePaths));this.imglist = res.tempFilePaths}});}}}
</script><style></style>

注意，在success执行成功的回调函数中不能写成function的形式否则就会导致this指向错误。

2.登录

新建一个登录页面login.vue：

<template><view><input type="text" value="" v-model="tel"/><!-- 手机号的格式简单验证 --><text :class=" tel.length !== 11 ? 'error' : 'success'">{{teltip}}</text><input type="text" value="" :password="true" v-model="password"/><!-- 密码的格式简单验证 --><text :class=" password.length < 6 ? 'error' : 'success'">{{passwordtip}}</text><!-- disabled在当手机号和密码格式不正确时使按钮失效 --><button :disabled=" tel.length !== 11 || password.length < 6 ":type=" tel.length === 11 && password.length >= 6 ? 'primary' : 'default' "@click="login">登录</button></view>
</template><script>import { request,toast } from '../../utils/index.js'export default {data() {return {tel: '18888888888',password: '123456'}},// 检验手机号和密码的格式是否正确并返回提示信息computed: {teltip() { // 对手机号的检验if(this.tel.length !== 11) { //手机号的长度为11位才正确return '手机号码长度有误'} else {return '手机号码长度正确'}},passwordtip() { //对密码的检验if(this.password.length < 6) { // 密码长度必须大于6位才正确return '密码长度不正确'} else {return '密码长度正确'}}},methods: {// 点击登录按钮，发送请求login() {request({url: '/user/domlogin',method: 'POST',data: { //将手机号密码作为请求的参数传过去tel: this.tel,password: this.password}}).them(res => {console.log(res.data)// 根据状态码判断登陆情况const { code } = res.dataif(code === '10006') {// toast方法封装在utils包下作为提示信息的显示toast({title: '该用户还未注册'})} else if (code === '10007') {toast({title: '对不起密码错误'})} else {toast({title: '登陆成功'})/*** 进入登录界面的途径* 1.用户在个人中心点击登录按钮，登录成功后返回个人中心页面* 2.用户在详情页点击加入购物车按钮，登录成功后返回返回详情页* 3.用户点击购物车分栏，登录成功后返回我的购物车* 4.注册进入登录，使用的是重定向* * token来验证用户的登录状态* 将token存储在本地，当以后需要token的时候先从本地查找获取并提交* 也可以将用户的id存储在本地* * uni-app 使用本地存储*/try { // 将获取到的信息保存在本地// uni.setStorageSync('token', 'res.data.data.token');// uni.setStorageSync('userid', 'res.data.data.userid');// uni.navigateBack()} catch (e) {console.log(e)}}})}}}
</script><style>
.success {color: #4CD964;
}
.error {color: red;
}
</style>

utils下封装的toast方法：

// 显示信息
export function toast(options) {const { title,icon,duration } = optionsuni.showToast({title: title,icon: icon || 'none',duration: duration || 5000})
}

uni-app个人中心页开发相关推荐

uni app video、视频播放开发
视频播放有3种解决方案,使用HTML5的自带video.从HBuilder9.1.3起新增的plus.video的原生视频播放,以及使用Native.js. HTML5自带video标签,可以播放符合 ...
uni-app 7个人中心页开发
my.nvue 内容如下 <template><view class="page"><free-nav-bar bgColor="bg-wh ...
使用urlscheme打开一些流行的app个人中心界面
使用urlscheme打开一些流行的app个人中心界面开发中遇到一个需求,需要使用urlscheme打开一些主流社交app的个人中心界面进行自己的产品推广,如关注微博,抖音,小红书等,记一下所找到的 ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
uni-app实战之社区交友APP（5）搜索和发布页开发
文章目录前言一.搜索页开发 1.搜索页面搭建 2.搜索结果显示和优化二.发布页开发 1.自定义导航栏开发 2.文本域组件使用 3.底部操作条组件开发 4.多图上传功能开发 5.删除选中图片功能实 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
uni-app实战之社区交友APP（8）搜索列表页和文章详情页开发
文章目录前言一.搜索列表页开发 1.搜索类型传递和占位符设置 2.搜索功能实现二.帖子详情页开发 1.pages.json配置和页面通信 2.公共列表组件功能优化 3.详情页关注和顶踩功能完善 ...
(一)移动App开发——Native App-原生开发Web App-网页开发Hybrid App-混合开发网页打包成App四方式-Cordova-APPCan-DCloud-API Cloud
移动 App 开发 Native App-原生开发开发技术原生的 Android 平台原生的 iOS 平台 JavaScript bridge 用于原生应用中的 Web 和原生平台进行交互. h ...
【Android开发】App消息中心构建
如何构建App消息中心主要涉及到的类 LauncherApplication.java MsgCenter.java MsgUtil MsgPackage MsgEvent LauncherAppl ...
uni-app实战之社区交友APP（7）消息页开发
文章目录前言一.消息列表页面开发 1.pages.json配置 2.消息列表组件开发和封装 3.下拉刷新功能实现 4.下拉弹出层组件使用二.我的好友列表页开发 1.pages.json配置 2. ...

uni-app个人中心页开发

``uni-app```个人中心页开发

1.拍照，选择图片

2.登录

uni-app个人中心页开发相关推荐

最新文章

热门文章