有哪些公司的网站做的比较好,门户网页版登录入口,自己做一个网页怎么做,n加1网站建设#x1f3cd;️作者简介#xff1a;大家好#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 #x1f6f5;个人主页#xff1a;亦世凡华、 #x1f6fa;系列专栏#xff1a;uni-app #x1f6b2;座右铭#xff1a;人生亦可燃烧#xff0c;亦可腐败#xf… ️作者简介大家好我是亦世凡华、渴望知识储备自己的一名在校大学生 个人主页亦世凡华、 系列专栏uni-app 座右铭人生亦可燃烧亦可腐败我愿燃烧耗尽所有光芒。 引言 ⚓经过web前端的学习相信大家对于前端开发有了一定深入的了解今天我开设了uni-app专栏主要想从移动端开发方向进一步发展而对于我来说写移动端博文的第二站就是uni-app开发希望看到我文章的朋友能对你有所帮助。 今天开始使用 vue3 uni-app 搭建一个电商购物的小程序因为文章会将项目的每一个地方代码的书写都会讲解到所以本项目会分成好几篇文章进行讲解我会在最后一篇文章中会将项目代码开源到我的GitHub上大家可以自行去进行下载运行希望本文章对有帮助的朋友们能多多关注本专栏学习更多前端uni-app知识。然后开篇先简单介绍一下本项目用到的技术栈都有哪几个方面阅读此次项目实践文章能够学习到的技术 uni-app跨平台的应用开发框架基于vue.js可以一套代码同时构建运行在多个平台。 pnpm高性能、轻量级npm替代品帮助开发人员更加高效地处理应用程序的依赖关系。 vue3vue.js最新版本的用于构建用户界面的渐进式JavaScript框架。 typescriptJavaScript的超集提供了静态类型检查使得代码更加健壮。 piniavue3构建的Vuex替代品具有响应式能力提供非常简单的 API进行状态管理。 uni-ui基于vue.js和uni-app的前端UI组件库开发人员可以快速地构建跨平台应用程序。 如果是第一次接触uni-app并且想学习uni-app的朋友我是不建议直接从此次实战项目开始看起可以先阅读一下我以前的基础文章什么是uniapp如何开发uniapp按部就班的学习可以让学习变得更轻松更容易上手哦闲话少说我们直接开始今天的uni-app实战篇。
目录
个人中心模块搭建
设置页面的搭建
个人信息页搭建
个人信息页面数据的修改 个人中心模块搭建
在个人中心模块搭建时这里我们打算使用自定义导航栏来设置个人模块的搭建如果想使用自定义导航栏我们需要在 pages.json 文件设置如下属性 设置完自定义导航栏之后导航栏的内容就会被组件的内容自动顶上去了所以接下来我们就需要设置页面就可以了在个人中心模块有两个页面需要展示一个是登录成功的页面另一个是未登录的页面两个页面下面都是有相应的猜你喜欢组件的相关内容这里我们思考了一下猜你喜欢组件的使用频率相对来说较高所以我们把公共模块的组件代码封装成全局组件来进行公共的复用
import { ref } from vue
import type { SwGuessInstance } from /types/components/*** 猜你喜欢组合式函数*/
export const useGuessList () {// 获取猜你喜欢组件实例const guessRef refSwGuessInstance()// 滚动触底事件const onScrolltolower () {guessRef.value?.getGuess()}// 返回 ref 和事件处理函数return {guessRef,onScrolltolower,}
}
个人中心模块展示不同页面的条件是根据仓库中用户信息是否存在展示的这里需要直接调用该模块即可通过v-if和v-else来进行相应的展示给该滚动容器设置自定义上拉触底事件 因为我们把自定义上拉触底事件封装成公共组件这里直接调用即可
const { guessRef, onScrolltolower } useGuessList()
既然我们把猜你喜欢的公共代码模块封装成公共组件在首页的相关猜你喜欢组件内容的模块代码也可以直接删掉换上公共代码的调用即可 最终呈现的结果如下 设置页面的搭建
关于设置页面一般用户不会主动去点击这也就导致设置页面的停留次数相对较少这里我们可以将设置页面设置一下分包这里需要了解以下两个概念 小程序分包将小程序的代码分割成多个部分分别打包成多个小程序包减少小程序的加载时间提高用户体验。 分包预下载在进入小程序某个页面时由框架自动预下载可能需要的分包提升进入后续分包页面时的加载速度。 关于分包的其他相关概念这里不再赘述想了解更深一点的朋友可以参考我之前的文章分包
在 vscode 中我们新建分包页面插件已经给我们提供好了方式只需要在相应的文件夹下鼠标右键选择新建uniapp页面(分包)即可如下 为了避免和主页面pages文件夹搞混淆这里我们可以在src文件夹下重新创建一个新的文件然后在该文件夹下再重新创建分包文件 当我们创建分包页面的时候相应的的在pages.json文件夹下也会生成相应的分包加载规则 接下来我们在个人中心的设置按钮处设置相应的跳转路径 通过如下代码来搭建设置页面的基础样式
templateview classviewport!-- 列表1 --view classlist v-iftruenavigator url/pagesMember/address/address hover-classnone classitem arrow我的收货地址/navigator/view!-- 列表2 --view classlistbutton hover-classnone classitem arrow open-typeopenSetting授权管理/buttonbutton hover-classnone classitem arrow open-typefeedback问题反馈/buttonbutton hover-classnone classitem arrow open-typecontact联系我们/button/view!-- 列表3 --view classlistnavigator hover-classnone classitem arrow url 关于小程序/navigator/view!-- 操作按钮 --view classactionview classbutton退出登录/view/view/view
/template
呈现的效果如下 搭建完相关页面之后接下来在 pages.json 文件夹下设置分包预下载规则关于该小程序分包预下载的相关规则这里不再赘述想了解的朋友可以直接查看官网这里直接给出该规则
// 分包预下载规则
preloadRule: {pages/my/my :{network: all,packages: [subpackage]}
}
分包规则设置完成之后接下来我们就可以看到当我们访问其他页面的时候页面是正常加载的当我们访问个人中心页面的时候分包会自动预下载方便我们进入的分包页面 接下我们给退出登录设置点击事件这里我们给其相应的点击事件设置模态框提示用户退出登录的相关确定相关代码如下
script setup langts
import { useMemberStore } from /storeconst memberStore useMemberStore()
// 退出登录
const onLogout () {// 模态弹窗uni.showModal({content: 是否退出登录,showCancel: true,success: (res) {if (res.confirm) {// 清理用户信息memberStore.clearProfile()// 返回上一页uni.navigateBack()}},})
}
/script
这里设置一下条件渲染当用户未登录的情况下需要将收获地址和相应的退出登录按钮进行相应的删除代码如下 最后呈现的结果如下 个人信息页搭建
个人信息页是用户点击个人中心页面的用户头像或更改头像昵称跳转到个人信息页面这里的个人信息页面也采用分包的方式所以这里我们只需要在专门设置分包的文件夹下设置新文件profile来作为个人信息页的页面创建页面之后在个人中心页面的相应位置设置跳转链接 接下来编写相应的接口函数来获取个人信息数据
// 封装个人信息数据接口
import type { ProfileDetail } from /types/member
import { http } from /utils/http/*** 获取个人信息*/
export const getMemberProfileAPI () {return httpProfileDetail({method: GET,url: /member/profile,})
}
这里的ts类型可以将公共部分的参数分离出去然后将独有的参数和公共的部分合并在一起
/** 通用的用户信息 */
type BaseProfile {/** 用户ID */id: number/** 头像 */avatar: string/** 账户名 */account: string/** 昵称 */nickname?: string
}/** 小程序登录 登录用户信息 */
export type LoginResult BaseProfile {/** 手机号 */mobile: string/** 登录凭证 */token: string
}/** 个人信息 用户详情信息 */
export type ProfileDetail BaseProfile {/** 性别 */gender?: Gender/** 生日 */birthday?: string/** 省市区 */fullLocation?: string/** 职业 */profession?: string
}
编写完相应的接口之后接下来就需要进行引入该接口函数然后将返回的数据存储在ref数据中
import { ref } from vue
// 导入接口函数
import { getMemberProfileAPI } from /api/profile
import { onLoad } from dcloudio/uni-app
import type { ProfileDetail } from /types/member// 获取屏幕边界到安全区域距离
const { safeAreaInsets } uni.getSystemInfoSync()
// 获取个人信息的接口
const profile refProfileDetail()
const getMemberProfileData async () {const res await getMemberProfileAPI()profile.value res.result
}
// 页面加载时候调用
onLoad(() {getMemberProfileData()
})
将ref数据通过插值表达式和v-bind数据绑定来动态的呈现数据具体的页面结果如下 个人信息页面数据的修改
修改用户头像这里修改图片的方式我们需要借助uniapp相应的api其相应的参数讲解这里不再赘述想了解的可以参考相应的官方文档即可。其具体的代码如下
// 修改头像
const onAvatarChange () {// 调用拍照/选择图片APIuni.chooseMedia({count: 1, // 文件个数mediaType: [image], // 文件类型success: (res) {console.log(res)},})
}
结果如下 接下来借助uniapp中的上传文件的api进行相应的操作完整的代码如下
// 修改头像
const onAvatarChange () {// 调用拍照/选择图片APIuni.chooseMedia({count: 1, // 文件个数mediaType: [image], // 文件类型success: (res) {// 本地路劲const { tempFilePath } res.tempFiles[0]// 文件上传uni.uploadFile({url: /member/profile/avatar, // 接口地址name: file, // 接口参数filePath: tempFilePath, // 文件路径success: (res) {if (res.statusCode 200) {const avatar JSON.parse(res.data).result.avatar// 个人信息页数据更新profile.value!.avatar avatar// store头像更新memberStore.profile!.avatar avataruni.showToast({ icon: success, title: 更新成功 })} else {uni.showToast({ icon: error, title: 出现错误 })}},})},})
}
最后的结果如下 接下来开始收集相应的表单数据进行数据的更新首先这里我们先编写相应的接口函数如下
/*** 修改个人信息* param data 请求体参数*/
export const putMemberProfileAPI (data: ProfileParams) {return httpProfileDetail({method: PUT,url: /member/profile,data,})
}
昵称方面的数据这里我们之间使用v-model双向数据绑定即可使用非空断言避免其初始值不存在也就是undefined的情况如下 关于性别的单选框和生日方面的内容这里直接在相应的表单中设置change函数监听其变化 将动态改变的值存放在响应式ref数据当中
// 修改性别
const onGenderChange: UniHelper.RadioGroupOnChange (ev) {profile.value.gender ev.detail.value as Gender
}
// 修改生日
const onBirthdayChange: UniHelper.DatePickerOnChange (ev) {profile.value.birthday ev.detail.value
}
选择城市方面这里也是采用相应的change事件监听其变化 修改城市的方面需要提供两个数据一个是前端需要的数据另一个是后端需要的数据
// 修改城市
let fullLocationCode: [string, string, string] [, , ]
const onFullLocationChange: UniHelper.RegionPickerOnChange (ev) {// 这是前端页面需要的详细文字数据profile.value.fullLocation ev.detail.value.join( )// 这是后端需要地区编码的数据fullLocationCode ev.detail.code!
}
最后给保存按钮设置点击函数该函数里面调用相应的修改个人信息的接口函数将我们收集的表单数据作为参数传递给接口函数当中
// 点击按钮保存表单
const onSubmit async () {// 结构相应的数据const { nickname, gender, birthday } profile.valueconst res await putMemberProfileAPI({nickname,gender,birthday,provinceCode: fullLocationCode[0],cityCode: fullLocationCode[1],countyCode: fullLocationCode[2],})// 更新store昵称memberStore.profile!.nickname res.result.nicknameuni.showToast({ icon: success, title: 保存成功 })setTimeout(() {uni.navigateBack()}, 400)
}
最终呈现的结果如下 本项目个人中心页面、个人信息页面的一些基本功能的搭建就讲解到这下一篇文章将继续讲解项目其他页面操作关注博主学习更多前端uni-app知识您的支持就是博主创作的最大动力
