huya虎牙小程序比賽

• HTML、CSS、Javascript
• Node.js
• React Native
• HY-UI

21年暑假參加了虎牙小程序比賽，那時本人才大一，發現網上相關的內容實在是少之又少，現在比賽已經結束一個多月了，我來回顧一下自己的學習過程，希望能給以后的比賽者做一個參考。

HTML、CSS、Javascript

這是前端三劍客，一定要學，但重心不要放在這上面，因為如果在這上花費太多的時間和精力，會消耗你對比賽的大量熱情，而且huya有自己的開發平臺，并不完全兼容前端三劍客，但背后的原理是相同的，所以學到明白道理就夠了。
前端學習軟件HBuilder X，然后前端學習自行網上或借書學習就行，這方面的資料很多，不做贅述

HBuilder X

Node.js

這算是個工具吧，需要自行安裝，網上搜索相關安裝教程就可以，有它才可以繼續后續的安裝
附huya小程序相關文檔網址，按照要求一步一步來安裝就好

https://dev.huya.com/docs/#/intro/index

為什么要按node，看圖，后續會用到，這個在huya小程序文檔中都可以看到，在我看來node只是個工具，創建小程序會用到，并不需要深入學習

React Native

直接學習React Native，不要學React，看圖，小程序基于react-native實現，不過又不完全一樣，我認為這才是學習重點，自己就因為在前端學習花費了太多時間，導致在這里沒時間深入學習了。

react-native還是有很多書籍可以學習的，自己當時也在圖書館借了不少書，下面附上react-native中文學習網

https://reactnative.cn/docs/components-and-apis

HY-UI

HY-UI學習網址

https://hd.huya.com/web/hy-ui-doc/teach/

從創建項目的streamer文件中的app.javascript開始編寫代碼就行，下面是我的路徑，項目名稱為hello-world

C:\Users\zhang\hello-world\streamer

首先我認為huya這個設計的很雞肋，好多使用說明都很模糊，還要自己摸索，簡簡單單一個按鈕定位當時就困擾了我很久，我吐了，完全是自己試出來的

import { UI } from '@hyext/hy-ui' import React, { Component,useRef,useState,useCallBack,useMemo,useEffect, } from 'react' import './quse2.hycss' import { Route, Router } from "@hyext/router"; import { TouchableOpacity } from "react-native"; import Appm from './app' import End from './end2'import { NativeUI } from "@hyext-beyond/hy-ui-native"; const { Lottie } = NativeUI;const { View, Text , Modal, BackgroundImage, Button, Image,Progress } = UIclass App extends Component {render() {return (<Router initialEntries={['/main']}><Route path={'/main'} component={ Main }></Route><Route path={'/appm'} component={ Appm }></Route><Route path={'/end'} component={ End }></Route></Router>)} }class Main extends Component {constructor (props) {super(props);this.anim = React.createRef()this.state = {num : 1,next : 0,hid:1,Ready:1,pan : 1,val : Math.floor(Math.random()*100),val_1 : 0,val_2 : 0,val_3 : 0,problem : ["感謝NEU和huya","舉例說明你不喜歡的直播風格","說出一名你喜歡的同類型主播","舉例說明你喜歡的直播風格","如果作為一名游戲主播，你覺得自己屬于娛樂主播還是教學主播","今年你最后悔的一件事","今年你最成功的一件事","直播中你做的最尷尬的事是什么","生活中你是一個話多的人嗎","有喜歡的人了嗎","說出一名你比較欣賞的異性主播","說出年少時的夢想","如果遇見初戀，你會說什么","用三個詞來形容自己","如果可以換一種直播類型，你想成為什么主播","你有freestyle嗎","請‘朗讀’，你看這個面又長又寬，就像這個碗又大又圓","平時會看其他主播直播嗎？說出其中兩個","如果此刻有老板送出了火箭你會","當你最不知道穿什么顏色的時候，你會選擇什么顏色?","如果看到自己最愛的人熟睡在你面前你會做什么?","唱一首自己平時會哼唱的歌","曾經有過最被感動的事是什么?","你最想要的3樣東西","最后一次發自內心的笑是什么時候?","如果給你一個機會去世界上任何一個地方旅行你會去","如果時間能倒流你希望回到哪一時間?","你心目中理想的愛人是什么樣子呢","最喜歡哪部電影?","你的粉絲是你的什么","最喜歡的食物是什么","今天中午吃的什么","你會如何向喜歡的人表白","如果你愛的人不愛你怎么辦","Having * * * before marriage是否已屢見不鮮","你在乎別人看你的眼光嗎","你相信有純友誼嗎","哭得最傷心的是哪一次","喜歡看的動畫片","生活支出最大的部分是","大學一共掛過幾門課","你相信有春夢嗎","最欣賞自己哪個部位","說出自己性格上的兩個優點","平生最成功的一次撒謊","你認為男生就該養家嗎","分手后還能做普通朋友嗎","愛情重要游戲重要","游戲剛開局，女朋友發來消息說感冒了，這時你選擇","你會選擇愛還是被愛","最喜歡的一本書","每天睡眠有幾小時","近一個星期內讓你最開心的事","認為自己和哪種動物相似","最喜歡的三種食品或飲品","喜歡什么顏色","對象一口氣吃了50串羊肉串，你想說什么","堅持最久的習慣或愛好是","身邊異性朋友多還是同性朋友多","有過哪些外號","你如何看待愛情變成親情","如何看待藍顏","如何看待友情變成愛情","有類似‘不吃香菜’這樣的忌口嗎","大笑30秒","做出一個女生或男生專有的動作","你會做菜嗎","今天晚上要做什么","用四個字形容你現在的生活狀態","給一名異性朋友打電話說自己喝醉了","做一個有自己特色的動作","做自己最sex的表情或動作","對著直播深情表白3分鐘","用三個詞來形容自己","做一個你認為最酷的動作","跳一段你認為最有戲劇感的舞蹈","三句話讓大家記住你","三句話讓大家重新認識你","跪下說主人，我錯了，不要趕我走","女反手摸肚臍，男露腹肌","你的口頭禪是什么","你害怕恐怖氛圍的密室逃脫嗎","表演花手","假如你在街上被粉絲認出來了","現實生活中有社恐嗎","喜歡用無線耳機還是有線耳機","做一個你認為最娘的動作","游戲中如果隊友罵你","打游戲遇見了一對很菜的情侶，你會","說一句話證明你玩過王者榮耀","一句話證明你玩過英雄聯盟","如果女朋友很坑還一定要和你打排位","展示三種不同的笑，各十秒","深情朗誦giegie","抬頭笑，低頭哭，反復三次","如果能重來，我要選","看到‘我***’你想到了什么","模仿豬八戒說，猴哥，師傅被妖怪抓走了","做三個最丑的表情并拍照留念","說出一名你不喜歡的同類型主播",],next_text : ["下一題","再來一局"]};}componentDidMount(){// setTimeout( () => this.time_q(),2910);setTimeout( () => this.time_reafy(),2900);// setTimeout( () => this.update(),2910);}time_reafy(){this.setState({Ready : 2, //不能放分號;})}time_q(){this.timer = setInterval ( () => {this.update();},6000);}update(){if(this.state.num==1){this.setState({num : this.state.num+1,val : Math.floor(Math.random()*100),})}else if(this.state.num==2){this.setState({num : this.state.num+1,next : 1,val : Math.floor(Math.random()*100),})}else{this.handleJump2()}}ready(){return (this.state.Ready <=1 &&<View ><Lottieref={this.anim}autoPlay={true}loop={false}autoSize={true}style={{width: 350,height: 250,backgroundColor: "rgb(11,155,247)", //'#c7e6c8',}}source={require('./READY.json')}/></View>)}pro(){return(this.state.Ready >1 &&<Text className="tip_text2">{this.state.problem[this.state.val]}</Text>)}handleJump = () => {const { history } = this.props // Router的子組件會攜帶history、location之類跟路由有關的對象。history.push('/appm') // 跳轉到solo頁面}handleJump2 = () => {const { history } = this.props // Router的子組件會攜帶history、location之類跟路由有關的對象。history.push('/end') // 跳轉到solo頁面}render () {return (<View className="container"><BackgroundImagesource={require('./img/background.jpg')} className="background"><View className="title"><Button type="primary" size="md" textColorInverse className="title_button"><Text className="title_color">真心話VS大冒險</Text></Button></View><View className="tip">{this.ready()}<Text className="tip_text1">{this.state.num}</Text>{this.pro()}</View><View className="next"><Text className="next_text" onPress={() => this.update()}>{this.state.next_text[this.state.next]}</Text></View><TouchableOpacity className="type" onPress={this.handleJump}><Text className="type_text">返回大廳</Text></TouchableOpacity></BackgroundImage></View>)} }export default App .container {flex: 1; } .background{ flex: 1; resizeMode: "cover"; justifyContent: "center"; alignItems:"center"; borderWidth: 0; }.title{ position:relative; top:50; left:40; } .title_button{ width: 280; height:40; border-radius:100px; } .title_color{ fontSize:25; text-align:center; }.tip{ width: 350; height:250; backgroundColor:"rgb(82,230,252)"; position:relative; top:80; left:10; text-align:center; } .tip_text1{ fontSize:30; marginTop:50; } .tip_text2{ fontSize:20; marginTop:20; }.next{ width: 200; height:50; alignItems: "center"; text-align:center; backgroundColor: yellow; position:relative; top:120; left:80; border-radius:80px; } .next_text{ fontSize:30; }.type{ width: 200; height:50; alignItems: "center"; text-align:center; backgroundColor: "rgb(11,155,247)"; position:relative; top:150; left:80; border-radius:80px; } .type_text{ fontSize:30; }

上述一個JavaScript代碼一個CSS代碼，當然只有這兩部分代碼跑不起來，他關聯了其他東西，只是給你做一個參考。我說一下我認為比較重要的幾個點。

定位相對定位使用方法如下圖所示，絕對定位我用了一直不好使，不知道是什么情況，可能禁用？也可能是我方法不對。
下面代表在原來的基礎上，向下移50，向右移40。

position:relative; top:50; left:40;

路徑，實現按按鈕彈出第二個頁面

import { Route, Router } from "@hyext/router"; import { TouchableOpacity } from "react-native"; import Appm from './app' import End from './end2'class App extends Component {render() {return (<Router initialEntries={['/main']}><Route path={'/main'} component={ Main }></Route><Route path={'/appm'} component={ Appm }></Route><Route path={'/end'} component={ End }></Route></Router>)} }handleJump = () => {const { history } = this.props // Router的子組件會攜帶history、location之類跟路由有關的對象。history.push('/appm') // 跳轉到solo頁面}handleJump2 = () => {const { history } = this.props // Router的子組件會攜帶history、location之類跟路由有關的對象。history.push('/end') // 跳轉到solo頁面} //上述是準備工作，下面是寫在reader中的按鈕，讓它關聯函數<TouchableOpacity className="type" onPress={this.handleJump}><Text className="type_text">返回大廳</Text></TouchableOpacity>

更新數據

num : 1, next : 0, val : Math.floor(Math.random()*100),update(){if(this.state.num==1){this.setState({num : this.state.num+1,val : Math.floor(Math.random()*100),})}else if(this.state.num==2){this.setState({num : this.state.num+1,next : 1,val : Math.floor(Math.random()*100),})}else{this.handleJump2()}}//上述是準備工作，下面是寫在reader中的按鈕，讓它關聯函數<View className="next"><Text className="next_text" onPress={() => this.update()}>下一題</Text></View>

當然要做一個好的huya小程序還有許多東西要學習，SDK，API等，我只能幫到這里了，這不是一篇具體的教學文章，更像實在告訴你該如何學習，學習重點在哪，我認為學習重點就在react-native和huya自身的一些東西，如HY-UI，SDK，API等。
我做的是一個模仿你畫我猜做的真心話大冒險小游戲，如果想看全部原代碼，評論即可，看到我會回復

總結

以上是生活随笔為你收集整理的huya虎牙小程序------真心话大冒险的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。