Uniapp笔记（五）uniapp语法4

最新推荐文章于 2024-03-14 12:03:14 发布
最新推荐文章于 2024-03-14 12:03:14 发布
阅读量1.5k 收藏 1
点赞数
文章标签： uni-app 笔记 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74343097/article/details/132529717
版权

本章目标

  • 授权登录【难点、重点】

  • 条件编译【理解】

  • 小程序分包【理解】

一、授权登录

我的模块其实是两个组件，一个是登录组件，一个是用户信息组件，根据用户的登录状态判断是否要显示那个组件

1、登录的基本布局
<template>
      <view class="login-container">
        <!-- 提示登录的图标 -->
        <uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
        <!-- 登录按钮 -->
        <button type="primary" class="btn-login">一键登录</button>
      </view>
</template>
<style lang="scss">
    .login-container {
      // 登录盒子的样式
      height: 750rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      // 登录按钮的样式
      .btn-login {
        width: 90%;
        border-radius: 100px;
        margin: 15px 0;
        background-color: #EA9518;
      }
    }
</style>

2、获取微信用户的基本信息

  • 为登录绑定单击事件，调用getUserProfile方法，获取用户基本信息

<button type="primary" class="btn-login" @click="getUserProfile">一键登录</button>

  • 在 methods 节点中声明getUserProfile事件处理函数如下

methods: {
    getUserProfile(){
        uni.getUserProfile({
            desc:'用户完善会员信息',
            success(res) {
                console.log('res',res.userInfo);
            }
        })
    }
}
3、将用户的基本信息存储到vuex

  • 在 store/user.js 模块的 state 节点中，声明 userinfo 的信息对象如下：

state:{
    userinfo:JSON.parse(uni.getStorageSync('userinfo')||'{}')
}

  • 在 store/user.js 模块的 mutations 节点中声明updateUserInfo()

mutations:{
    updateUserInfo(state,userinfo){
        state.userinfo=userinfo
        uni.setStorageSync('userinfo',JSON.stringify(userinfo))
    }
}

  • 修改methods节点中的getUserProfile方法，添加调用调用Mutations中的updateUserInfo实现保存数据到vuex中

import {createNamespacedHelpers} from 'vuex'
    const {mapMutations}=createNamespacedHelpers('user')
    export default {
        methods: {
            ...mapMutations(['updateUserInfo']),
            getUserProfile(){
                uni.getUserProfile({
                    desc:'用户完善会员信息',
                    success:(res) =>{
                        //将用户基本信息存储到vuex中
                        this.updateUserInfo(res.userInfo)
                          //调用getCode()方法完成code生成
                          this.getToken(res)
                    }
                })
            }
        }
    }

执行如上代码，用户基本信息已经存储到了本地，如下图所示

4、登录获取token

  • 当用户同意授权后，我们可以调用 uni.login() 方法来获取 code

async getToken(info){
    let [err,res]=await uni.login()
    const query = {
        code: res.code,
        userInfo:this.userinfo,
        appId: 'wx2b9aa7f72b4f34e2',
        appSecret: '29c37378cf09ecf6fc44466bf5612ecd'
    }
    uni.request({
        method:"POST",
        url:'http://47.98.128.191:3001/users/wxLogin',
        data:query,
        success: (res) => {
            console.log(res.data.token);
        }
    })          
}

参数说明：

  • code：必传参数，后端需要通过 code 去获取用户的 openid；

  • userInfo：非必选参数，需要根据实际项目需求，看后端是否需要用户信息；

  • appId 和 appSecret：学习阶段需要传递，实际项目中不需要传递，这两个值会在后端直接设置好；

    appId 和 appSecret 在“微信公众平台”中获取

5、将token存储到vuex中

  • 在user.js模块中state和mutations中分别定义token以及updateToken方法

export default{
    namespaced:true,
    state:{
        token:uni.getStorageSync('token')||''
    },
    mutations:{
        updateToken(state,token){
            state.token=token
            uni.setStorageSync('token',token)
        }
    }
}

  • 在页面组件中通过mapMutations将updateToken方法进行映射

import {createNamespacedHelpers} from 'vuex'
const {mapMutations,mapState}=createNamespacedHelpers('user')
export default{
    methods: {
		...mapMutations(['updateUserInfo','updateToken']),
        async getToken(info){
			let [err,res]=await uni.login()
			const query = {
				code: res.code,
				userInfo:this.userinfo,
				appId: 'wx2b9aa7f72b4f34e2',
				appSecret: '29c37378cf09ecf6fc44466bf5612ecd'
			}
			uni.request({
				method:"POST",
				url:'http://47.98.128.191:3001/users/wxLogin',
				data:query,
				success: (res) => {
					console.log(res.data.token);
					//保存token到vuex中
					this.updateToken(res.data.token)
				}
			})	
		}
    }
}
6、抽离出自定义组件
<template>
	<view>
		<login v-if="!token"></login>
		<userinfo v-else></userinfo>
	</view>
</template>
<script>
	import {createNamespacedHelpers} from 'vuex'
	const {mapState}=createNamespacedHelpers('user')
	import login from '@/components/login/login.vue'
	import userinfo from '@/components/userinfo/userinfo.vue'
	export default{
		components:{login,userinfo},
		computed:{
			...mapState(['token'])
		}
	}
</script>

二、退出登录

在components/userinfo/userinfo组件中完成用户的退出登录功能

import {createNamespacedHelpers} from 'vuex'
const {mapMutations}=createNamespacedHelpers('user')
export default {
	name:"userinfo",
	methods:{
		...mapMutations(['updateToken','updateUserInfo']),
		async logout(){
			const [err, succ] = await uni.showModal({
				title: '提示',
				content: '确认退出登录吗？'
			}).catch(err => err)
			if (succ && succ.confirm) {
				this.updateToken('')
				this.updateUserInfo({})
			}
		}
	}
]}

三、判断用户是否有效

之前的操作只是判断token有或者无，但是并没有完成token是否有效的判断，下面我们可以完成token是否有效的判断,具体步骤如下

  • 首先在user模块的状态机文件中编写actions的方法getUserInfoAsync来判断用户的token是否有效，如果无效直接跳到登录页面

export default{
	namespaced:true,
	state:{},
	mutations:{},
	//完成的是异步操作
	actions:{
		/*
			vuex中的actions选项中的方法是异步方法
			该方法的参数有两个
			第1个参数是vuex状态机的上下文
			第2个参数是payload是参数
		*/
		getUserInfoAsync(context,payload){
			//向后端接口发送请求
			console.log('token信息',context.state.token);
			uni.request({
				url:'http://47.98.128.191:3001/users/getUserInfo',
				header:{
					'Authorization':context.state.token
				},
				success: (res) => {
					console.log('-----------成功----------');
					console.log('res',res.data.code);
					if(res.data.code==0){
						console.log('999999999999999999');
						uni.showToast({
							title:'token已经过期请重新登录',
							success() {
								//调用mutations中的updateUserInfo和updateToken方法
								context.commit('updateUserInfo',{})
								context.commit('updateToken','')
								//跳转到我的页面中来
								uni.switchTab({
									url:'/pages/mine/index'
								})
							}
						})
						
					}
				},
				fail: (err) => {
					console.log('-----------失败----------');
				}
			})
		}
	}
}

  • 在需要认证的页面组件的onShow方法中调用状态机中的这个方法

比如mine模块中和购物车模块中有需要，则在onShow方法中添加

import {createNamespacedHelpers} from 'vuex'
const {mapActions:mapUserActions}=createNamespacedHelpers('user')
export default {
		methods: {
			...mapUserActions(['getUserInfoAsync']),
		},
		//当页面组件显示在前台的时候调用
		onShow() {
			console.log('-------购物车模块的onShow---------');
			this.getUserInfoAsync()
		}
}

四、条件预编译

注意：在HBuilder中生成条件编译的代码的快捷键是CTRL+ALT+/

1、跨端兼容

uniapp已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。

但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

  • 大量写 if else，会造成代码执行性能低下和管理混乱。

  • 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

2、条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

  • #ifdef：if defined 仅在某平台存在

  • #ifndef：if not defined 除了某平台均存在

  • %PLATFORM%：平台名称

条件编译写法说明
#ifdef APP-PLUS 需条件编译的代码 #endif仅出现在 App 平台下的代码
#ifndef H5 需条件编译的代码 #endif除了 H5 平台，其它平台均存在的代码
#ifdef H5 || MP-WEIXIN 需条件编译的代码 #endif在 H5 平台或微信小程序平台存在的代码（这里只有||，不可能出现&&，因为没有交集）

%PLATFORM% 可取值如下：

值平台
APP-PLUSApp
APP-PLUS-NVUEApp nvue
H5H5
MP-WEIXIN微信小程序
MP-ALIPAY支付宝小程序
MP-BAIDU百度小程序
MP-TOUTIAO字节跳动小程序
MP-QQQQ小程序
MP微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序

支持的文件

  • .vue

  • .js

  • .css

  • pages.json

  • 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

3、API条件编译
// #ifdef %PLATFORM%
平台特有的API实现
// #endif

示例，如下代码仅在 App 下出现:

//#ifdef APP_PLUS
plus.push.addEventListener('click',function(msg){
    var payload = null
    var action = '';
    if(msg.payload){
        if(typeof msg.payload === 'string'){
            payload = JSON.parse(msg.payload)
        }
        action = payload.action;
        if(action === 'open'){
            plus.webview.open(payload.url)
        }
    }
})
//#endif

示例，如下代码不会在 H5 平台上出现：

//#ifndef H5
uni.scanCode({
    success:(res)=>{
        console.log(res.result);
    }
});
//#endif

除了支持单个平台的条件编译外，还支持多平台同时编译，使用 || 来分隔平台名称。

示例，如下代码会在 App 和 H5 平台上出现：

//#ifdef APP-PLUS || H5
uni.chooseVideo({
    success:(res)=>{
        console.log(res.result);
    }
});
//#endif
4、组件的条件编译
<!--  #ifdef  %PLATFORM% -->
平台特有的组件
<!--  #endif -->

示例，如下广告组件仅会在微信小程序中出现：

<!-- #ifdef MP-WEIXIN -->
<ad unit-id="test"></ad>
<!-- #endif -->
5、样式的条件编译
/*#ifdef  %PLATFORM% */
平台特有样式
/* #endif */

注意： 样式的条件编译，无论是 css 还是 sass/scss/less/stylus 等预编译语言中，必须使用 /注释/ 的写法。

正确写法

/* #ifdef MP-WEIXIN */
.wx-color{
    color:#fff000;
}
/* #endif */

错误写法

// #ifdef MP-WEIXIN
.wx-color{
    color:#fff000
}
// #endif
6、pages.json 的条件编译

下面的页面，只有运行至 App 时才会编译进去。

// #ifdef APP-PLUS
{
    "path":"pages/api/speech/speech",
    "style":{
        "navigationBarTitleText":"语音识别"
    }
}
//#endif

不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。

json的条件编译，如不同平台的key名称相同，cli项目下开发者自己安装的校验器会报错，需自行关闭这些校验器对json相同key的校验规则。如果使用HBuilderX的校验器，无需在意此问题，HBuilderX的语法校验器为此优化过

7、static 目录的条件编译

在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。

如以下目录结构，a.png 只有在微信小程序平台才会编译进去，b.png 在所有平台都会被编译。

┌─static                
│  ├─mp-weixin
│  │  └─a.png     
│  └─b.png
├─main.js        
├─App.vue      
├─manifest.json 
└─pages.json

五、小程序分包

1、分包概述
1.1、什么是分包

分包是指将一个完整的小程序项目，按照需求划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

1.2、分包的好处

  • 可以优化小程序首次启动的下载时间

    • 分包前，小程序项目中所有的页面和资源都被打包到了一起，导致真个项目体积过大，影响小程序首次启动的下载时间

    • 分包后，小程序项目由1个主包+多个分包组成

      • 主包：一般只包含项目的启动页面或Tabbar页面，以及所有分包都需要用到的一些公共资源

      • 分包：只包含和当前分包有关的页面和私有资源

  • 在多团队共同开发时可以更好的解耦协作

1.3、分包的加载规则

  • 在小程序启动时，默认会下载主包并启动主包内页面

    • tabBar页面需要放在主包中

  • 当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示

    • 非tabBar页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

1.4、分包的体积限制

目前，小程序分包的大小有以下两个限制

  • 整个小程序所有分包大小不超过16M(主包+所有分包)

  • 单个分包/主包大小不能超过2M

2、分包的基本用法
2.1、配置步骤

在pages.json中配置subPackages实现分包，下面对象的常见属性

  • root:分包的根目录

  • name:分包的别名

  • pages:分包目录下，页面的相对存放路径

  "subPackages": [
        {
            "root": "productPkg",
            "name": "product",
            "pages": [
                "pages/product/product-list",
                "pages/product/product-detail"
            ]
        },
        {
            "root": "payPkg",
            "name": "pay",
            "pages": [
                "pages/pay/apy-address",
                "pages/pay/apy-detail"
            ]
        }
    ],
2.2、应用原则

  • 主包无法引用分包内的私有资源

  • 分包之间不能相互引用私有资源

  • 分包可以引用主包内的公共资源

3、独立分包
3.1、什么是独立分包

独立分包本质上也是分包，只不过它比较特殊，可以独立于主包和其他分包而单独运行。

3.2、普通分包和独立分包的区别

最主要的区别：是否依赖于主包才能运行

  • 普通分包必须依赖于主包才能运行

  • 独立分包可以在不下载主包的情况下，独立运行

3.3、独立分包的应用场景

  • 当小程序从普通的分包页面启动时，需要首先下载主包

  • 而独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度

3.4、配置方法
  "subPackages": [
        {
            "root": "productPkg",
            "name": "product",
            "pages": [
                "pages/product/product-list",
                "pages/product/product-detail"
            ]
        },
        {
            "root": "payPkg",
            "name": "pay",
            "pages": [
                "pages/pay/apy-address",
                "pages/pay/apy-detail"
            ],
            "independent":true
        }
    ],
3.5、引用原则

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源！例如：

  • 主包无法引用独立分包内的私有资源

  • 独立分包之间，不能相互引用私有资源

  • 独立分包和普通分包之间，不能相互引用私有资源

  • 特别注意：独立分包中不能引用主包内的公共资源

4、分包预下载
4.1、什么是分包预下载

分包预下载指的是：在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度。

4.2、配置分包预下载

预下载分包的行为，会在进入指定的页面时触发。在 app.json 中，使用 preloadRule 节点定义分包的预下载 规则，示例代码如下：

 "preloadRule": {
    "pages/contact/contact": {
      "packages": [
        "p1"
      ],
      "network": "wifi"
    }
  },
鸣鲷有柒
关注
uniapp笔记
GTbond的博客
02-15 759
1.项目目录 2.模板语法 vue组件语法 v-bind / : v-on / @ v-model v-if v-show v-for 空标签 template view 作为div使用 text 作为span使用
uniapp 笔记第三天(修改数组对象的某个值、watch、computed)
m0_61389631的博客
08-03 5083
我们想呢 点击哪个按钮 就让谁切换它的状态,看上面的数据哈 每一项都有一个status 你就可以根据索引拿到当前的状态赋值 做法就是取反哈！，原因是简单数据类型没有地址的概念 现在修改的num是一个简单数据类型传过来的 num 并非data里定义的 num 传过来的只是值而已。，原因就是 传过来的对象和data里面定义的对象 指向的都是同一个地址，所以可以修改，如果你去定义一个简单的数据类型。如果你想直接修改 复杂数据类型里的某个值 也是同理，我们既然可以拿到上面的索引 直接根据索引找某个值就好了。...
uniapp语法
cccbbbmmm的博客
12-07 224
Uniapp 是一个跨平台的开发框架，可以使用 Vue.js 语法进行开发。以上是 Uniapp 中常用的语法，还有其他更高级的语法和 API 可以参考官方文档。使用 v-bind:class 和 v-bind:style 指令可以动态绑定样式。使用 v-if 和 v-else 指令可以根据条件来渲染不同的内容。使用 v-on 指令绑定事件，可以监听用户的操作并触发对应的方法。使用 v-for 指令可以遍历数组或对象来渲染列表。使用双花括号（{{}}）绑定数据到模板中。
uniapp 常用语句总结(随时更新)
本堃不方的博客
10-11 1995
7、生命周期 目录 1、弹出信息框、对话框 2、发送请求 3、路由跳转 4、本地存储 5、图片 6、登录 1、对话框(uni.showModal) uni.showModal({ title:"提示", content:"", showCancel:true, cancelText:'取消按钮', confirmText:'确定按钮', success:(res)=>{ console.log(res)
语法速通 uni-app随笔【uni-app】【微信小程序】【vue】
cold的博客
05-24 2655
好记性不如烂笔头，习惯做随笔，造轮子。
uniapp开发常用辅助函数mapState、mapMutations和computed来映射vue属性和方法
最新发布
飙歌的博客
03-14 1120
还有一种使用方法,意思是将store里面的state里面的city属性映射到computed属性中的 currentCity 中。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。5.通过下面的计算属性，就可以在当前组件中访问到count,name,nameAlias等了 在模板中我们通过大括号符号打印出来。当一个组件需要获取多个状态时候，将这些状态都声明为计算属性时，会有些重复和冗余。3.由于 Vuex 的状态存储是响应式的，所以可以使用计算属性来获得某个状态。
uniapp 异步请求 promise的用法，async/await异步处理同步化
weixin_48393490的博客
04-13 3869
2、promise是解决异步的一种方法，本质上是一种构造函数，可以用它实例化对象，对象身上有resolve、reject、all,原型上有then和catch方法。异步与同步相反，异步的执行与原有的执行顺序没有关系，在不确保时间的时候，异步是最好的选择，网络请求无论多长时间，程序将不会等待，直接执行下一步。使用promise解决回调地狱(自我感觉其实是一样的，只不过是将每个请求单独封装，在调用封装好的请求即可，只是这样更清晰一点)2、异步的最大问题：回调地狱（俄罗斯套娃），一层一层嵌套。
uniapp笔记.rar
08-06
【uniapp笔记】 uniapp是一款基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在iOS、Android、Web（H5）、小程序（微信/支付宝/百度/头条/QQ）等多个平台运行。它的核心理念是提供一套统一的开发语言和...
移动端uniapp(个人笔记,新手向)
10-31
总的来说，uniapp是一个适合新手入门的移动端开发框架，它结合了Vue.js的优雅语法和跨平台的能力，降低了开发门槛，同时提供了强大的功能和良好的性能。通过不断学习和实践，开发者可以借助uniapp快速构建出高质量的...
uniapp项目开发笔记摘要与要点总结
10. 组件和API：uniapp拥有丰富的组件库和API，这些组件和API都是根据Vue.js的语法规范实现的，使得熟悉Vue.js的开发者可以快速上手。 uniappe-project-m笔记可能涉及到这些知识点的具体应用和实践，包括但不限于对...
uniApp 登录篇 ＜小程序登录＞
m0_57547956的博客
09-30 8120
接下来会陆续更新 小程序、h5公众号、支付宝(可能) ，只要涉及到的使用uniApp登录的业务，都会记录在登录篇中，不定期更新。 第一步:通过uni.login 获取CODE 回传给服务器 需要服务器端提供一个接口 因为很多地方要使用 所以我封装了一下 并且挂载到了vue的原型 //微信静默获取Code并返回 V_Proto.$getCodeWx = async function() { //这个函数会返回一个CODE 是通过uni.login得到的 如果没有获取到则会返回false let .
uniapp获取用户登录信息的实现
紫月i的博客
05-05 3965
1.发起网络请求： https://uniapp.dcloud.net.cn/api/request/request.html 示例： uni.request({ url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。 method:'GET', data: { text: 'uni.request'//请求的参数 }, header: { 'custom-header': '
【UniApp】同步执行请求 async 和 await
qq_27134147的博客
10-09 1886
如果不使用await等待异步请求，那么输出格式将会是这样的。这是使用await等待异步请求后的结果。
uni-app async/await优化启动流程
sj15951886877的博客
06-17 1437
uni-app async/await优化启动流程App启动流程需求流程图一种实现方式Async/Await改进方法弹框组件使用Promise方式异步请求Promise包装最终方案 App启动流程 通常我们App在进入首页时，都需要做一些初始化工作，如申请权限，从服务器获取数据（user信息，App配置信息等），sdk初始化等。一般的App可能包含下面几个步骤： 用户协议和隐私政策（首次启动展示，需要用户同意才可进入app） 权限申请 用户登录状态判断 3.1 未登录跳转登录页面 3.2 已登录获取用户信
uniapp实现登录和退出登录功能
weixin_63929524的博客
03-06 3364
要实现登录和退出登录功能，需要以下步骤： 1. 创建登录界面，包括用户名和密码输入框，登录按钮等。 2. 在登录按钮的点击事件中，获取用户名和密码输入框中的值，然后向服务器发送请求验证用户信息是否正确。 3. 如果验证成功，将用户信息保存在本地，然后跳转到主界面。 4. 在主界面中，显示用户的基本信息，包括用户名、头像等。 5. 创建退出登录按钮，在点击事件中清除本地保存的用户信息，然后跳转到登录界面。
async/await， 搭配 promise使用
weixin_57844432的博客
11-26 4636
async/await 搭配 promise 异步
uniapp中token操作：存储、获取、失效处理。
qq_43483403的博客
08-07 6736
uniapp中token操作：存储、获取、失效处理。
记一下uniapp启动前获取服务器token
b734775358的博客
07-20 514
因为垃圾项目挂载在别人的APP下面，公司内开发只开发单页面，每次进行调试都要onload获取一下登陆口令，有时候忘了注释获取口令的调用就会导致用户登陆异常，所以要在测试环境限定一个全局获取口令的方法，记一下备忘。主要就是在挂载APP之前，先进行环境判断，如果是开发环境，就请求口令，保存，然后再挂载，如果是生产环境就直接挂载就完事。之后要用到token的时候就token = uni.getStorageSync('token')在main.js里面，加上。
uni-app学习心得——优选商城之用户登录与退出
nyu0815的博客
06-25 504
获取登录信息查询订单状态下面将对这几个功能进行详解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值