移动端 Web 开发前端知识整理

于 2016-08-27 17:47:00 发布
阅读量134 收藏
点赞数
原文链接：http://www.cnblogs.com/doseoer/p/5813458.html
版权

文章来源： http://www.restran.net/2015/05/14/mobile-web-front-end-collections/

 

最近整理的移动端 Web 开发前端知识，不定期更新。

HTML5 可以做什么

  1. 拍照
  2. 获取地理位置
  3. 手势
  4. canvas 绘图和动画(硬件加速)
  5. localstorage，本地缓存

HTML5 动画效果 demo

http://fff.cmiscm.com/#!/main

CSS3 动画

http://isux.tencent.com/css3/index.html

http://beiyuu.com/css3-animation/

CSS3 实现的 Loading（加载）动画效果

基本的 HTML 文件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE HTML>
<html>
<head lang="zh-CN">
 <meta charset="UTF-8">
 <title>标题</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <!-- 设置初始缩放比例为1.0，使用设备宽度 -->
 <meta name="viewport"
 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
 <!-- 在iOS下开启全屏模式 -->
 <meta name="apple-mobile-web-app-capable" content="yes">
 <!-- 隐藏 Sarafi 状态栏 -->
 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 <link href="/static/css/your_css.css" rel="stylesheet"/>
</head>
<body>

<script src="/static/js/your_js.js"></script>
</body>
</html>

DOM 操作库

zepto.js

jQuery

  1. jQuery 的目标是兼容所有主流浏览器，这就意味着它的大量代码对移动端的浏览器是无用或者低效的

  2. Zepto是一个轻量级的针对现代高级浏览器的JavaScript库，只针对移动端浏览器编写，因此体积更小、效率更高，更重要的是，它的 API 完全仿照 jQuery，如果你会用jquery，那么你也会用zepto。

  3. Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库（目前最新版，gzip 压缩后只有 9.1k）、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

todo：zepto 与 jQuery 冲突问题

很多插件是基于jQuery 的，如果想要使用这些插件，又引入了 jQuery 将引起冲突，而且这时候 zepto 就没有引入的意义，但是有些框架又是基于 zepto，例如 frozenui。

UI 框架

frozenui（腾讯开源） 腾讯手 Q 风格

Amaze ~ 妹子 UI（国内开源）

jQuery.mmenu iOS 风格的菜单

bootstrap

semantic-ui

ratchet

jquery mobile

字体图标

Font Awesome

矢量，颜色大小可以自定义

自定义图标字体

http://fontello.com/

有时只需要使用到一部分的图标，可以通过自定义的方式来减小图标字体文件的大小。

HTML 模板引擎

AngularJS（Google 开源）

场景，需要要动态创建列表数据的时候

没有 AngularJS 之前，用 js 拼接出 HTML 字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function render_order_data(data) {
 var obj_item_list = $('#item-list');
 for (var i = 0; i < data.length; i++) {
 var arr = [];
 var d = data[i];
 arr.push('<li class="ui-border-t">');
 arr.push('<div class="item"><div><div>工单流水号</div><div>');
 arr.push(d['id']);
 arr.push('</div></div><div><div>工单标题</div><div>');
 arr.push(d['title']);
 arr.push('</div></div><div><div>申请时间</div><div>');
 arr.push(d['createtime']);
 arr.push('</div></div><div><div>商铺关键字</div><div>');
 arr.push(d['shop_name']);
 arr.push('</div></div><div><div>覆盖范围</div><div>');
 arr.push(d['shop_lengths']);
 arr.push('</div></li>');
 obj_item_list.append(arr.join(''));
 }
}

有了 AngularJS 之后，利用 AngularJS 的数据绑定，直接写 HTML 模板，清晰易懂

1
2
3
4
5
6
7
8
9
10
11
 
<tr ng-repeat="entry in entries">
 <td ng-bind="page_info.offset + $index+1"></td>
 <td ng-bind="entry.status"></td>
 <td ng-bind="entry.elapsed + 'ms'"></td>
 <td ng-bind="entry.code"></td>
 <td ng-bind="entry.time"></td>
 <td>
 <span ng-bind="entry.result ? 'Success' : 'Failure'"
 class="label {{ entry.result ? 'label-success' : 'label-danger' }}">Success</span>
 </td>
</tr>

AngularJS 学习资源

表单验证

HTML5 表单验证已经很强大，但是目前在 iOS 8 上面的浏览器仍然是不支持的，Android要 4.4 以上才支持。

boostrap 表单验证

Bootstrap Validator

http://1000hz.github.io/bootstrap-validator/

HAPPY.JS

Lightweight form validation for jQuery or Zepto.js

http://happyjs.com/

jQuery Form Validator

https://github.com/victorjonsson/jQuery-Form-Validator

AngularJS 本身有提供表单验证的功能

jquery-validation

jquery-validation

semantic-ui 自带表单验证

开发模式

前后端分离，接口开发与 HTML，CSS，JS 这些前端开发分离。

相关工具

IDE

Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose.
You’ll love the slick user interface, extraordinary features and amazing performance.

Jetbrains WebStorm（The smartest JavaScript IDE）

WebStorm is a lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.

前端工具

静态文件缓存问题（重要）

由于默认情况下（服务器没有设置 expire header 为 -1 或 0） WebView 会缓存静态文件，如果没有更新静态文件的版本，会导致网站做了更新，而用户实际上仍在使用旧的文件。

静态资源版本更新与缓存

http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1

使用 FIS 工具解决

FIS （百度开源）

http://fis.baidu.com/

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。可以实现静态文件压缩、合并、为文件名添加版本 md5 Hash。

调试工具

Chrome （Android iOS 都是 Webkit 内核）

Fiddler（抓包工具，需要借助 wi-fi 热点分享）

HTTP 服务器 Nginx

Nginx是一款面向性能设计的HTTP服务器，相较于Apache、lighttpd具有占有内存少，稳定性高等优势。

在前端开发中，经常作为反向代理服务器，用来在自己的开发电脑上，模拟生产环境，通过资源重定向和反向代理，可以同时访问部署在其他服务器上的接口或网站，以及自己电脑上正在开发的网页。

http://nginx.org/en/download.html

nginx 配置的一个例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
server {
  listen  *:5005;
 access_log logs/my_site_access.log;
 error_log logs/my_site_error.log;

 # 不缓存
 expires 0;
 # add_header Cache-Control private;

 #location ~* \.html$ {
 # expires -1;
 #}

 location / {
 ssi on;
 autoindex on;
 # / 前缀的请求，定位到html目录下
 root "D:/WebStorm/my_site/html";
 index index.html index.htm;
 }
 
 # /static 前缀的 uri 请求，定位到这个目录 
 location /static {
 alias "D:/WebStorm/my_site/static"; 
 } 

 # /@api_my_site 前缀的 uri，反向代理到 http://192.168.14.93:9999
 # /@api_my_site 前缀的 uri 是 api_my_site 接口请求地址
 location /@api_my_site {
 # 重写 uri，原本的 uri 是 /@api_my_site/... 
 # 可以去掉前缀 /@api_my_site/
 # rewrite /@api_my_site/(.*) /$1 break;
 
 proxy_pass http://192.168.14.93:9999;
 proxy_set_header Cookie $http_cookie;
 }
}

在线工具

jsfiddle

Test and share JavaScript, CSS, HTML or CoffeeScript online.

在线即时展现 Html、JS、CSS 的编辑工具，可以有效的帮助 web 前端开发人员来有效分享和演示前端效果。

https://jsfiddle.net/

CSS3 HTML5 兼容性查询

查询 HTML5 和 CSS3 语法兼容性

http://caniuse.com/
http://mobilehtml5.org/

CSS 语法手册

http://tympanus.net/codrops/css_reference/

书

CSS设计指南（第3版）（文字版）

在线学习资源

慕课网

codeschool

codeacademy

JS 模块化加载

前端模块化开发的价值

Requirejs

Seajs （淘宝开源）

常用组件

回到页首

性能优化

  1. 移动网络的环境比较复杂，在调试的时候可以用 Chrome 模拟不同的网络环境，关注页面加载的数据量，和加载时间。

http://oxygen.qiniudn.com/img2015051433.png

  1. 使用 CDN，常用的库一般会有 CDN 地址，也可以将自己的一些静态文件放在七牛上，七牛有免费的额度。
  2. 小图片转成 base64，减少 HTTP 请求
  3. css，js 文件压缩，启用GZip（HTTP服务器已开启 gzip）
  4. 服务器开启静态文件缓存，发布新版本时，需要对文件名加md5戳，使用 fis 工具（html 文件强制不缓存）。
  5. 大量的图片显示，可以使用 Canvas 画图，而不用 img 标签，Canvas 有硬件加速
  6. 无阻塞，写在HTML头部的JavaScript（无异步），和写在HTML标签中的Style会阻塞页面的渲染，因此CSS放在页面头部并使用Link方式引入，避免在HTML标签中写Style，JavaScript放在页面尾。
  7. 网页的渲染不支持硬件加速，dom很多很大的时候会很卡，Facebook 曾经就是因为这个原因放弃了html5，但现在又推出了一个 react js
  8. javascript 单线程，不要执行太复杂的任务，否则会导致页面卡住。

  9. 动画优化，尽量使用CSS3动画

  10. HTML5 的 Manifest 和 localstorage，在本地缓存文件和数据。

前端知识库

腾讯移动Web前端知识库 Mars

https://github.com/AlloyTeam/Mars

alloyteam 移动开发规范概述

http://alloyteam.github.io/Spirit/modules/Standard/index.html#overview

移动H5前端性能优化指南

http://isux.tencent.com/h5-performance.html

静态资源管理与模板框架

http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2

HTML5中40个最重要的技术点

http://www.techug.com/40-important-html-5-interview-questions-with-answers

Webkit WebApp 开发技术要点总结

http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html

 

转载于:https://www.cnblogs.com/doseoer/p/5813458.html

VI7591
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端web开发技巧与经验分享
02-26
移动端web开发技巧汇总与经验分享，已经涵盖了web移动端开发的方方面面，web移动端开发不可多得的干货，值得一看。(1);initial-scale maximum-scale=1.0;user-scalable u2033name=”viewport”/>(2)”name=”apple-...
手机移动端web前端常见问题整理文档
08-18
手机移动端web前端常见问题的处理方法
thebootstrapthemes-portfolio_前端开发_移动端web_移动Web_
09-30
一个移动端的时尚web网站前端代码，具有一些JavaScript特效，时尚美观。
移动端web开发调试.pdf
08-21
移动端web开发调试.pdf
移动端web开发H5之音视频
06-21
HTML5是移动端开发最常用的技术，熟悉HTML5新标签和Api以及CSS3的新的Api,可以使你的网页更加的绚丽多彩，并且开发出你意想不到的网页效果。学完此课程，你编写的代码就可以在移动设备上完美兼容啦。
resnet模型-基于图像分类算法对汉字写的是否工整识别-不含数据集图片-含逐行注释和说明文档.zip
05-23
resnet模型_基于图像分类算法对汉字写的是否工整识别-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,
计算机毕业设计选题精品毕设分享+源码+论文+PPT+asp.net0班级网站的设计与实现演示录像.rar
05-23
博主给大家详细整理了计算机毕业设计最新项目,对项目有任何疑问(部署跟文档),都可以问博主哦~ 一、JavaWeb管理系统毕设项目【计算机毕设选题】计算机毕业设计选题，500个热门选题推荐,更多作品展示 计算机毕业设计|PHP毕业设计|JSP毕业程序设计|Android毕业设计|Python设计论文|微信小程序设计 更多作品展示 +微亻言 biyesheji02
Reborn 是使用 Go 开发的，基于 Redis 存储的配置库，简单配置，易于使用
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
其他类别Jsp考试系统-jspks.7z
05-23
[其他类别]Jsp考试系统_jspks.7z
计算机毕业设计选题精品毕设分享+源码+论文+PPT+asp.net15图书馆借阅管理系统多用户(无论文)录像.rar
05-23
博主给大家详细整理了计算机毕业设计最新项目,对项目有任何疑问(部署跟文档),都可以问博主哦~ 一、JavaWeb管理系统毕设项目【计算机毕设选题】计算机毕业设计选题，500个热门选题推荐,更多作品展示 计算机毕业设计|PHP毕业设计|JSP毕业程序设计|Android毕业设计|Python设计论文|微信小程序设计 更多作品展示 +微亻言 biyesheji02
基于go-zero、xorm实现的云盘文件存储系统.zip
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
小程序项目源码之美容预约小程序.zip
05-23
小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序小程序项目源码之美容预约小程序v
alexnet模型-python语言pytorch框架训练识别餐桌美食-不含数据集图片-含逐行注释和说明文档.zip
最新发布
05-23
alexnet模型_python语言pytorch框架训练识别餐桌美食-不含数据集图片-含逐行注释和说明文档 本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 如果有环境安装不会的，可自行网上搜索如何安装python和pytorch,这些环境安装都是有很多教程的，简单的 环境需要自行安装,推荐安装anaconda然后再里面推荐安装python3.7或3.8的版本，pytorch推荐安装1.7.1或1.8.1版本 首先是代码的整体介绍 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成
详解ArcGIS 水文分析模型构建
05-23
实验dem数据
微信小程序源码 视觉盛宴 - 全屏动画滚动效果组件下载
05-23
全屏动画滚动效果组件是一款为网站和应用开发者提供的前端动画工具，它允许开发者轻松实现全屏滚动动画效果，增强网页的视觉吸引力和用户体验。以下是该组件的主要特点： 全屏滚动：支持全屏范围内的动画滚动，提供沉浸式的视觉体验。 动画效果多样：集成多种动画效果，如淡入淡出、滑动、缩放等，满足不同的设计需求。 响应式设计：确保在不同设备和分辨率上均能完美展示动画效果。 自定义动画路径：允许开发者自定义动画的运动路径和时间，创造独特的滚动效果。 高性能优化：优化的代码实现，确保动画滚动流畅，不卡顿。 易于集成：提供清晰的API和文档，简化集成到现有项目的过程。 交互性增强：动画效果可以与用户交互相结合，如点击、滚动等事件触发。 SEO友好：考虑搜索引擎优化，确保动画内容对搜索引擎友好。 多场景适用：适用于产品展示、故事叙述、广告宣传等多种场景。 全屏动画滚动效果组件是提升网站和应用视觉表现力的有力工具。立即下载，为您的数字产品带来生动的动画效果和增强的用户互动。
优质资源，让 .NET 开发更简单，更通用，更流行
05-23
.net——优质资源，让 .NET 开发更简单，更通用，更流行。适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 .net——优质资源，让 .NET 开发更简单，更通用，更流行。适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 .net——优质资源，让 .NET 开发更简单，更通用，更流行。适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。 .net——优质资源，让 .NET 开发更简单，更通用，更流行。适用人群：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计，作为“参考资料”使用。
基于 Go 语言+ Gin 开发的 端博客.zip
05-23
Go语言（也称为Golang）是由Google开发的一种静态强类型、编译型的编程语言。它旨在成为一门简单、高效、安全和并发的编程语言，特别适用于构建高性能的服务器和分布式系统。以下是Go语言的一些主要特点和优势： 简洁性：Go语言的语法简单直观，易于学习和使用。它避免了复杂的语法特性，如继承、重载等，转而采用组合和接口来实现代码的复用和扩展。 高性能：Go语言具有出色的性能，可以媲美C和C++。它使用静态类型系统和编译型语言的优势，能够生成高效的机器码。 并发性：Go语言内置了对并发的支持，通过轻量级的goroutine和channel机制，可以轻松实现并发编程。这使得Go语言在构建高性能的服务器和分布式系统时具有天然的优势。 安全性：Go语言具有强大的类型系统和内存管理机制，能够减少运行时错误和内存泄漏等问题。它还支持编译时检查，可以在编译阶段就发现潜在的问题。 标准库：Go语言的标准库非常丰富，包含了大量的实用功能和工具，如网络编程、文件操作、加密解密等。这使得开发者可以更加专注于业务逻辑的实现，而无需花费太多时间在底层功能的实现上。 跨平台：Go语言支持多种操作系统和平台，包括Windows、Linux、macOS等。它使用统一的构建系统（如Go Modules），可以轻松地跨平台编译和运行代码。 开源和社区支持：Go语言是开源的，具有庞大的社区支持和丰富的资源。开发者可以通过社区获取帮助、分享经验和学习资料。 总之，Go语言是一种简单、高效、安全、并发的编程语言，特别适用于构建高性能的服务器和分布式系统。如果你正在寻找一种易于学习和使用的编程语言，并且需要处理大量的并发请求和数据，那么Go语言可能是一个不错的选择。
###这是一篇描述vector的教程文章
05-23
vector
美国数学建模竞赛资源清单.zip
05-23
美国数学建模竞赛资源清单.zip
移动端开发前端需要注意什么
07-27
- *2* [Web前端开发 移动端开发（快速入门）](https://blog.csdn.net/weixin_46127956/article/details/127800253)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值