前言

一、小程式是什么？

小程式是一種不需要下載安裝即可使用的應用，它實作了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用，也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題，應用將無處不在，隨時可用，但又無需安裝卸載，

二、知識儲備

1.CSS

宣告

CSS是Casonading Style Sheet(層疊樣式表)的縮寫，CSS是一種標記語言，用于為HTML檔案定義布局，例如，CSS涉及字體、顏色、邊距、高度、寬度、背景影像、高級定位等方面，運用CSS樣式可以讓頁面變得更美觀，

在小程式的開發中，例如容器、組件的大小，背景圖片等等，都需要進行設定引數，雖然可以在.js檔案中直接進行樣式排版，但是如果是小代碼那還不是很亂，而一個小程式少則幾百的代碼量，如果不將樣式與內容分隔開就會很亂，而CSS又是一個功能十分強大的工具，所以對于小程式開發很重要，

對于CSS的學習我認為最好是能借一本書來大致了解語法和一些基本用法就好，不用太深究，而是采用不懂就學的方式，如果在小程式開發中遇到問題，在結合書籍與網路上的資料來解決，

ps：在小程式開發中，每一個小程式平臺都可能有自己的樣式格式，雖然語法和大部分樣式都是和CSS一樣的，不過在實戰中要結合平臺的規則來使用，

基礎知識

1. 語法結構，CSS規則由兩個主要的部分組成：選擇器以及一潭訓多條宣告，

p //選擇器
{
 color:red; //一條宣告，color 是屬性，red 是值
 text-align:certer;
}

(1).選擇器通常是需要改變樣式對的HTML元素，
(2).每條宣告由一個屬性和一個值組成，
(3).屬性是希望設定的樣式屬性，
(4).每個屬性都有一個值，屬性和值用冒號隔開，
，CSS宣告總是以分號（；）結束，并用大括號（{}）括起來，

2. ID和選擇器
   (1)ID的方法

<text id ="paral">Hell</text>
----------------------------------------
# paral
{
 color:red; //一條宣告，color 是屬性，red 是值
 text-align:certer;
}

，id是唯一，其樣式的以#來定義，
(2)class的方法
class選擇器用于描述一組元素的樣式，class選擇器有別于id選擇器，class可以在多個元素中使用，class選擇器在HTML中以class屬性表示，在CSS中，類選擇器以一個點“.”號顯示，在以下的例子中，所有擁有center類的HTML元素均為居中，例如：

.certer
{
 text-align:certer;
}

3. CSS盒子模型
   CSS盒子模型本質上是一個盒子，可以封裝周圍的HTML元素，它包括邊距、邊框、填充和實際內容，如圖1. 14所示，盒子模型允許我們在其他元素和周圍元素邊框之間的空間放置元素，不同部分的說明如下，
   (1)Margin（外邊距）：清除邊框外的區域，外邊距是透明的
   (2)Border(邊框)：圍繞在內邊距和內容外的邊框，
   (3)Padding(內邊距)：清除內容周圍的區域，內邊距是透明的，
   (4)Content(內容)：盒子的內容，顯示文本和影像，

CSS學習指引

2.JavaScript

如果說CSS是小程式開發的外表，那么JavaScript就是血肉了，在進行開發時，大部分的代碼都是使用JavaScript來寫的，這可能和網頁設計不同，網頁設計則是HTML，所以對于做小程式的小伙伴可以不用急著學HTML，

因為JavaScript里邊的內容很多，不過我的建議還是和上邊一樣先大致了解語法和一些基本用法，在實戰中去學，處理基本語法和用法外，應該著重了解，

• 物件
• 屬性
• 函式
• 事件
  這幾個概念，
  我推薦是借一本書來學習，網上的大部分是面向網頁的，可能你會在網頁和小程式上出現混亂，當然也是可以在網上學習的，

JavaScript學習

3.React

React簡介

React概述

React框架的優點

• 宣告式設計： React采用宣告范式，可以輕松描述應用，
• 高效：React通過對DOM的模擬，最大限度地減少與DOM的互動，
• 靈活：React可以與已知的庫或框架很好地配合，
• 使用JSX語法：JSX是JavaScrpt語法的擴展，可以極大地提高JS運行效率，
• 組件復用：通過React構建組件使得代碼易于復用，可在大型專案應用開發中發揮優勢，
• 單向回應的資料流：React實作了單向回應的資料流，減少了重復代碼，比傳統資料系結方式更簡單，

我談React

• npm
  什么是npm
• JavaScript 打包工具
• 路由，這個很重要，在跳轉界面與回跳界面時需要用到，
• JSX
  JSX總結
• React組件與props，props大致上好比一個函式中的引數，
• React State 與生命周期 ，State 還比一個類中定義的變數，在事件處理是經常使用，
• 事件處理

學習鏈接：
React學習路徑
React框架總結

React Native

1.網路上的資源相對較少，所以建議可以借書，

小總結

三、開發前期準備

安裝Node.js框架

因為我們需要用npm來使用腳手架進行開發，而npm包管理工具是系結在Node.js框架中的，
官方鏈接
官方中文站點

Webpack 模塊打包器

通過npm安裝，

npm install -g webpack  //全域安裝方式
npm install --save-dev webpack //專案目錄安裝方式

安裝cli工具，每一個平臺都有對應的cli

如虎牙的：

//提示：為了保證您的安裝速度，可以先切換為淘寶源后，再執行后續指令，
npm config set registry https://registry.npm.taobao.org

mkdir hello-world //生成檔案夾  hello-world 為檔案夾名稱
cd hello-world  // 移到該目錄下
npm init -y    
npm i -D @hyext/cli

創建專案

每個平臺都不一樣，可以參考平臺的開發手冊，

npx hyext init

在創建完成之后

啟動本地開發服務

在hello-world目錄下執行下面的指令 ，即之前創建的目錄

npx hyext start

成功啟動本地服務后，可點擊訪問，上圖中的鏈接為https://localhost:18080/index_web_video_com.html

創建好的檔案夾中的檔案

每個平臺都大不相同，不都一下幾個是基本是一樣的，

• node_modules 目錄:是通過npm 工具安裝的所有依賴快，是整個專案的基礎核心，
• package.json 檔案：整個專案的基本組態檔，用于定義專案的基本資訊，
• index.js 或index.html ：是整個專案的入口，
  -src目錄： 一般都會有一個目錄用于保存整個專案的源代碼，其中的index.js是源代碼的入口，

四、小程式開發

實用技能

條件渲染

條件在程式開發中是必不可少的，因為程式需要面對用戶的多種要求，
React 條件渲染基本上是通過JavaScript條件運算子（例如 ，if陳述句、“與”邏輯、三元運算式）

1. 可以使用 if --- else 陳述句 如

if(this.state.num>=0 && this.state.num <= 2)
		{
	  return(
		<Text className="tip_text1">{this.state.num+1}/3</Text>
		)
		}

2.“與”邏輯

return(
		this.state.num >=0 &&
		<Text className="tip_text1">{this.state.num+1}/3</Text>
		)

3.三元運算式

valu_ans = this.state.val >0 ?( this.state.val+1):1;

計時器

1.setTimeout（）：到給定的時間后執行其中指定的函式，只執行一次

 setTimeout( () => this.time_q(),3900);

值得說明一下：

() => this.time_q() //是JavaScript中呼叫函式的一種方式被稱為箭頭函式，() => 前邊這個括號中可以放引數，如果呼叫的函式需要引數的話，

2.setInterval（）：到給定的時間后執行其中指定的函式，一直執行

this.timer = setInterval ( () => {
			this.update();
		},60000); //相當于設定一個計時器 timer ，這個計時器每隔60秒呼叫一次 update（）函式，

在這里值得說明一下：

this.update(); //是類呼叫自己的函式或變數

State(狀態）

React 之所以定義這個概念，目的就是僅僅通過更新React組件的狀態，就可以實作重新渲染用戶界面的操作，

要在React 組件類內部，要定義constructor（）構造方法，以及render（）方法，
這里先講constructor（）構造方法

constructor (props) {
    super(props);
    this.state = { //在State中設定組件類的變數，可以有陣列，
		time:1,
		hid:1,
		}

• 記住在state中定義變數時，要定義多個變數的話，變數之間用逗號隔開，不能是分號，
• 第一行，在constructor（）構造方法中定義props引數，
• 第二行，通過super（）關鍵字呼叫props引數，實作對父類構造方法的參考，這里super（）是JavaScript的語法范圍，
  ，接下來重點講State的更新，在React框架中只能通過呼叫setState（）函式
  來達到更新變數來重新渲染的母的，具體做法如下：

this.setState({
			num : (this.state.num+1),
			val :value ,
		})
		//注意如果要更新多個變數記得用花括號括起來，且用逗號隔開，

呼叫函式

if(this.state.num ==4)
		{
			 this.handleJump_app();//其中handleJump_app() 是組件類中的函式，
		}

生命周期

componentDidMount()函式：在組件加載之后，一次性呼叫 componentDidMount，這是最常用的，可以在這里設定計時器，

componentDidMount(){
	  setTimeout( () => this.time_q(),3900);
    }

事件監聽

React 中監聽事件十分容易，只需要個React 元素添加 onClick 、onKeyDown

render()
{
return(
<button onClick = {this.handleClick}>React 實戰</button>
)
}
// 注意 呼叫的函式需要用花括號括起來，

在上面代碼中，為組件按鈕添加了一個onClick 點擊事件，當用戶點擊按鈕時就會觸發handleClick的函式事件

文本組件中設定監聽事件

通過 TouchableOpacity 容器將 文本組件放在里邊即可，

<TouchableOpacity className="type" onPress={this.handleJump_app}>
        <Text  className="type_text">回傳大廳</Text>
      </TouchableOpacity>

設定背景圖片

需要用 View 容器將背景容器裝進去才可以，

return (
      <View className="container">
      <BackgroundImage
          source={require('./img/background.jpg')} 	 //背景圖片的資源個式
          className="background">
           </BackgroundImage>
      </View>
    )

View 容器組件

這個組件很重要，在React Native中，View容器組件支持Flexbox布局、樣式、觸摸事件處理和一些無障礙功能，它可以被放到其他容器組件里，也可以包含任意多個子組件，

render（）方法

該方法太重要了所以我把它作為一個模塊來講，
render方法是組件規范中在創建組件時唯一必需的方法，它必須回傳一個子元素、null或false，子元素可以是已宣告的組件(如View組件或Text組件)，也可以是已定義的其他組件（如已創建并匯入到檔案中的Button組件），

• render()回傳一個組件

render()
{
	return(
		<View>
			<Text>Hello</Text>
		<View>
	)
}

• render方法還可以回傳一個在別處定義的組件，

render()
{
	return(
		<SomeComponent />
	)
}

• render方法還可以根據條件判斷來回傳組件，

render()
{
		if(something == true){
		return(
		<View>
			<Text>Hello</Text>
		<View>
		)
		}
		else  
		{
		return(
				<View>
			<Text>Bye</Text>
		<View>
			)
		}
	)
}

• render方法還可以回傳函式回傳的組件，重要

ans()
	{
		return (
			<Text className="ans_text">上一題：</Text>
			)
	}
	
render()
{
	return(
		{this.ans()}  //注意需要用花括號括起來
	)
}

如果回傳的組件大于兩個就需要用View 容器組件來裝，
如上面的ans（）函式

return(
				<View>
				<Text className="tip_text2">游戲結束！</Text>
				<Text className="tip_text2">將于一分鐘后跳轉到大廳			
				</Text>
				</View>
				)

• 在這里就需要提一下，在組件類中呼叫函式，變數都需要用 this來呼叫，在render方法中要想變數顯示出來就必須用花括號括起來，

render()
{
	return(
		<View>	
			{this.state.ans[this.state.ans_num]}</Text>
		<View>
	)
}

路由器

這個是跳轉界面必需的，可以參考下面代碼，

import { UI } from '@hyext/hy-ui'
import React, { Component } from 'react'
import './app.hycss'
import { Route, Router } from "@hyext/router";
import { TouchableOpacity } from "react-native";
import  Tip from './tip'

const { View, Text , Modal  } = UI


class App extends Component {
  render() {
    return (
      <Router initialEntries={['/main']}>
        <Route path={'/main'} component={ Main }></Route>
        <Route path={'/tip'} component={ Tip }></Route>
      </Router>
    )
  }
}


class Main extends Component {

  handleJump = () => {
    const { history } = this.props // Router的子組件會攜帶history、location之類跟路由有關的物件，
    history.push('/tip') // 跳轉到solo頁面
  }

  handleSomething = () => {

  }

  render() {

    return (
      <View className="container">
        <View className="top">
          <View className="logo_name"><Text className="color_f logo_size">頭腦風暴</Text></View>

        </View>

        <View className="bottom_box" style={{display:'flex'}}>
          {/* 點擊要用onPress而不是onClick, 只有 react-native TouchableXXX系列的組件和hy-ui的Button有onPress事件 */}
          <TouchableOpacity className="box_item  box_item_l" onPress={this.handleSomething}>

              <Text  className="color_f title_b">我是考官</Text>
          </TouchableOpacity>
          {/* <View className="options" onClick={this.textLeft}>
            <Text className="dis_no">主播出題</Text>
            <Text className ="dis_no">觀眾答題</Text>
          </View> */}
          <TouchableOpacity className="box_item" onPress={this.handleJump}>

            <Text  className="color_f title_b">我是狀元</Text>
          </TouchableOpacity>
        </View>
        <View className="ranking"><Text className="color_f">排行榜</Text></View>
        <View className="power">
          <View className="powers">

            <Text className="power_num">5</Text>
          </View>
        </View>
      </View>
    )
  }
}


export default App

五、用什么軟體開發

HBuilder X

HBuilder是DCloud（數字天堂）推出的一款支持HTML5的Web開發IDE，HBuilder的撰寫用到了Java、C、Web和Ruby，這是一款我國打造的IDE，
優點是：快，是HBuilder的最大優勢，通過完整的語法提示和代碼輸入法、代碼塊等，大幅提升HTML、js、css的開發效率，當然你可以用自己順手的，
下載地址

Laya

如果你是想做一個游戲類的小程式，那么一個好的專業游戲引擎是必不可少的，下面這個是比較適合新手的，有大量的簡介，可以讓你快速上手，
LayaBox是2000年可樂吧創始人謝成鴻傾力打造的HTML5游戲引擎品牌，旗下產品為PC頁游、APP手游、HTML5游戲提供了三端融合的技術解決方案，為手機游戲市場提供了HTML5與APP體驗相同、資料互通的全新游戲模式，為APP游戲提供了全新的HTML5試玩推廣營銷模式，也為游戲的發行與運營提供了全方位的解決方案，
官網

六、虎牙小程式開發流程

在前邊準備作業都做好后

創建cli

mkdir huya_demo //在e盤創建一個 名叫 huya_demo 的目錄檔案夾
cd huya_demo   //進入這個目錄中
npm init -y    //初始化
npm i -D @hyext/cli //安裝

操作完之后就會得到這么一個檔案夾

其中檔案的作用我已近在上邊談過了，

創建專案

npx hyext init

，這個方法是通過npx 方式來下載，其中的具體內容可能需要參考平臺的手冊了，

需要注意的是通過npx方式安裝的腳手架，其實是臨時安裝包，專案創建完成后會自動洗掉該安裝包，不過不用太擔心，不會影響開發，只是記住就好了，

安裝完成后

就需要選擇面向的埠（如果沒有也沒事，可能平臺默認了）
在這里插入圖片描述

在經過上一步之后專案檔案夾中就會多出一些檔案，

其中index.js是觀眾端的入口，viewer則是其對于的資源檔案，需要再改檔案夾中進行開發，index_streamer.js是主播端的入口，對于的資源檔案夾是streamer，

之后用HBuilder X打開對于的資源檔案夾在里邊添加檔案就可以了，

七、注意事項

因為在開發的時候，因為這個被坑了蠻久，所以特意用一節來說明，

CSS樣式

雖然平臺能兼容大部分的CSS樣式，但平臺為了兼容自己，都為有一些約束，所以在開發小程式中使用樣式表無效或者報錯的話，就可以參考下官網的說明檔案，

組件

組件作為小程式開發必不可少的東西，在使用時要多加參考平臺的說明檔案，雖然組件功能都是差不多的，不過平臺可能會在引數等方面有所不同，

前端小程式SDK介面

一般介面都是平臺自己獨有的了，雖然功能可能類似，這就需要看官方說明檔案了，不過一般介面都是獲取一些平臺上的資料，如果暫時用不上（一般在中后期才用）是不會影響開發的，

總結

在做小程式的時候難免會因為一些問題而煩惱，但只要靜心心來，方法總比困難多，就一定能解決的，我們享受的是在這個程序中獲得知識與技能的喜悅，希望我的這篇文章可以幫助到你們！