Vant组件库

Vant组件库

安装配置

1. 执行命令，下载安装vant组件库。

   # 进入项目根目录下，执行命令
   npm init -y
   npm i @vant/weapp -S --production
   

   安装完毕后，将会根目录下新增package.json 配置文件和node_modules文件夹。

2. 修改app.json。

   将 app.json 中的 "style": "v2" 去除。

3. 修改根目录下的project.config.json。

   {
     ...
     "setting": {
       ...
       "packNpmManually": true,
       "packNpmRelationList": [
         {
           "packageJsonPath": "./package.json",
           "miniprogramNpmDistDir": "./miniprogram/"
         }
       ]
     }
   }
   

4. 点击npm构建，将npm下载的vant源码编译到小程序目录。

   点击 小程序开发工具菜单栏 - 工具 - 构建npm。构建完成后，将会在miniprogram目录下出现编译完毕后输出的vant源码：自定生成miniprogram_npm目录。

使用

1. 在json配置文件中，引入组件：

   "usingComponents": {
     "van-button": "@vant/weapp/button/index"
   }
   

2. 在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页面

头像部分

<!--me.wxml  van-image组件-->
<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;
}

<!--me.html van-grid icon-->
<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-->
<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>

修改昵称 修改头像; 我下次登录小程序的时是修改后的昵称和头像
我们想要在登录小程序后, 小程序是一个单独的应用程序, 关键在于我想修改昵称, 修改头像等 ; 保存手机号,提交身份证号

仅仅获取微信数据，并不是完整的登录业务，真正的登录业务，需要用户个人信息存入自己家数据库中来存储（昵称、头像、手机号、性别、身份证等）。点击微信授权登录仅仅只是为用户提供了一个便捷的登录接口。

微信登录完整业务流

1. 设计一个数据库，用于存储用户信息（可以是mysql，也可以是云数据库集合）。

   id	_openid	nickName	avatar	gender	…
   1	oOv32342sdf	徐铭	http://xxxx.jpg	男	…
   2	aabbc2454aa	亮亮	http://ll.jpg	男	…
   …	…	…	…	…	…

   一定要使用自己的数据库存储用户的详细信息。

2. 当用户点击微信登录并授权后，获取用户的微信信息，更新UI。

3. 执行登录业务，发请求，找自己家数据库，查看是否有当前登录用户：

   1. 找得到：登录成功，返回最新的用户信息并显示。
   2. 找不到：第一次登录，需要执行注册业务，添加新用户，显示用户信息。

数据库 : 云开发中的数据库中新建集合 users, 将 res.userInfo 添加到数据库中

实现更新头像业务

1. 点击头像后，打开摄像头、图库选择图片。

   wx.chooseMedia()
   

2. 图片选择完毕后点击确定，将会返回该图片的路径，直接更新头像路径即可。
   

3. 这种修改头像的方式只能临时修改，如果希望永久修改头像的话，需要在选择头像完毕后，将头像上传至云存储，并且获取访问该图片的网络地址。
   

4. 将该网络地址更新到数据库，这样才可以保证下次登录时可以显示用户最新的昵称与头像。
   

云存储二

类似云盘，可以在小程序端通过提供的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一定要写入到数据库
	}
});

上传到云存储中