eric/gitlab-instance-0a899031_douyinlive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'dd'

Browse Source
This commit is contained in:
hackrobot
2025-04-13 18:41:31 -05:00
parent 33aab2a083
commit 16a77fedc4
78 changed files with 18230 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/pages/book/book.md Normal file
View File

@@ -0,0 +1,45 @@
## Youtube运营笔记
> 媒体是普通人的最好的杠杆
从佛系到认真的运营youtube(油管),也快有1年的时间了
在这里分享一些心得,以及踩过的坑
---
## 为什么youtube值得做?
> 成本低
自媒体是普通人最好的杠杆,只需要1部手机,就可以拍摄vlog,也可以剪辑影片
现在的剪辑软件,不仅在手机端可以方便操作,还结合的ai功能,比如
- 语音翻译/克隆
- 自动生成双语字幕
- 特效/音效
随时随地都可以剪辑+上传
> 赚美金,回报高
同样的视频,在不同的平台上传后,收益汇率不一样
油管结算是美金,换成人民,就有7倍左右的购买力
而如果你居住下三四线城市,或者县城,那么由于生活成本低
每月即使1000$的收益,都可以过的不错了
> 商业模式健康
youtube给创作者的收益,长视频是`55%`,短视频shorts是`45%`
可以说是世界上很慷慨的公司了
仅仅是平台广告,就能够带来巨大的收益
不用去接`业配/商单`,以及自己带货,纯粹的视频不会让人厌恶

3
src/pages/book/index.config.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: 'Youtube运营笔记'
}

125
src/pages/book/index.scss Normal file
View File

@@ -0,0 +1,125 @@
// 在 src/index.scss 中引入 GitHub Markdown 主题
@import "github-markdown-css/github-markdown.css";
// marktext的换行处理
.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre,
.markdown-body details {
margin-bottom: 10px;
}
.markdown-body li>p {
margin-top: 0px;
}
.book_header_div {
width: 100%;
height: 80px;
}
.book_header {
position: fixed;
top: 0px;
width: 100%;
height: 80px;
// background-color: aquamarine;
// background-color: #f0f5ff;
border-bottom: 2px solid #f0f5ff;
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.book_header_left {
width: 100px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #69b1ff;
}
.book_header_middle {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #69b1ff;
}
.book_header_right {
width: 100px;
// background-color: yellow;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
color: #69b1ff;
}
}
.Book {
padding: 40px;
.markdown-body {
font-size: 30px;
// color: #72d572;
}
img {
max-width: 100%;
height: auto;
/* 保持图像的纵横比 */
}
.at-drawer__content {
.at-list {
.at-list__item {
font-size: 30px;
// background-color: aqua;
.at-list__item-container {
.at-list__item-content {
}
}
}
}
}
}
@media (min-width: 1536px) {
.Book {
width: 100%;
// height: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
// background-color: yellow;
.book_left {
width: 400px;
height: 100%;
background-color: red;
}
.markdown-body {
width: 100%;
max-width: 1400px;
font-size: 22px;
// color: red;
// background-color: #72d572;
}
.book_right {
width: 400px;
height: 100%;
background-color: greenyellow;
}
}
}

248
src/pages/book/index.tsx Normal file
View File

@@ -0,0 +1,248 @@
// @ts-nocheck
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState, useRef } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import {
AtForm,
AtMessage,
AtDrawer,
AtIcon,
AtTimeline,
AtDivider,
} from "taro-ui";
import { marked } from "marked";
import infoText from "./info.md";
import bookText from "./book.md";
import youtubeIco from "../../images/youtube.ico";
marked.setOptions({
breaks: true, // 是否回车换行
gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
// pedantic: true, //严格模式
// highlight(code:any, lang:any) {
// // 语法高亮
// let val = code;
// if (lang) {
// val = hljs.highlight(lang, code).value;
// } else {
// val = hljs.highlightAuto(code).value;
// }
// return val;
// },
});
// const renderer = new marked.Renderer();
// // 使用拓展
// marked.use({ renderer });
// export default class Index extends Component {
const Book = () => {
const [book, setbook] = useState(window.localStorage.getItem("book"));
const [markText, setmarkText] = useState(book == 1 ? bookText : infoText);
const [isWeChat, setisWeChat] = useState(false);
const [show, setshow] = useState(false);
const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
const contentRef = useRef(null); // 用于获取渲染后的 DOM
useEffect(() => {
isWeChatFun();
}, []);
useEffect(() => {
if (contentRef.current) {
const h1Elements = contentRef.current.querySelectorAll("h1");
const h2Elements = contentRef.current.querySelectorAll("h2");
const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
const h2Texts = Array.from(h2Elements).map((el) => el.textContent);
setHeaders(h1Texts);
// console.log("获取到的 H1 标题:"); // 控制台查看
console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
}
}, [markText]); // 监听 HTML 内容变化
const handleJump = (text) => {
const h1Elements = contentRef.current.querySelectorAll("h1");
for (let h1 of h1Elements) {
if (h1.textContent.trim() === text.trim()) {
console.log("Current h1 text:", h1.textContent); // 输出每个 h1 的文本
// if (h1.textContent === text) {
h1.scrollIntoView({ behavior: "smooth" });
break;
}
}
};
// const handleClick = (value) => {
// // 跳转到目的页面，在当前页面打开_
// Taro.navigateTo({
// url: "/pages/index/index",
// });
// };
// 是否在微信客户端
const isWeChatFun = () => {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("micromessenger") != -1) {
setisWeChat(true);
return true;
} else {
setisWeChat(false);
return false;
}
};
const payh5 = (type, total_fee = 1000) => {
// console.log("111");
Taro.request({
method: "POST",
url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
// url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
data: {
callback_url: window.location.href,
openid: window.localStorage.getItem("openid"),
total_fee: total_fee, // 金额,单位:分
type: type, //订单类型 book/meetup/video/vip
},
header: {
"content-type": "application/json", // 默认值
},
success: function (res) {
console.log(res.data);
// window.alert(res.data.jsapi);
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
// 以下6个支付参数通过payjs的jsapi接口获取
// appId: "wxc5205a653b0259bf",
// timeStamp: "1701401644",
// nonceStr: "KhOYB0wFV6j9qyQK",
// package: "prepay_id=wx01113404850024729b35f4d69b73500000",
// signType: "MD5",
// paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
...(res?.data?.jsapi ?? {}),
},
function (res) {
// 支付成功
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
WeixinJSBridge.call("closeWindow");
}
}
);
},
});
};
return (
<>
<View className="book_header_div"></View>
<View className="book_header">
<View
className="book_header_left"
onClick={() => {
Taro.redirectTo({
url: `/`,
});
// Taro.navigateBack({
// delta: 1, // 表示返回的页面数，默认是 1，表示返回上一页
// });
}}
>
<AtIcon value="chevron-left"></AtIcon>
</View>
<View className="book_header_middle">{`📗 Youtube运营日记`}</View>
<View
className="book_header_right"
onClick={() => {
setshow(!show);
}}
>
<AtIcon value="bullet-list"></AtIcon>
</View>
</View>
<View className="Book">
<View
ref={contentRef}
className="markdown-body" // 添加 GitHub Markdown 主题类
dangerouslySetInnerHTML={{
__html: marked(markText),
// __html: marked(book == 1 ? bookText : infoText),
}}
></View>
{/* 目录 */}
<AtDrawer
className="book_AtDrawer"
show={show}
mask
items={headers}
onItemClick={(index) => {
handleJump(headers[index]);
}}
onClose={() => {
setshow(false);
}}
>
<View className="drawer-item"></View>
{/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
{/* <View className="drawer-item">
这是自定义内容 <AtIcon value="home" size="20" />
</View> */}
</AtDrawer>
{/* 分割线 */}
<AtDivider>
<AtIcon value="check-circle"></AtIcon>
<span> 更新日志</span>
<AtIcon value="check-circle"></AtIcon>
</AtDivider>
{/* 更新日志 */}
<View className="log">
<AtTimeline
pending
items={[
{
title: "新建电子书",
content: ["2025年4月4日"],
icon: "check-circle",
},
{
title: "目录大纲",
content: ["2025年4月5日"],
icon: "clock",
},
{
title: "核心内容",
content: ["2025年4月6日"],
icon: "clock",
},
{
title: "新增日志log",
content: ["2025年4月7日"],
icon: "clock",
},
]}
></AtTimeline>
</View>
</View>
</>
);
};
export default Book;

625
src/pages/book/info.md Normal file
View File

@@ -0,0 +1,625 @@
# 前言
> 本文是在线电子书,不定时更新
你看到的`电子书`,一个在线的网页
内容会根据作者的经历和心得,不定时更新
当然,如果你也可以关注公众号:
`Eric的云游日记`
加群交流
一个人走得开,一群人走的远
<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/ytGpt.png?imageSlim" alt="ytGpt.png" width="304">
> 声明:
本人不会针对Youtube内容进行收费
也不进行账号买卖
文中内容`仅供参考`
---
> nomadyt.com
[nomadyt.com](https://nomadyt.com) 是`nomad`+`yt`的缩写组合,意思是以油管为收益的数字游民
油管适合做为`副业`尝试
申请ypp通过后,就可以设置视频播放广告,产生美金收益
# 为什么选择Youtube?
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wdqwffdhrher.png?imageSlim" title="" alt="wdqwffdhrher.png" width="359">
## Youtube运营笔记
> 媒体是普通人的最好的杠杆
从佛系到认真的运营youtube(油管),也快有1年的时间了
在这里分享一些心得,以及踩过的坑
> 成本低
自媒体是普通人最好的杠杆,只需要1部手机,就可以拍摄vlog,也可以剪辑影片
现在的剪辑软件,不仅在手机端可以方便操作,还结合的ai功能,比如
- 语音翻译/克隆
- 自动生成双语字幕
- 特效/音效
随时随地都可以剪辑+上传
> 赚美金,回报高
同样的视频,在不同的平台上传后,收益汇率不一样
油管结算是美金,换成人民,就有7倍左右的购买力
而如果你居住下三四线城市,或者县城,那么由于生活成本低
每月即使1000$的收益,都可以过的不错了
> 商业模式健康
youtube给创作者的收益,长视频是`55%`,短视频shorts是`45%`
可以说是世界上很慷慨的公司了
仅仅是平台广告,就能够带来巨大的收益
不用去接`业配/商单`,以及自己带货,纯粹的视频不会让人厌恶
---
# 开通YPP(合作伙伴计划)
> 1000粉丝和4000小时观看时长
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fwegwegwgw.png?imageSlim" title="" alt="fwegwegwgw.png" width="361">
开通ypp的`基础`门槛是:1000个粉丝和4000小时观看时长
之所以说是基础,是因为最后还要被`审核`
如果人工审核不通过,那么一切努力都是徒劳
> ypp是youtube官方的`合作伙伴计划`
开通之后,无论是直播/短视频shorts还是长视频,都可以自动或者手动投放广告
从而赚取收益
> 快速开通的方式
- 1.直接买号
- 2.刷粉刷量
- 3.制造爆款视频
- 4.直播引流,计算时长
youtube买号的方式,是最快的,极限情况
- 3天左右,就可以上传视频
- 7天就可以完全迁移管理员
这已经是最快的速度了,毕竟ip更换和`品牌频道`交易的规则就是这样
> 在哪里买号?
![2025-04-02-04-41-03-Buy YouTube Channel - YouTube Channels for Sale _ EazyViral.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-04-41-03-Buy%20YouTube%20Channel%20-%20YouTube%20Channels%20for%20Sale%20_%20EazyViral.png?imageSlim)
一个youtube账号的正常报价在2k-3k左右,具体看交易平台,以及托管人出价
在这里本人不做推荐,因为有被骗过
海外网站无序备案,大多是利用wordpress建站+信用卡收款,你根本不知道背后运营的人是谁
而且即便是有信誉的交易
无一例外,都会提醒你:如果交易账号,导致`ypp被收回`,购买者自行承担风险
想想你花了2-3k人民币,结果最后买了一个最终时区没有获利资格的账号
> 刷粉刷量
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-04-41-56-Services%20%26%20Pricing.png?imageSlim" title="" alt="2025-04-02-04-41-56-Services & Pricing.png" width="425">
如果你不想买卖账号,也可以选择刷量的方式,而这个成本,其实也在2k左右
平台会利用第三方国家,提供的`电子农场`,给账号点击关注,和播放,积累粉丝和观看时长
但是一般该国家都是极度落后,且货币价值低
youtube官方,算法会检测到刷量行为,不仅会有清空,还有封号的风险
即便是没有处理,粉丝的质量,也决定的账号的权重,youtube限流,0播放,ypp的rpm单价极低
所以结论是,刷量和买卖账号一样,风险很大,代价很大
唯一的好处,就是快,刷量7天,待数据同步更新要7天,审核1-3天,半个月就能起号
就看你能不能抗住试错成本
> 爆款视频
<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwqwfwqfqw.jpg?imageSlim" alt="qwqwfwqfqw.jpg" width="430">
如果某个视频,击中了youtube官方的爆款算法,那么就会像病毒一样
凭借1视频,快速涨粉,积累播放时长
爆款除了当前的热点事件,也有长期的流量词
一个新人,本身就在摸索运营,所以做好,是要赌概率的
很多都是3-6个月,才勉强达到开通ypp的资格
也以为者,之前没有开通ypp的流量,都是无法变现
> 直播引流
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/asfegdvsdvf.jpg?imageSlim" title="" alt="asfegdvsdvf.jpg" width="436">
这个是我比较推荐的1个,因为`直播权重高`
所以可以快速积累观看时长
注意,我说的直播,并不是依赖`ffmpeg`或者`OBS`的推流直播
而是手机+实时摄像头
只有真实的场景和互动,youtube的推荐就会极高
# 网络与环境
## 出海赚美金,ip不行,都是白塔
> 普通ip
科学上网,如果只是为了增长眼界,可以使用`搬瓦工`推出的[just m socks](https://justmysocks.net/members/aff.php?aff=12475)
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-04-44-38-Shopping%20Cart%20-%20Just%20My%20Socks.png?imageSlim" title="" alt="2025-04-02-04-44-38-Shopping Cart - Just My Socks.png" width="492">
但`机场`的坏处就是,ip并不是纯净,也不是独享的
会有很多人共用,一旦你经营社交媒体,就会被限流,甚至封号
那么just m socks值不值的购买呢?-值得,在`速度快,稳定`的前提下,它可以作为`前置代理`
后续会讲讲`前置代理+落地代理`
> 独立ip
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwfqwfqwfqw.jpg?imageSlim" title="" alt="qwfqwfqwfqw.jpg" width="349">
但如果是为了`收益`,做自媒体,最基本要使用`独立ip`
独立的意思,就是独享,不与他人共同使用
最简单的方案,就是购买vps服务器,比如
- [vultr](https://www.vultr.com/?ref=8985003)
- [搬瓦工-bandwagonhost](https://bandwagonhost.com/aff.php?aff=25463)
前者支持`支付宝`,且按分钟计算,可随时停用
后者针对国内线路做优化,速度快,稳定
具体的方式就是,开通vps服务器后,使用`xx`一键脚本,安装代理服务
可自行谷歌,不在此推荐
> 静态住宅ip
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-04-47-17-Proxy-Cheap_%20Affordable%20Services%20_%20Buy%20Cheap%20Proxies.png?imageSlim" title="" alt="2025-04-02-04-47-17-Proxy-Cheap_ Affordable Services _ Buy Cheap Proxies.png" width="384">
无论是youtube还是tiktok,社交媒体,都会检查ip
一旦发现是机房ip,而不是住宅ip,就会降权
所以出海赚赚美金的第一步,就是`静态住宅ip`
这里推荐 [proxy-cehap](https://app.proxy-cheap.com/r/bmcMoY),只需要3$/m,就可以拥有可靠的ip地址
但它只提供`http`和socks`2种基本协议
如果直接使用,是没有办法正常科学的上网的,必须使用`链式代理`
也就是把之前提到[just m socks](https://www.vultr.com/?ref=8985003)自部署的代理,作为前置节点
而它作为落地节点
`链式代理`,是成本最低的方案,后续会展开如何操作
> 住宅ip-vps服务器
<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wqfqwfqwfwqf.png?imageSlim" alt="wqfqwfqwfwqf.png" width="301">
前面提到了`机场`/`独立ip`/`静态住宅ip`
那么能不能让vps服务器的ip本身就是静态住宅ip呢?
有,但是相比之前的方案,会贵一些,需25$-30$最低
但是能就解决非常核心的应用场景
- 直播推流
- 协议提速
毕竟链式代理,经过中转之后,有2层,会慢太多
## 链式代理如何操作?
> 软件方案
安卓或者电脑,都可以使用支持singbox的客户端,比如
- [nekobox](https://github.com/MatsuriDayo/NekoBoxForAndroid)
新建2个分组, 在其中的分支,设置landProxy(落地节点),即可
> 硬件方案
买一个支持openwrt的开发板,比如nanopi
然后刷固件,包含`passwall2`
使用xray进行节点分流即可,也是设置`落地节点`
---
# 硬件设备与剪辑软件
## 4k高清
> 使用`剪映`进行剪辑
在商业软件中,剪映,已对普通创者者做了优化
不用像专业的剪辑师一样,了解adobe的各种理念和操作
<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-04-22-07-%E5%89%AA%E6%98%A0%E5%AE%98%E7%BD%91-%E5%85%A8%E8%83%BD%E6%98%93%E7%94%A8%E7%9A%84%E6%A1%8C%E9%9D%A2%E7%AB%AF%E5%89%AA%E8%BE%91%E8%BD%AF%E4%BB%B6-%E8%BD%BB%E8%80%8C%E6%98%93%E5%89%AA%20%E4%B8%8A%E6%BC%94%E5%A4%A7%E5%B9%95.png?imageSlim" alt="2025-04-02-04-22-07-剪映官网-全能易用的桌面端剪辑软件-轻而易剪 上演大幕.png" width="389">
运营youtube的细节是
- 输出成4K高清,AI 补帧
- 生成srt字幕 (支持双语)
当然,开源免费的剪辑软件也有[shotcut](https://github.com/mltframework/shotcut)
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-04-26-38-mltframework_shotcut_%20cross-platform%20(Qt)%2C%20open-source%20(GPLv3)%20video%20editor.png?imageSlim" title="" alt="2025-04-02-04-26-38-mltframework_shotcut_ cross-platform (Qt), open-source (GPLv3) video editor.png" width="406">
---
## 游戏笔记本
> 使用`显卡`渲染
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wddwfwegewg.jpg?imageSlim" title="" alt="wddwfwegewg.jpg" width="400">
建议入手一个`游戏笔记本`,其最低可以包含
- 8GB显卡
- 1TB固态硬盘
- 2k高清显示屏
这对剪辑视频来说,可以大大节省时间,也避免了硬盘空间的不足的情况
当然,从性价比来说,品牌肯定不是适合电竞的`外星人`,而是`机械革命`之类
> 配件:`视频采集卡`
如果不是拍摄,而是录制屏幕,制作教程类
可以准备1个视频采集卡,最好有hdml`环出`功能
这样可以在硬件间进行录制,而不影响主屏幕
---
# Adsense账号与PIN实体信件
adsense是googel的收益账户,与gmail,youtube等谷歌旗下应用是独立的
所以开通adsense后,再手动与频道进行绑定
<img title="" src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-06-11-18-Home%20%E2%80%93%20Google%20AdSense.png?imageSlim" alt="2025-04-02-06-11-18-Home – Google AdSense.png" width="462">
其中adsense又分为`site`和`youtube`
查看收益数据的时候.点击`adsense for youube`进入后台
一般油管会在每月6号左右,完成上个月数据统计
打款会在月末
最低打款金额是100$,大多数人,可能没那么快达到
## PIN码接收
> 验证真实地址
谷歌会要求输入PIN code,也就是6位数验证码
才会正式开通adsense收款
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afdafvqqw.jpg?imageSlim" title="" alt="afdafvqqw.jpg" width="385">
在经营youtube频道的时候,你可以给频道设置国家`美国`,它与adsense没有关系
如果在中国国内
可以填写真实的住址,但是谨记:一定在末尾添加`(+86手机号)`
不然邮政的快递员没有办法联系上你,就会退回
当然如果忘记了,也可以联系所在城市的邮政客服,确认是否国际信件
收到PIN码的时候,与所在国家位置相关,国内半个月也能收到
---
# 收款与结汇
> 招商银行储蓄卡
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-10-37-45-fqwwqfqwfqw.jpg.png?imageSlim" title="" alt="2025-04-02-10-37-45-fqwwqfqwfqw.jpg.png" width="280">
做出海业务,大家其实很关心怎么收款
而youtube的adsense是可以`直接打款`到招商银行卡的外汇
如果需要转换成人民币,在招商app里进行`结汇`就可以了
那么,其他银行卡可以吗?,答案是`可以`
但是建议用招商,毕竟`商业银行`里,它的服务态度和开放性是比较好的
> wise
![qfqwwqfqfq.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qfqwwqfqfq.png?imageSlim)
如果你有`护照`,那么就可以注册[wise]()账号
它会给你开通多个国家的银行账号,就算个户,而是公户,也可以解决外汇收款
但除了护照,还有1个难点是`入金激活`
这个可以自行谷歌相关的教程,一旦激活成功,收款就多一个选择
## 税务证明
如果收款数额较大,银行也会要求出具相关的税务证明
这个也可以在网上搜索相关详细的教程
值得注意的是,adsense打款前,要把美国/新加坡的税务资料进行填写
不然会按最大扣税率进行打款,少了30%的收益,可就很难受喽
---
# 24小时无人直播
> 使用ffmpeg推流
![qfqwfqwf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qfqwfqwf.jpg?imageSlim)
油管有3种视频形式
- 直播live
- 长视频video
- 短视频shorts
直播live,就可以借助ffmpeg进行24小时推流直播,只要准备一段素材循环播放就好了
比如有的频道是`助眠`,有的是`知识科普`
之前在`网络`一章提到过使用vps服务器-[vultr](https://www.vultr.com/?ref=8985003)搭建独立ip
如果仅仅是代理,科学的上网,云端的服务器闲置有些浪费
只需要一行代码,就可以24小时直播
```
ffmpeg -re -stream_loop -1 -i xx.mp4 \
-c:v libx264 -preset veryfast -b:v 4500k -maxrate 4500k -bufsize 9000k \
-c:a aac -b:a 128k -ar 44100 -ac 2 \
-f flv "rtmp://a.rtmp.youtube.com/live2/YOUR_STREAM_KEY"
```
> OBS推流直播
![wqwqfqwfqf.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/wqwqfqwfqf.jpg?imageSlim)
同ffmpeg一样,obs也是开源免费,但区别在于它是客户端
需要在图形操作系统使用,比如windows,mac os
由于是GUI界面,只需要再设置里,输入youtube的推流url和密钥
就可以无限直播了
> 安卓开发板
![qwwqfqwfqw.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwwqfqwfqw.jpg?imageSlim)
前端提到了ffmpeg和obs,它们适合在PC直播-长视频
那如果直播形式,类似tiktok或者抖音的9:16比例呢?
那么安卓开发板,没有 电池,就不用担心发热爆炸事故
也可以利用xposed的camera模块,替换uvc摄像头的实时视频流
手机短视频直播,油管的`权重更高`
记住,直播的收益不高,但是它的观看时长是记入统计的,可以累积申请ypp合作后半计划
---
# 扩展获利方案
> wordpress建站,接入`adsense广告`
![qwqwfqwfqfw.jpg](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/qwqwfqwfqfw.jpg?imageSlim)
在前面的`开通ypp`一章,已经强调过adsense其实区分了网站和youtube
利用开源的`wordpress建站`,就可以轻松接入谷歌广告
只需要后台安装google插件即可,自动关联,审核
> 宝塔面板
前面针对vps服务器 [vultr](https://www.vultr.com/?ref=8985003) 的使用,提到以下方式
- 独立ip,科学代理脚本
- 24小时ffmpeg命令,推流直播
那么安装`宝塔面板`之后,就可以立马安装`wordpress程序`
- 新建一个wordpress网站
当用户观看视频后,也会查看`简介`里的网址
这样除了视频广告,网站的广告也可以增加一份收益
> 知识产品: 电子书/视频教程
![afqwfqwfqw.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/afqwfqwfqw.png?imageSlim)
如果你自身的专业领域,有知识底蕴
那么可以总结后,发布到`kindle`或者`udmey`
以电子书和视频教程的形式,教授学习
> sass网站或者ios app
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/fqeegwegweg.jpg?imageSlim" title="" alt="fqeegwegweg.jpg" width="365">
由于AI的普及,编程已经不是程序员的专利
小白也可以借助`vscode`或`cursor`等编辑器,借助内置AI插件,开发产品
比如我就在尝试模仿`nomadlist` (数字游民),进行web开发
域名是 [nomadcna.com](https://nomadcna.com/)
如果有兴趣,可以去搜索创始人的故事,非常有启发性
---
# 展望和结束语
> 为什么我要写这本小书?
![asfqwfqwfqwfq.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/asfqwfqwfqwfq.png?imageSlim)
如果你去电商或者实体书店,寻找youtube运营的书籍,几乎没有
大多都是tiktok电商/直播带货相关的
而互联网的在线资料,也大多是寥寥无几的博客,中文更是匮乏
在此分享一些经历,供大家参考,避免踩坑
> 不会完结,持续更新
这是初版的目录
<img src="https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-18-39-Youtube%E8%BF%90%E8%90%A5%E7%AC%94%E8%AE%B0.png?imageSlim" title="" alt="2025-04-02-11-18-39-Youtube运营笔记.png" width="232">
后续我会更新内容,比如:
- 如何选题,制作封面?
- 好用的chrome插件
- 搬运/二创/与AIGC
- 等等
内容都是纯手写编辑,没有借助AI,当然也是随性分享
暂时没有做整理
后续会根据读者的反馈,进行梳理,拓展
## 数字游民
youtube运营,作为`副业`,在下班后尝试,也一个很有性价比的选择
一部手机就以足够进行实验
如果你也想成为一个`数字游民`,从自媒体入手,低成本,收益高
我个人也不段尝试成为一个数字游民
目前小册正在编写中, 网址: [nomadro.com](https://nomadro.com/)
![2025-04-02-11-29-20-数字游民.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-04-02-11-29-20-%E6%95%B0%E5%AD%97%E6%B8%B8%E6%B0%91.png?imageSlim)
有兴趣的可以去阅读

3
src/pages/group/index.config.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '加入微信群'
}

13
src/pages/group/index.scss Normal file
View File

@@ -0,0 +1,13 @@
.group{
padding: 40px;
.formCode{
display: flex;
flex-direction: row;
.codeBtn{
background-color: aquamarine;
// height: 80px;
// color: red;
}
}
}

130
src/pages/group/index.tsx Normal file
View File

@@ -0,0 +1,130 @@
// @ts-nocheck
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
// export default class Index extends Component {
const Group = () => {
const [current, setcurrent] = useState(2);
const [wxid, setwxid] = useState(null);
const [phoneNum, setphoneNum] = useState(null);
const [vCode, setvCode] = useState(null);
const [waitTime, setWaitTime] = useState(0); // 等待秒数
const [isButtonDisabled, setIsButtonDisabled] = useState(false); // 按钮是否禁用
useEffect(() => {}, []);
const handleClick = (value) => {
// 跳转到目的页面，在当前页面打开
Taro.navigateTo({
url: "/pages/index/index",
});
};
const startTimer = () => {
setIsButtonDisabled(true);
let localWaitTime = 60; // 使用局部变量
// 更新状态的函数
const updateTime = () => {
if (localWaitTime <= 0) {
clearInterval(timer);
setIsButtonDisabled(false);
setWaitTime(0);
} else {
setWaitTime(localWaitTime);
localWaitTime -= 1;
}
};
// 设定计时器
const timer = setInterval(updateTime, 1000);
// 初始调用
updateTime();
};
const validatePhoneNumber=(phoneNum) =>{
// 检查是否为11位数字
const phoneRegex = /^[0-9]{11}$/;
return phoneRegex.test(phoneNum);
}
return (
<View className="group">
<AtForm
onSubmit={(event) => {
console.log("onSubmit-event--", event[0]?.detail?.value);
}}
onReset={(event) => {
// 重置数据
}}
>
<AtInput
name="phoneNum"
border={false}
title="手机号"
type="phone"
placeholder="请输入"
value={phoneNum}
disabled={isButtonDisabled}
onChange={(value) => {
console.log("value", value);
setphoneNum(value);
}}
/>
<View className="formCode">
<AtInput
name="vCode"
title="验证码"
type="number"
placeholder="请输入4位数字"
value={vCode}
onChange={(value) => {
setvCode(value);
}}
/>
<AtButton
className="codeBtn"
onClick={() => {
if (!!phoneNum & !!validatePhoneNumber(phoneNum)) {
// 提交手机数据
setIsButtonDisabled(true);
startTimer(); // 开始防抖计时
} else {
Taro.atMessage({
message: "请检查手机号",
type: `warning`,
});
}
}}
// type="primary"
disabled={isButtonDisabled}
>
{isButtonDisabled ? `${waitTime} 秒` : "获取"}
</AtButton>
</View>
<AtButton formType="submit" type="primary">
{"提交"}
</AtButton>
</AtForm>
<AtMessage />
</View>
);
};
export default Group;

3
src/pages/index/index.config.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: 'Youtube运营笔记'
}

508
src/pages/index/index.jsx Normal file
View File

@@ -0,0 +1,508 @@
import { Component } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import { AtButton } from "taro-ui";
import { AtSearchBar } from "taro-ui";
import { Picker } from "@tarojs/components";
import { AtList, AtListItem, AtNavBar, AtTag, AtMessage } from "taro-ui";
import {
AtModal,
AtModalHeader,
AtModalContent,
AtModalAction,
AtAvatar,
AtAccordion,
} from "taro-ui";
import { AtToast } from "taro-ui";
import { AtIcon } from "taro-ui";
import { VIEW } from "@tarojs/runtime";
import "animate.css";
import touxiang from "../../images/touxiang.png";
import cat from "../../images/cat.jpg";
import girl from "../../images/girl.jpg";
import emoji from "../../images/emoji.png";
import phone from "../../images/phone.png";
import robot from "../../images/robot.png";
import nomad from "../../images/nomad.png";
// import book from "../../images/book.png";
import qrcode from "../../images/qrcode.png";
import meetup from "../../images/meetup.jpg";
import bookqr from "../../images/bookqr.jpg";
import loft from "../../images/loft.png";
import AIGC from "../../images/AIGC.png";
import robot192 from "../../images/robot192.png";
import youtubesvg from "../../images/youtube.svg";
import youtube2 from "../../images/yt2.svg";
import youtube3 from "../../images/yt3.svg";
import youtube4 from "../../images/yt4.svg";
import ytGpt from "../../images/ytGpt.png";
import demo from "../../images/demo.svg";
import group from "../../images/group.svg";
import book from "../../images/book.svg";
import youtubeIco from "../../images/youtube.ico";
import youtube from "../../images/youtube.png";
import youtube192 from "../../images/youtube192.png";
// export default class Index extends Component {
const Index = () => {
const [current, setcurrent] = useState(0);
const [openId, setopenId] = useState(null);
const [wxid, setwxid] = useState(null);
const [userInfo, setuserInfo] = useState({});
const [open, setopen] = useState(false);
const [referer, setreferer] = useState(window.document.referrer);
const [isOpened, setisOpened] = useState(false);
const [meetupQR, setmeetupQR] = useState(false);
const [bookToast, setbookToast] = useState(false);
const [meetupToast, setmeetupToast] = useState(false);
const [joinMeetup, setjoinMeetup] = useState(false);
const [bookpay, setbookpay] = useState(0);
const [isWeChat, setisWeChat] = useState(false);
const getOpenidFromUrl = (url) => {
const pattern = /[?&]openid=([^&#]+)/;
const match = url.match(pattern);
if (match) {
return match[1];
}
return null;
};
// 是否在微信客户端
const isWeChatFun = () => {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("micromessenger") != -1) {
setisWeChat(true);
return true;
} else {
setisWeChat(false);
return false;
}
};
// pwa安装弹窗
// useEffect(() => {
// window.addEventListener("beforeinstallprompt", (event) => {
// event.preventDefault();
// let installPrompt = event;
// // 显示安装按钮
// document.getElementById("install-btn").addEventListener("click", () => {
// installPrompt.prompt();
// });
// });
// }, []);
// 获取openid
const getOpenid = () => {
// let newparams = Taro.getCurrentInstance().router.params;
// let urlopenid = newparams.openid;
// hash模式
// http://192.168.31.245:10086/?openid=o7LFAwR32hWGq9XOpd7ZxK1wZxq8#/pages/index/index
let hashopenid = null;
if (window.location.href.includes("openid")) {
hashopenid = getOpenidFromUrl(window.location.href);
} else {
// hashopenid = window.localStorage.getItem("openid");
}
if (!!hashopenid && hashopenid != "undefined" && hashopenid != "null") {
// 获取到openid
window.localStorage.setItem("openid", hashopenid);
setopenId(hashopenid);
// window.alert(hashopenid);
// 查询数据库是否存在openid
Taro.request({
method: "GET",
url: `${process.env.TARO_API_API}/user/${hashopenid}`, //仅为示例，并非真实的接口地址
// url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
success: function (res) {
if (res?.data?.userInfo) {
// 有完整的用户信息userInfo
setuserInfo(res?.data?.userInfo);
window.localStorage.setItem("userInfo", userInfo);
}
},
complete: function (finy) {
// 获取wxid参数
getWxidFromUrl();
},
});
} else {
let nowUrl = window.location.href;
window.localStorage.removeItem("openid");
let payUrl = `https://payjs.cn/api/openid?mchid=1561724891&callback_url=${nowUrl}`;
window.location.href = payUrl;
}
};
// 获取更新用户信息
const getUserinfo = (wxid) => {
Taro.request({
method: "GET",
url: `${process.env.TARO_API_API}/user/${wxid}`, //仅为示例，并非真实的接口地址
// url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
success: function (res) {
if (res?.data?.userInfo) {
//判断wxid是否存在
if (res?.data?.userInfo?.openid) {
// 有完整的用户信息userInfo
setuserInfo(res?.data?.userInfo);
window.localStorage.setItem("userInfo", userInfo);
}
}
},
complete: function (finy) {},
});
};
// 获取url中的wxid
const getWxidFromUrl = () => {
const urlParams = new URLSearchParams(window.location.search);
const urlwxid = urlParams.get("wxid");
if (!!urlwxid) {
setwxid(urlwxid);
window.localStorage.setItem("wxid", wxid);
// 优先查询openid是否存在数据库
Taro.request({
method: "GET",
url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
// url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
success: function (res) {
if (res?.data?.userInfo) {
//判断wxid是否存在
if (res?.data?.userInfo?.openid) {
// window.alert(res?.data?.userInfo?.openid);
// window.alert(window.localStorage.getItem("openid"));
if (
res?.data?.userInfo?.openid !==
window.localStorage.getItem("openid")
) {
// 删除其他用户的wxid
window.localStorage.removeItem("userInfo");
window.localStorage.removeItem("openid");
window.localStorage.removeItem("wxid");
window.location.href = "http://nomad.hackrobot.cn";
} else {
// 有完整的用户信息userInfo
setuserInfo(res?.data?.userInfo);
window.localStorage.setItem("userInfo", userInfo);
}
} else {
// 绑定wxid与openid到数据库
wxidTapopenid(urlwxid);
}
} else {
// 新增wxid用户
}
},
complete: function (finy) {
// tg消息通知
tgMessage();
},
});
} else {
// tg消息通知
tgMessage();
}
return wxid;
};
// 绑定wxid与openid
const wxidTapopenid = (newWxid) => {
const userUpdateData = {
openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
};
Taro.request({
method: "PUT",
// url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
url: `${process.env.TARO_API_API}/user/${newWxid}`, //仅为示例，并非真实的接口地址
data: userUpdateData,
header: {
"Content-Type": "application/json",
},
success: function (res) {},
fail: function (err) {},
complete: function (finy) {},
});
};
// 新增openid用户
const addopenidUser = () => {
const userUpdateData = {
openid: window.localStorage.getItem("openid"), // 只更新 openid 字段
};
Taro.request({
method: "GET",
// url: `${process.env.TARO_API_API}/user/${urlwxid}`, //仅为示例，并非真实的接口地址
url: `${process.env.TARO_API_API}/user/${window.localStorage.getItem(
"openid"
)}`, //仅为示例，并非真实的接口地址
data: userUpdateData,
header: {
"Content-Type": "application/json",
},
success: function (res) {},
fail: function (err) {},
complete: function (finy) {},
});
};
// 网页查看通知
const tgMessage = () => {
Taro.request({
method: "GET",
url: `${
process.env.TARO_API_API
}/tgMessage?openid=${window.localStorage.getItem("openid")}`, //仅为示例，并非真实的接口地址
// url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
success: function (res) {
// console.log("访问提醒发送成功");
},
});
};
const sendNtfy = () => {
// fetch("https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1", {
// method: "POST", // PUT works too
// body: "Backup successful 😀",
// });
Taro.request({
method: "POST",
url: `${`https://ntfy.nomadcna.com/awE5vPZI1LoRvsN1`}`,
success: function (res) {
console.log("访问提醒发送成功");
},
});
};
useEffect(() => {
let inwechat = isWeChatFun();
if (inwechat) {
// 获取openId
getOpenid();
} else {
// window.alert('不在微信')
}
}, []);
useEffect(() => {
// alert(window.localStorage.getItem("bookpay"))
setbookpay(window.localStorage.getItem("bookpay"));
}, []);
const goBack = () => {
Taro.navigateBack({});
};
const handleClick = (value) => {
// window.alert(value)
setopen(value);
};
const payh5 = (type, total_fee = 1000) => {
// console.log("111");
Taro.request({
method: "POST",
url: `${process.env.TARO_API_API}/payh5`,
// url: "${process.env.TARO_API_API}/payh5",
// url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
data: {
callback_url: window.location.href,
openid: window.localStorage.getItem("openid"),
total_fee: total_fee, // 金额,单位:分
type: type, //订单类型 book/meetup/video/vip
},
header: {
"content-type": "application/json", // 默认值
},
success: function (res) {
console.log(res.data);
// window.alert(res.data.jsapi);
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
// 以下6个支付参数通过payjs的jsapi接口获取
// appId: "wxc5205a653b0259bf",
// timeStamp: "1701401644",
// nonceStr: "KhOYB0wFV6j9qyQK",
// package: "prepay_id=wx01113404850024729b35f4d69b73500000",
// signType: "MD5",
// paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
...(res?.data?.jsapi ?? {}),
},
function (res) {
// 支付成功
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
WeixinJSBridge.call("closeWindow");
}
}
);
},
});
};
const goRead = () => {
Taro.navigateTo({
url: "/pages/book/index",
});
};
return (
<>
<View className="index">
{/* 在线图书 */}
{/* 参考资料https://readmake.com/ */}
<View className="index_book animate__animated animate__pulse">
<View className="index_book_left">
<View className="left_title">《Youtube运营笔记》</View>
<View className="left_text">数字游民-手册1</View>
{/* 卡片 */}
<View className="card">
<View className="cardItem">
<View className="cardItem_left">
<Image
className="cardItem_left_img youtubeSvg"
src={youtubesvg}
></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">出海赚美金</View>
<View className="cardItem_rightDown">
开通YPP合作伙伴计划
</View>
</View>
</View>
<View className="cardItem">
<View className="cardItem_left">
<Image className="cardItem_left_img" src={book}></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">持续更新</View>
<View className="cardItem_rightDown">在线电子书-免费</View>
</View>
</View>
<View className="cardItem">
<View className="cardItem_left">
<Image className="cardItem_left_img" src={group}></Image>
</View>
<View className="cardItem_right">
<View className="cardItem_rightUp">群聊交流</View>
<View className="cardItem_rightDown">
一个人走得快,一群人走的远
</View>
</View>
</View>
{/* <View className="cardItem">
<View className="left_mobile">
<Text>🚀 油管踩坑笔记</Text>
<Text>1️⃣ YPP: 如何加入合作伙伴计划</Text>
<Text>2️⃣ 基础:系统环境与静态住宅ip</Text>
<Text>3️⃣ 收款:PIN码验证与外汇结算</Text>
<Text>4️⃣ AI:辅助剪辑/生成视频</Text>
<Text>5️⃣ -----------------</Text>
<Text>🔥 一起实践,交流</Text>
</View>
</View> */}
</View>
<View className="left_btn ">
<AtButton
onClick={() => {
try {
sendNtfy();
} catch (err) {
console.error("Error sending notification:", err);
}
goRead();
}}
className="startRead"
type="primary"
size="small"
circle
>
开始阅读
</AtButton>
</View>
</View>
<View className="index_book_img">
<Image
// style="width: 40%px;height:100%;background: #fff;"
src={ytGpt}
/>
</View>
</View>
{/* <View className="group">
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
<View className="groupItem"></View>
</View> */}
<View className="svgItems">
<View className="svgItem">
{" "}
<View className="bookImg">
<Image
// style="width: 40%px;height:100%;background: #fff;"
// src={book}
src={youtube2}
/>
<View className="bookImg_text">YPP(合作伙伴计划)</View>
</View>
<View className="bookImg">
<Image
// style="width: 40%px;height:100%;background: #fff;"
// src={book}
src={youtube3}
/>
<View className="bookImg_text">💰赚美金</View>
</View>
<View className="bookImg">
<Image
// style="width: 40%px;height:100%;background: #fff;"
// src={book}
src={youtube4}
/>
<View className="bookImg_text">📷自媒体</View>
</View>
</View>
</View>
{/* <View className="footer_div"></View> */}
{/* <View className="footer">
<View>Copyright © 2025 </View>
</View> */}
</View>
</>
);
};
export default Index;

298
src/pages/index/index.scss Normal file
View File

@@ -0,0 +1,298 @@
.index {
// background-color: #002329;
// width: 100vw;
// height: 100vh;
// padding-left: 100px;
// padding-right: 100px;
display: flex;
flex-direction: column;
// align-items: center;
// justify-content: center;
.index_book {
margin-top: 80px;
// width: 100%;
min-height: 300px;
// padding: 20px;
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: space-between;
// background-color: #f0f0f0;
// background-color: #f0f5ff;
// background-color: yellow;
.index_book_left {
width: 600px;
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
// background-color: rgb(208, 255, 0);
.left_title {
font-size: 50px;
font-weight: 700;
color: #69b1ff;
}
.left_text {
font-size: 30px;
}
.card {
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.cardItem {
padding: 20px;
// padding-top: 20px;
width: 500px;
// height: 300px;
margin-bottom: 20px;
display: flex;
flex-direction: row;
background-color: rgb(var(--color-gray-50) / var(--tw-bg-opacity, 1));
// background-color: yellow;
background-color: #f0f5ff;
border-radius: 20px;
// align-items: center;
// justify-content: center;
.cardItem_left {
// width: 100px;
// height: 100%;
// background-color: #69b1ff;
display: flex;
flex-direction: column;
// align-items: center;
// justify-content: center;
margin-right: 40px;
.cardItem_left_img {
width: 80px;
height:80px;
}
.youtubeSvg{
position: relative;
top: -5px;
}
}
.cardItem_right {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: red;
.cardItem_rightUp {
width: 100%;
height: 80px;
// background-color: aquamarine;
display: flex;
flex-direction: row;
font-weight: 700;
font-size: 35px;
// align-items: center;
// justify-content: center;
}
.cardItem_rightDown {
width: 100%;
// height: 200px;
flex: 1;
// background-color: red;
display: flex;
flex-direction: row;
// align-items: center;
// justify-content: center;
font-size: 30px;
flex-wrap:wrap ;
color: #262626;
}
}
.left_mobile {
margin-top: 20px;
// width: 100%;
font-size: 30px;
display: flex;
flex-direction: column;
// background-color: aqua;
// align-items: center;
// justify-content: space-around;
// background-color: yellow;
}
}
}
.left_btn {
margin-top: 40px;
// background-color: aqua;
// display: none;
.startRead {
width: 500px;
}
}
}
.index_book_img {
width: 400px;
height: 400px;
}
}
.group {
padding: 20px;
// width: 400px;
// height: 400px;
background-color: yellow;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.groupItem {
width: 80px;
height: 80px;
background-color: aqua;
border-radius: 50%;
margin-right: -20px;
// left: 10px;
// position: relative;
}
}
.svgItems {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
// background-color: yellow;
margin-top: 20px;
// padding: 20px;
.bookImg {
display: none;
}
}
.index_btn {
// background-color: yellow;
.startRead {
width: 200px;
}
}
}
@media (min-width: 1536px) {
.index {
// padding: 100px;
// height: 100vh;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: aqua;
.index_book {
width: 100%;
max-width: 1400px;
// max-width: 2000px;
// padding: 20px;
display: flex;
flex-direction: row;
align-items: center;
// justify-content: center;
justify-content: space-between;
background-color: #f0f5ff;
border-radius: 20px;
.index_book_left {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
// background-color: yellow;
// background-color: #69b1ff;
.card{
display: none;
}
.left_mobile {
display: none;
}
.left_btn {
display: flex;
.startRead {
// display: flex;
width: 200px;
}
}
}
.index_book_img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: yellow;
}
}
.group {
display: none;
}
.svgItems {
// width: 1400px;
width: 100%;
max-width: 1400px;
margin-top: 80px;
// padding: 0px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
// background-color: #69b1ff;
// background-color: yellow;
// background-color: brown;
.svgItem {
// min-width: 1400px;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
// background-color: #69b1ff;
.bookImg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// background-color: yellow;
.bookImg_text {
margin-top: 20px;
font-size: 30px;
}
}
}
}
.index_btn {
.startRead {
display: none;
}
}
.footer {
// position: absolute;
position: fixed;
bottom: 0px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 60px;
// margin-bottom: 20px;
font-size: 14px;
background-color: yellow;
}
}
}

177
src/pages/meetup/Detail/index.jsx Normal file
View File

@@ -0,0 +1,177 @@
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtButton } from "taro-ui";
// import Taro from "@tarojs/taro";
import { AtList, AtListItem } from "taro-ui";
// export default class Index extends Component {
const Detail = () => {
const [current, setcurrent] = useState(2);
const [id, setid] = useState(null);
const [openid, setopenid] = useState(null);
const [joinMeetup, setjoinMeetup] = useState(false);
useEffect(() => {
let newparams = Taro.getCurrentInstance().router.params;
let newId = newparams.id;
if (newId) {
setid(newId);
}
let newjoinMeetup=window.localStorage.getItem('joinMeetup')
setjoinMeetup(newjoinMeetup)
}, []);
// const handleClick = (value) => {
// console.log("value", value);
// setcurrent(value);
// if (value == 2) {
// // 跳转到目的页面，在当前页面打开
// Taro.navigateTo({
// url: "/pages/my/index",
// });
// } else if (value == 0) {
// Taro.navigateTo({
// url: "/pages/index/index",
// });
// } else {
// Taro.navigateTo({
// url: "/pages/meetup/index",
// });
// }
// };
const onBridgeReady = () => {
WeixinJSBridge.call("hideOptionMenu");
};
useEffect(() => {
let $instance = Taro.getCurrentInstance();
// console.log("11");
console.log($instance.router.params);
// if (typeof WeixinJSBridge == "undefined") {
// if (document.addEventListener) {
// document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
// } else if (document.attachEvent) {
// document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
// document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
// }
// }
}, []);
const joinmeet = () => {
// console.log("111");
Taro.request({
method:'POST',
url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
// url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
data: {
callback_url:window.location.href,
openid:window.localStorage.getItem('openid')
},
header: {
"content-type": "application/json", // 默认值
},
success: function (res) {
console.log(res.data);
// window.alert(res.data.jsapi);
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
// 以下6个支付参数通过payjs的jsapi接口获取
// appId: "wxc5205a653b0259bf",
// timeStamp: "1701401644",
// nonceStr: "KhOYB0wFV6j9qyQK",
// package: "prepay_id=wx01113404850024729b35f4d69b73500000",
// signType: "MD5",
// paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
...res?.data?.jsapi??{},
},
function (res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
setjoinMeetup(true)
window.localStorage.setItem('joinMeetup',true)
WeixinJSBridge.call("closeWindow");
}
}
);
},
});
};
return (
<View className="Detail">
{/* <Text>Hello world!</Text> */}
{/* <AtAvatar image='https://cdn.huodongxing.com/logo/202312/8732019012100/promoteMini.png'></AtAvatar> */}
<View>
<Image
style="width:100%;height: 200px;background: #fff;"
src={
"https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
}
/>
</View>
<AtList>
<AtListItem title="[副业交流] 沙龙茶话会" onClick={() => {}} />
<AtListItem title="日期" extraText="2023/12/06" arrow="" />
<AtListItem title="报名人数" extraText="4/10" arrow="" />
<AtListItem
title="地点"
note="广东省深圳市福田区石厦地铁站C口"
extraText=""
/>
{/* <AtListItem title='禁用状态' disabled extraText='详细信息' /> */}
</AtList>
{/* <AtList>
<AtListItem
title="联系我们"
note=""
arrow="right"
iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
/>
<AtListItem
title="版本日志"
note=""
extraText=""
arrow="right"
iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
/>
</AtList> */}
<View>
<AtButton
className="bottomBtn"
type="primary"
onClick={() => joinmeet()}
disabled={joinMeetup}
>
{!!joinMeetup?'已报名':'立即报名'}
</AtButton>
</View>
{/* <View className="indexTablebar">
<AtTabBar
tabList={[
{ title: "首页", text: "" },
{ title: "活动" },
{ title: "我的" },
]}
onClick={(value) => handleClick(value)}
current={current}
/>
</View> */}
</View>
);
};
export default Detail;

11
src/pages/meetup/Detail/index.scss Normal file
View File

@@ -0,0 +1,11 @@
.Detail{
.bottomBtn{
display: flex;
position: fixed;
bottom: 0px;
width: 100%;
}
}

155
src/pages/meetup/index.jsx Normal file
View File

@@ -0,0 +1,155 @@
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtButton } from "taro-ui";
import { Picker } from "@tarojs/components";
import { AtList, AtListItem } from "taro-ui";
import { AtNavBar } from "taro-ui";
// export default class Index extends Component {
const Meetup = () => {
const [current, setcurrent] = useState(1);
const [joinMeetup, setjoinMeetup] = useState(false);
const [pickData, setpickData] = useState({
selector: ["美国", "中国", "巴西", "日本"],
selectorChecked: "美国",
timeSel: "12:01",
dateSel: "2018-04-22",
});
const handleClick = (value) => {
console.log("value", value);
setcurrent(value);
if (value == 2) {
// 跳转到目的页面，在当前页面打开
Taro.navigateTo({
url: "/pages/my/index",
});
} else if (value == 0) {
Taro.navigateTo({
url: "/pages/index/index",
});
} else {
Taro.navigateTo({
url: "/pages/meetup/index",
});
}
};
const goBack = () => {
// window.history.back();
Taro.navigateBack({
// delta: 2
});
};
useEffect(() => {
let newjoinMeetup = window.localStorage.getItem("joinMeetup");
setjoinMeetup(newjoinMeetup);
// window.localStorage.removeItem("joinMeetup");
// setjoinMeetup(false)
}, []);
return (
<View className="my">
{/* <AtNavBar
// onClickRgIconSt={handleClick}
// onClickRgIconNd={handleClick}
// onClickLeftIcon={goBack}
// leftIconType="chevron-left"
color="#000"
title="活动列表"
// leftText='返回'
// rightFirstIconType='bullet-list'
// rightSecondIconType='user'
/> */}
{/* <Text>Hello world!</Text> */}
{/* <View className="page-section">
<View>
<Picker mode="selector" range={pickData.selector} onChange={() => {}}>
<AtList>
<AtListItem
title="国家地区"
extraText={pickData.selectorChecked}
/>
</AtList>
</Picker>
</View>
<View>
<Picker mode="selector" range={pickData.selector} onChange={() => {}}>
<AtList>
<AtListItem
title="国家地区"
extraText={pickData.selectorChecked}
/>
</AtList>
</Picker>
</View>
</View> */}
<AtCard
note=""
extra=""
title="[副业交流] 沙龙茶话会"
thumb="http://www.logoquan.com/upload/list/20180421/logoquan15259400209.PNG"
>
<View className="meetupCard">
{" "}
<View className="left">
{" "}
<Image
style="width: 150px;height: 100px;background: #fff;"
src={
"https://7084298024874.huodongxing.com/file/ue/20211008/115427740E13BBD5BD7B56940467DC03B4/30435083489707317.jpeg"
}
/>
</View>
<View className="right">
<View className="up">
<span style={{ color: "green" }}>[已报名]</span> 4/10
</View>
<View className="middle">2023/12/06 星期三</View>
<View className="down">
<AtButton
type="primary"
size="small"
className="submitBtn"
disabled={joinMeetup}
onClick={() => {
Taro.navigateTo({
url: "/pages/meetup/Detail/index",
});
}}
>
{!!joinMeetup ? "已报名" : "立即报名"}
</AtButton>
</View>
</View>
</View>
</AtCard>
<View className="indexTablebar">
<AtTabBar
tabList={[
{ title: "首页", text: "" },
{ title: "活动" },
{ title: "我的" },
]}
onClick={(value) => handleClick(value)}
current={current}
/>
</View>
</View>
);
};
export default Meetup;

42
src/pages/meetup/index.scss Normal file
View File

@@ -0,0 +1,42 @@
.my{
margin-top: 20px;
.page-section{
display: flex;
flex-direction: row;
}
.meetupCard {
display: flex;
flex-direction: row;
.right {
// background-color: yellow;
width: 100%;
margin-left: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
.down {
width: 200px;
// background-color: aqua;
position: relative;
bottom: 10px;
right: -120px;
// display: flex;
// flex-direction: column-reverse;
// justify-content:flex-end
// position: relative;
.submitBtn {
// width: 200px;
// position: absolute;
// right: 0px;
}
}
}
}
.indexTablebar {
position: fixed;
bottom: 0;
width: 100%;
}
}

3
src/pages/model/index.config.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '模版页面'
}

4
src/pages/model/index.scss Normal file
View File

@@ -0,0 +1,4 @@
.Model{
padding: 40px;
}

31
src/pages/model/index.tsx Normal file
View File

@@ -0,0 +1,31 @@
// @ts-nocheck
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
// export default class Index extends Component {
const Model = () => {
useEffect(() => {}, []);
const handleClick = (value) => {
// 跳转到目的页面，在当前页面打开
Taro.navigateTo({
url: "/pages/index/index",
});
};
return <View className="Model">模版</View>;
};
export default Model;

92
src/pages/my/index.jsx Normal file
View File

@@ -0,0 +1,92 @@
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import avatar from "../../images/avatar.jpg";
// export default class Index extends Component {
const My = () => {
const [current, setcurrent] = useState(2);
const [wxid, setwxid] = useState(null);
useEffect(()=>{
getWxid()
},[])
const getWxid = () => {
let newWxid = window.localStorage.getItem("wxid");
if (!!newWxid) {
setwxid(newWxid);
}
};
const handleClick = (value) => {
console.log("value", value);
setcurrent(value);
if (value == 2) {
// 跳转到目的页面，在当前页面打开
Taro.navigateTo({
url: "/pages/my/index",
});
} else if (value == 0) {
Taro.navigateTo({
url: "/pages/index/index",
});
} else {
Taro.navigateTo({
url: "/pages/meetup/index",
});
}
};
return (
<View className="my">
{/* <Text>Hello world!</Text> */}
<View className="myAtAvatar">
<AtAvatar className="AtAvatar" image={avatar}></AtAvatar>
<AtTag type="primary" circle>
新注册用户
</AtTag>
</View>
<AtList>
<AtListItem
title="联系我们"
note=""
arrow="right"
iconInfo={{ size: 25, color: "#78A4FA", value: "calendar" }}
/>
<AtListItem
title="版本日志"
note=""
extraText=""
arrow="right"
iconInfo={{ size: 25, color: "#FF4949", value: "bookmark" }}
/>
</AtList>
<View className="indexTablebar">
<AtTabBar
tabList={[
{ title: "首页", text: "" },
{ title: "活动" },
{ title: "我的" },
]}
onClick={(value) => handleClick(value)}
current={current}
/>
</View>
</View>
);
};
export default My;

23
src/pages/my/index.scss Normal file
View File

@@ -0,0 +1,23 @@
.my{
.myAtAvatar{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 300px;
// background-color: #f4ffb8;
// padding-left: 20px;
// padding-right: 20px;
.AtAvatar{
margin-bottom: 10px;
}
}
.indexTablebar {
position: fixed;
bottom: 0;
width: 100%;
}
}

3
src/pages/planet/index.config.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '副业沙龙'
}

23
src/pages/planet/index.scss Normal file
View File

@@ -0,0 +1,23 @@
.Model {
padding: 20px;
.bottomDiv {
width: 100%;
height: 100px;
// background-color: yellow;
}
.joinSalon {
// position: relative;
bottom: 20px;
position: fixed;
width: 700px;
}
.model-emoji {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}

217
src/pages/planet/index.tsx Normal file
View File

@@ -0,0 +1,217 @@
// @ts-nocheck
import { Component } from "react";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
import loft from "../../images/loft.png";
import nomadvloglife from "../../images/nomadvloglife.png";
import {
AtModal,
AtModalHeader,
AtModalContent,
AtModalAction,
AtAvatar,
AtAccordion,
} from "taro-ui";
import qrcode from "../../images/qrcode.png";
import joinGroup from "../../images/joinGroup.png";
// export default class Index extends Component {
const Salon = () => {
const [meetupQR, setmeetupQR] = useState(false);
const [isWeChat, setisWeChat] = useState(false);
const [meetup, setmeetup] = useState(window.localStorage.getItem("meetup"));
useEffect(() => {
isWeChatFun();
}, []);
// const handleClick = (value) => {
// // 跳转到目的页面，在当前页面打开
// Taro.navigateTo({
// url: "/pages/index/index",
// });
// };
// 是否在微信客户端
const isWeChatFun = () => {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("micromessenger") != -1) {
setisWeChat(true);
return true;
} else {
setisWeChat(false);
return false;
}
};
const payh5 = (type, total_fee = 1000) => {
// console.log("111");
Taro.request({
method: "POST",
url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
// url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
data: {
callback_url: window.location.href,
openid: window.localStorage.getItem("openid"),
total_fee: total_fee, // 金额,单位:分
type: type, //订单类型 book/meetup/video/vip
},
header: {
"content-type": "application/json", // 默认值
},
success: function (res) {
console.log(res.data);
// window.alert(res.data.jsapi);
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
// 以下6个支付参数通过payjs的jsapi接口获取
// appId: "wxc5205a653b0259bf",
// timeStamp: "1701401644",
// nonceStr: "KhOYB0wFV6j9qyQK",
// package: "prepay_id=wx01113404850024729b35f4d69b73500000",
// signType: "MD5",
// paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
...(res?.data?.jsapi ?? {}),
},
function (res) {
// 支付成功
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
WeixinJSBridge.call("closeWindow");
}
}
);
},
});
};
return (
<View className="Model">
<View className="meetup-left">
<Image style="width: 100%;height: 100px;background: #fff;" src={loft} />
</View>
<View className="at-article">
<View className="at-article__h1">技术交流群</View>
<View className="at-article__info">
{/* 2017-05-07&nbsp;&nbsp;&nbsp; */}
异度星球
</View>
<View className="at-article__content">
<View className="at-article__section">
<View className="at-article__h2">群简介</View>
<View className="at-article__h3">| 📣技术爱好者</View>
<View className="at-article__p">
微信群是一个交流技术的平台,不限软件/硬件
</View>
<br />
<View className="at-article__h3">| 📋入群须知</View>
<View className="at-article__p">
微信群只是一个沟通平台,与其他伙伴搭桥
<br />
可以讨论但不限于:
<br />
1️⃣云手机
<br />
2️⃣机器人
<br />
3️⃣AIGC /边缘计算
</View>
<br />
<View className="at-article__h3">| ❌禁止以下行为</View>
<View className="at-article__p">
🚫营销推广
<br />
🚫恶意捣乱
<br />
<br />
❗群主没有解答义务,勿随意@
{/* <br />
💰价格29元/人 (场地成本) */}
</View>
<br />
{meetup == 1 ? (
<View className="at-article__h3">| ☕入群口令:3399</View>
) : null}
{meetup == 1 ? (
<View className="at-article__p">
{`ID:${window.localStorage.getItem("openid")}`}
</View>
) : null}
{/* 已报名 */}
{meetup == 1 ? (
<View className="model-emoji">
<Image
style="width: 240px;height: 240px;background: #fff;"
// src={qrcode}
src={joinGroup}
/>
</View>
) : null}
</View>
</View>
</View>
<View className="bottomDiv"></View>
{/* 判断有没有wxid,是否女性 */}
<AtButton
type="primary"
size="normal"
className="joinSalon"
onClick={() => {
if (meetup == 1) {
return false;
} else {
if (!!isWeChat) {
payh5("meetup", 2900);
} else {
setmeetupQR(true);
}
}
}}
>
{meetup == 1 ? "入群口令: 3399" : `立即加入`}
</AtButton>
<View className="meetupQR">
{/* 软件下载模态窗 */}
<AtModal isOpened={meetupQR}>
<AtModalHeader>咨询沙龙</AtModalHeader>
<AtModalContent>
<View className="model-emoji">
<Image
// style="width: 100%;height: 240px;background: #fff;"
src={qrcode}
/>
</View>
</AtModalContent>
<AtModalAction>
<Button
onClick={() => {
setmeetupQR(false);
}}
>
知道了
</Button>
</AtModalAction>
</AtModal>
</View>
</View>
);
};
export default Salon;

3
src/pages/salon/index.config.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '异度星球'
}

35
src/pages/salon/index.scss Normal file
View File

@@ -0,0 +1,35 @@
.Model {
padding: 20px;
.bottomDiv {
width: 100%;
height: 100px;
// background-color: yellow;
}
.joinSalon {
// position: relative;
bottom: 20px;
position: fixed;
width: 700px;
font-weight: 600;
background-color:#72D572 ;
border-color: #72D572 ;;
}
.model-emoji {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
.no-border {
border: none;
overflow: hidden;
width: 100%;
height: 100vh;
scrollbar-width: none; /* Firefox */
}

248
src/pages/salon/index.tsx Normal file
View File

@@ -0,0 +1,248 @@
// @ts-nocheck
import { Component } from "react";
import { View, Text, Image, Button } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
import loft from "../../images/loft.png";
import nomadvloglife from "../../images/nomadvloglife.png";
import {
AtModal,
AtModalHeader,
AtModalContent,
AtModalAction,
AtAvatar,
AtAccordion,
} from "taro-ui";
import qrcode from "../../images/qrcode.png";
import joinGroup from "../../images/joinGroup.png";
// export default class Index extends Component {
const Salon = () => {
const [meetupQR, setmeetupQR] = useState(false);
const [isWeChat, setisWeChat] = useState(false);
const [meetup, setmeetup] = useState(window.localStorage.getItem("meetup"));
useEffect(() => {
isWeChatFun();
}, []);
// const handleClick = (value) => {
// // 跳转到目的页面，在当前页面打开
// Taro.navigateTo({
// url: "/pages/index/index",
// });
// };
// 是否在微信客户端
const isWeChatFun = () => {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("micromessenger") != -1) {
setisWeChat(true);
return true;
} else {
setisWeChat(false);
return false;
}
};
const payh5 = (type, total_fee = 1000) => {
// console.log("111");
Taro.request({
method: "POST",
url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
// url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
data: {
callback_url: window.location.href,
openid: window.localStorage.getItem("openid"),
total_fee: total_fee, // 金额,单位:分
type: type, //订单类型 book/meetup/video/vip
},
header: {
"content-type": "application/json", // 默认值
},
success: function (res) {
console.log(res.data);
// window.alert(res.data.jsapi);
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
// 以下6个支付参数通过payjs的jsapi接口获取
// appId: "wxc5205a653b0259bf",
// timeStamp: "1701401644",
// nonceStr: "KhOYB0wFV6j9qyQK",
// package: "prepay_id=wx01113404850024729b35f4d69b73500000",
// signType: "MD5",
// paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
...(res?.data?.jsapi ?? {}),
},
function (res) {
// 支付成功
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.localStorage.setItem(type, 1); //订单类型 book/meetup/video/vip
WeixinJSBridge.call("closeWindow");
}
}
);
},
});
};
return (
<View className="Model">
<View className="meetup-left">
<Image style="width: 100%;height: 100px;background: #fff;" src={loft} />
</View>
{meetup != 1 ? (
<View className="at-article">
<View className="at-article__h1">异度星球</View>
<View className="at-article__info">
{/* 2017-05-07&nbsp;&nbsp;&nbsp; */}
异度星球
</View>
<View className="at-article__content">
<View className="at-article__section">
<View className="at-article__h2">群简介</View>
<View className="at-article__h3">| 📣技术爱好者</View>
<View className="at-article__p">
{/* 微信群是一个交流技术的平台,不限软件/硬件 */}
交流灌水
<br />
践行『长期价值』和『杠杆主义』
<br />
折腾开源软件和开源硬件
{/* <br />
长期更新 */}
</View>
<br />
<View className="at-article__h3">| 📋核心主题</View>
<View className="at-article__p">
{/* 微信群只是一个沟通平台,与其他伙伴搭桥
<br /> */}
包括但不限于:
<br />
1️⃣云手机
<br />
2️⃣微信机器人
<br />
3️⃣AIGC /边缘计算
</View>
<br />
<View className="at-article__h3">| 🟩微信群</View>
<View className="at-article__p">
{/* 『微信群』是一个沟通平台,
<br />
加入后,会显示『入群口令』
<br /> */}
机器人会自动邀请加群
</View>
<br />
<View className="at-article__h3">| 🔊声明</View>
<View className="at-article__p">
🚫禁止营销推广
<br />
{/* 🚫恶意捣乱
<br />
<br /> */}
❗请勿随意@群主
</View>
<br />
</View>
</View>
</View>
) : (
<View>
<View>
<View className="at-article__h3">| ☕微信自动入群口令:<span style={{color:"red"}}>3399</span></View>
<View className="at-article__p">
{`ID:${window.localStorage.getItem("openid")}`}
</View>
<View className="model-emoji">
<Image
// style="width: 100%;height: 240px;background: #fff;"
src={qrcode}
/>
</View>
<View className="model-emoji">
<Image
style="width: 240px;height: 240px;background: #fff;"
// src={qrcode}
src={joinGroup}
/>
</View>
</View>
{/* webview=社区 */}
{/* <iframe
className="no-border"
src="https://memos.nomadcna.com/"
></iframe> */}
</View>
)}
<View className="bottomDiv"></View>
{/* 判断有没有wxid,是否女性 */}
{meetup != 1 ? (
<AtButton
type="primary"
size="normal"
className="joinSalon"
onClick={() => {
if (meetup == 1) {
return false;
} else {
if (!!isWeChat) {
// 1元
payh5("meetup", 100);
} else {
setmeetupQR(true);
}
}
}}
>
{/* {meetup == 1 ? "已加入" : `立即加入`} */}
{`立即加入 ¥1`}
</AtButton>
) : null}
<View className="meetupQR">
{/* 软件下载模态窗 */}
<AtModal isOpened={meetupQR}>
<AtModalHeader>添加好友</AtModalHeader>
<AtModalContent>
<View className="model-emoji">
<Image
// style="width: 100%;height: 240px;background: #fff;"
src={qrcode}
/>
</View>
</AtModalContent>
<AtModalAction>
<Button
onClick={() => {
setmeetupQR(false);
}}
>
知道了
</Button>
</AtModalAction>
</AtModal>
</View>
</View>
);
};
export default Salon;

3
src/pages/sphone/index.config.js Normal file
View File

@@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '云手机'
}

37
src/pages/sphone/index.scss Normal file
View File

@@ -0,0 +1,37 @@
// 在 src/index.scss 中引入 GitHub Markdown 主题
@import 'github-markdown-css/github-markdown.css';
.Sphone {
padding: 40px;
// font-size: 30px !important;
// color: #666;
.markdown-body{
font-size: 30px !important;
}
img {
max-width: 100%;
height: auto; /* 保持图像的纵横比 */
}
.formCode {
display: flex;
flex-direction: row;
.codeBtn {
background-color: aquamarine;
// height: 80px;
// color: red;
}
}
.joinSalon {
// position: relative;
// bottom: 20px;
// position: fixed;
width: 700px;
font-weight: 600;
background-color:#72D572 ;
border-color: #72D572 ;;
}
}

151
src/pages/sphone/index.tsx Normal file
View File

@@ -0,0 +1,151 @@
// @ts-nocheck
import { Component } from "react";
import { View, Text, Image } from "@tarojs/components";
import "./index.scss";
import { AtButton, AtInput, AtTabBar } from "taro-ui";
import React, { useCallback, useEffect, useState } from "react";
import { AtGrid } from "taro-ui";
import { Swiper, SwiperItem } from "@tarojs/components";
import { AtCard } from "taro-ui";
import { AtImagePicker } from "taro-ui";
import Taro from "@tarojs/taro";
import { AtAvatar } from "taro-ui";
import { AtTag } from "taro-ui";
import { AtList, AtListItem } from "taro-ui";
import { AtForm, AtMessage } from "taro-ui";
import { marked } from "marked";
import infoText from "./info.md";
import payText from "./pay.md";
marked.setOptions({
breaks: true, // 是否回车换行
gfm: true, //使用经批准的 GitHub Flavored Markdown (GFM) 规范
// pedantic: true, //严格模式
// highlight(code:any, lang:any) {
// // 语法高亮
// let val = code;
// if (lang) {
// val = hljs.highlight(lang, code).value;
// } else {
// val = hljs.highlightAuto(code).value;
// }
// return val;
// },
});
// const renderer = new marked.Renderer();
// // 使用拓展
// marked.use({ renderer });
// export default class Index extends Component {
const Sphone = () => {
const [markText, setmarkText] = useState();
const [isWeChat, setisWeChat] = useState(false);
const [sphone, setsphone] = useState(window.localStorage.getItem("sphone"));
useEffect(() => {
isWeChatFun();
}, []);
// const handleClick = (value) => {
// // 跳转到目的页面，在当前页面打开
// Taro.navigateTo({
// url: "/pages/index/index",
// });
// };
// 是否在微信客户端
const isWeChatFun = () => {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("micromessenger") != -1) {
setisWeChat(true);
return true;
} else {
setisWeChat(false);
return false;
}
};
const payh5 = (type, total_fee = 1000) => {
// console.log("111");
Taro.request({
method: "POST",
url: `${process.env.TARO_API_API}/payh5`, //仅为示例，并非真实的接口地址
// url: "https://pay.hackrobot.cn${process.env.TARO_API_API}/payh5", //仅为示例，并非真实的接口地址
data: {
callback_url: window.location.href,
openid: window.localStorage.getItem("openid"),
total_fee: total_fee, // 金额,单位:分
type: type, //订单类型 sphone/meetup/video/vip
},
header: {
"content-type": "application/json", // 默认值
},
success: function (res) {
console.log(res.data);
// window.alert(res.data.jsapi);
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
// 以下6个支付参数通过payjs的jsapi接口获取
// appId: "wxc5205a653b0259bf",
// timeStamp: "1701401644",
// nonceStr: "KhOYB0wFV6j9qyQK",
// package: "prepay_id=wx01113404850024729b35f4d69b73500000",
// signType: "MD5",
// paySign: "2A823C8D47CCF871C6C65A56DC228CF8",
...(res?.data?.jsapi ?? {}),
},
function (res) {
// 支付成功
if (res.err_msg == "get_brand_wcpay_request:ok") {
window.localStorage.setItem(type, 1); //订单类型 sphone/meetup/video/vip
WeixinJSBridge.call("closeWindow");
}
}
);
},
});
};
return (
<View className="Sphone">
<View
className="markdown-body" // 添加 GitHub Markdown 主题类
dangerouslySetInnerHTML={{
__html: marked(sphone == 1 ? payText : infoText),
}}
></View>
<View className="bottomDiv"></View>
{/* 判断有没有wxid,是否女性 */}
{sphone != 1 ? (
<AtButton
type="primary"
size="normal"
className="joinSalon"
onClick={() => {
if (sphone == 1) {
return false;
} else {
if (!!isWeChat) {
// 180元
payh5("sphone", 18000);
} else {
// setmeetupQR(true);
}
}
}}
>
{/* {meetup == 1 ? "已加入" : `立即加入`} */}
{`阅读更多 80`}
</AtButton>
) : null}
</View>
);
};
export default Sphone;

51
src/pages/sphone/info.md Normal file
View File

@@ -0,0 +1,51 @@
## 云手机教程
> docker部署
![2024-12-22-01-00-03-Escrcpy.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2024-12-22-01-00-03-Escrcpy.png?imageSlim)
> 原生安卓AOSP
![2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png?imageSlim)
***
## 目录
- 云手机设备指北
- 硬件选型
- 方案1:docker容器化安卓
- 虚拟化的优缺点/设置
- 方案2:主板+原生AOSP
- root权限与magisk配置
- OTG外设配件
- 内网穿透
- 远程控制:云控
- 魔法:多开/群控/应用变量/gps/ip属地
- 应用场景:无人直播/机器人bot/RPA自动化+数据爬虫
- 杂谈~~
***
## 简述
教程属于`操作类,不是原理`
比如不涉及:内核编译,ROM定制,虚拟化
图文+视频录制
长期更新

79
src/pages/sphone/pay.md Normal file
View File

@@ -0,0 +1,79 @@
## 云手机教程
> docker部署
![2024-12-22-01-00-03-Escrcpy.png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2024-12-22-01-00-03-Escrcpy.png?imageSlim)
> 原生安卓AOSP
![2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png](https://hackrobot-1258475618.cos.ap-shenzhen-fsi.myqcloud.com/2025-01-06-01-40-05-EscrcpyMirror-rk3588_s(WIFI).png?imageSlim)
***
## 目录
- 云手机设备指北
- 硬件选型
- 方案1:docker容器化安卓
- 虚拟化的优缺点/设置
- 方案2:主板+原生AOSP
- root权限与magisk配置
- OTG外设配件
- 内网穿透
- 远程控制:云控
- 魔法:多开/群控/应用变量/gps/ip属地
- 应用场景:无人直播/机器人bot/RPA自动化+数据爬虫
- 杂谈~~
***
## 简述
教程属于`操作类,不是原理`
比如不涉及:内核编译,ROM定制,虚拟化
图文+视频录制
长期更新
***
## 云手机设备指北
这里说的云手机,默认指的
1. 开源硬件:ARM主板,
2. 设置安卓系统
3. 远程控制
***
## 硬件选型
建议购买RK3588芯片的开发板
- 香橙派5plus
- nvme ssd硬盘
- TF卡:用于测试系统
- 2个支持`uvc协议+带麦克风`的摄像头
教程正在更新中,视频录制操作过程,请等待