Vant组件库
Vant组件库
安装配置
-
执行命令，下载安装
vant组件库。# 进入项目根目录下，执行命令 npm init -y npm i @vant/weapp -S --production安装完毕后，将会根目录下新增
package.json配置文件和node_modules文件夹。 -
修改app.json。
将 app.json 中的
"style": "v2"去除。 -
修改根目录下的project.config.json。
{ ... "setting": { ... "packNpmManually": true, "packNpmRelationList": [ { "packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./miniprogram/" } ] } } -
点击npm构建，将npm下载的vant源码编译到小程序目录。
点击 小程序开发工具菜单栏 - 工具 - 构建npm。构建完成后，将会在miniprogram目录下出现编译完毕后输出的vant源码：自定生成
miniprogram_npm目录。
使用
-
在json配置文件中，引入组件：
"usingComponents": { "van-button": "@vant/weapp/button/index" } -
在wxml中直接使用组件即可：
<van-button type="default">默认按钮van-button> <van-button type="primary">主要按钮van-button> <van-button type="info">信息按钮van-button> <van-button type="warning">警告按钮van-button> <van-button type="danger">危险按钮van-button>
搭建me页面
头像部分
<view class="cover">
<van-image round width="180rpx" height="180rpx" src="https://img.yzcdn.cn/vant/cat.jpeg" />
<view>点击登录view>
view>
/*me.wxss*/
.cover{
background-color: #f03d37;
padding: 50rpx;
text-align: center;
color: #fff;
}
<van-grid>
<van-grid-item icon="certificate" dot text="立即签到" />
<van-grid-item icon="gift-o" info="9" text="我的福利" />
<van-grid-item icon="clock-o" text="观看历史" />
<van-grid-item icon="shop-o" text="积分商城" />
van-grid>
<van-cell icon="like-o" title="我喜欢的" is-link />
<van-cell icon="star-o" title="我的收藏" is-link />
<van-cell icon="setting-o" title="设置" is-link />
微信登录
点击按钮（或其他），获取用户信息（昵称、头像等）。
wx.getUserProfile({
lang: 'zh_CN',
desc: '描述文本',
success: (res)=>{}
})
data: {
isLogin:false,
userInfo:{
nickName:'点击登录'
}, //用于保存用户数据
},
/**点击登录业务 */
handleTapLogin(){
if(this.data.isLogin){
return; //若已经登录,则直接返回
}
wx.getUserProfile({
lang: 'zh_CN',
desc: '获取用户信息用于维护会员权益',
success: (res)=>{
console.log(res.userInfo)
this.setData({userInfo:res.userInfo,isLogin:true})
}
})
},
<view class="cover">
<van-image round width="180rpx" height="180rpx" src="{{userInfo.avatarUrl}}" />
<view bindtap="handleTapLogin">{{userInfo.nickName}}view>
view>
修改昵称 修改头像; 我下次登录小程序的时是修改后的昵称和头像
我们想要在登录小程序后, 小程序是一个单独的应用程序, 关键在于我想修改昵称, 修改头像等 ; 保存手机号,提交身份证号
仅仅获取微信数据，并不是完整的登录业务，真正的登录业务，需要用户个人信息存入自己家数据库中来存储（昵称、头像、手机号、性别、身份证等）。点击微信授权登录仅仅只是为用户提供了一个便捷的登录接口。
微信登录完整业务流
-
设计一个数据库，用于存储用户信息（可以是mysql，也可以是云数据库集合）。
id _openid nickName avatar gender … 1 oOv32342sdf 徐铭 http://xxxx.jpg 男 … 2 aabbc2454aa 亮亮 http://ll.jpg 男 … … … … … … … 一定要使用自己的数据库存储用户的详细信息。
-
当用户点击微信登录并授权后，获取用户的微信信息，更新UI。
-
执行登录业务，发请求，找自己家数据库，查看是否有当前登录用户：
- 找得到：登录成功，返回最新的用户信息并显示。
- 找不到：第一次登录，需要执行注册业务，添加新用户，显示用户信息。
数据库 : 云开发中的数据库中新建集合 users, 将 res.userInfo 添加到数据库中
实现更新头像业务
-
点击头像后，打开摄像头、图库选择图片。
wx.chooseMedia() -
图片选择完毕后点击确定，将会返回该图片的路径，直接更新头像路径即可。
-
这种修改头像的方式只能临时修改，如果希望永久修改头像的话，需要在选择头像完毕后，将头像上传至
云存储，并且获取访问该图片的网络地址。
-
将该网络地址更新到数据库，这样才可以保证下次登录时可以显示用户最新的昵称与头像。
云存储二
类似云盘，可以在小程序端通过提供的API，方便的实现文件上传操作。在云存储空间中的文件都会被分配一个访问地址，供客户端下载。
如何通过API将图片上传至云存储？
wx.cloud.uploadFile({
cloudPath: 云空间的图片路径, 需要随机生成
filePath: 本地需要上传的文件的路径
success: (res)=>{}
})
3.2 云存储
云存储类似于网盘，提供文件的上传/下载的能力。
云存储的文件管理方式可通过：
A.云开发控制台 – 图形化的界面
B.相关的API— 重点研究
3.2.1 API
wx.chooseImage()
wx.chooseImage()方法用于从相册中选择图片或者使用相机拍照，其语法结构是：
html页面渲染
css样式
wx.previewImage()
wx.previewImage()方法用于预览图片，其语法结构是：
wx.previewImage({
urls:需要预览的图片的路径列表(string array类型),
current:"当前显示的图片的路径",
success:res=>{
//...
}
})
wx.cloud.uploadFile和wx.uploadFile
wx.uploadFile 上传到自己的服务器
wx.cloud.uploadFile 上传到云服务器
wx.cloud.uploadFile({
filePath:"上传的文件路径", //要上传谁?
cloudPath:"云存储的路径及名称", //传到哪里?
// 可以写 123.jpg 或 aaa/123/jpg 或 bbb/ccc/123.jpg
// 每次上传, 名称一样会被覆盖
// 所以需要重新命名: 扩展名称不变, 修改主名称
success:res=>{
//res为object类型,包含fileID属性，代表上传文件在云存储上的路径及名称
//一般情况下,该fileID一定要写入到数据库
}
});
上传到云存储中
