rn編譯成小程序

A. RN之Image

一個用於顯示多種不同類型圖片的React組件，包括網路圖片、靜態資源、臨時的本地圖片、以及本地磁碟上的圖片（如相冊）等。詳細用法參閱 圖片文檔 。

載入的圖片有兩種來源，一種是本地圖片，一種是網路圖片。

image載入本地圖片的方法比較簡單，一般只需要設置source 屬性 即可,例如：

在React-native開發中，載入本地圖片是不允許使用字元串變數來制定與載入的圖片地址，因為React native實在編譯時處理所有的require聲明，而不是在運行時動態的處理，所以下面的寫法是錯誤的：

載入網路圖片和載入本地圖片的方法相似，唯一的區別就是網路圖片的地址的網路地址，所以要在圖片的網路地址前加上uri標簽。因為是網路圖片，所以事先載入時不知道其大小，所以在設置圖片的屬性是需要設置圖片的大小。例如：

載入網路圖片是在運行時動態的處理的，所以載入網路圖片是可以使用字元串變數來制定與載入的圖片的地址，例如：

Image作為一個開發中經常使用的組件，他還有其他豐富的屬性，詳情請看官方文檔之 Image組件

B. taro 打包命令詳細使用教程

taro-cli

安裝好 NPM 或 Yarn 後，就可以全局安裝 Taro 開發工具 @tarojs/cli 了。

如果你是使用 NPM 安裝，使用如下命令：

$ npm install -g @tarojs/cli

taro -V 列印版本號

taro init myapp 創建模板項目

微信小程序編譯預覽及打包：

# npm script

$ npm run dev:weapp

$ npm run build:weapp

# 僅限全局安裝

$ taro build --type weapp --watch

$ taro build --type weapp

# npx 用戶也可以使用

$ npx taro build --type weapp --watch

$ npx taro build --type weapp

網路小程序編譯預覽及打包：

# npm script

$ npm run dev:swan

$ npm run build:swan

# 僅限全局安裝

$ taro build --type swan --watch

$ taro build --type swan

# npx 用戶也可以使用

$ npx taro build --type swan --watch

$ npx taro build --type swan

支付寶小程序編譯預覽及打包：

# npm script

$ npm run dev:alipay

$ npm run build:alipay

# 僅限全局安裝

$ taro build --type alipay --watch

$ taro build --type alipay

# npx 用戶也可以使用

$ npx taro build --type alipay --watch

$ npx taro build --type alipay

H5 編譯預覽及打包：

# npm script

$ npm run dev:h5

# 僅限全局安裝

$ taro build --type h5 --watch

# npx 用戶也可以使用

$ npx taro build --type h5 --watch

React Native

React Native 端運行需執行如下命令，React Native 端相關的運行說明請參見 React Native 教程。

# npm script

$ npm run dev:rn

# 僅限全局安裝

$ taro build --type rn --watch

# npx 用戶也可以使用

$ npx taro build --type rn --watch

更新 Taro

Taro 提供了更新命令來更新 CLI 工具自身和項目中 Taro 相關的依賴。

更新 taro-cli 工具：

# taro

$ taro update self

# npm

npm i -g @tarojs/cli@latest

# yarn

yarn global add @tarojs/cli@latest

更新項目中 Taro 相關的依賴，這個需要在你的項目下執行。

$ taro update project

C. 前端開發前景怎麼樣

近幾年，前端的發展還是非常好的，市場需求大，加上學習起來也相對簡單，有眾多人選擇並學習。現在流行前後端都會的全棧技能，我有全套web前端視頻課資料可以發給你自學，是目前前沿的前端技能叫做web全棧工程師。

學習的內容包括：

①計算機基礎以及PS基礎

②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）

③移動開發

④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）

⑤小程序開發

⑥全棧開發（MySQL資料庫、python編程語言、Django框架等）

⑦就業拓展（網站SEO與前端安全技術）

互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。

想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。

祝你學有所成，望採納。

D. 前端和Web前端有什麼區別嗎

前端開發包括了移動前端開發和web前端開發，即包括了PC端開發和移動端領域的開發，而web前端開發主要指傳統的PC端網頁開發，這是它們之間最大的區別。如需學習相關技術推薦選擇達內教育。

前端技術一般分為前端設計和前端開發，前端設計一般可以理解為網站的視覺設計，前端開發則是網站的前台代碼實現。
達內教育作為國內IT培訓的領導品牌，達內的每一名員工都以「幫助每一個學員成就夢想」為己任，也正因為達內人的執著與努力，達內已成功為社會輸送了眾多合格人才，為廣大學子提供更多IT行業高薪機會，同時也為中國IT行業的發展做出了巨大的貢獻。

想了解更多有關IT技術的相關信息，推薦咨詢達內教育。該機構已從事多年IT技術培訓，累計培養100萬學員，並且獨創TTS8.0教學系統，1v1督學，跟蹤式學習，有疑問隨時溝通。該機構26大課程體系緊跟企業需求，企業級項目，課程穿插大廠真實項目講解，對標企業人才標准，制定專業學習計劃，囊括主流熱點技術。

E. 像美團外賣這樣的APP用一種開發語言，能開發得出來嗎

像美團外賣這樣的APP用一種開發語言，能開發得出來嗎？答案是不能。

美團發展到現在可以說已經是一個【巨無霸】了，裡面集成了很多很多功能，除了核心的外賣，還有 旅遊 、 娛樂 、購物、出行，金融等等業務線，那麼這么多復雜的業務根本不可能用同一種開發語言實現。

那麼美團都用到哪些開發語言和技術了呢？下面就根據我的理解詳細說一下。

前端是把產品的核心服務交給用戶的呈現者，它的表述方式、展示形式以及交互邏輯都跟用戶息息相關，都影響著用戶使用產品的體驗，也就是說直接影響產品的用戶留存。

前端開發主要分為三大類型：Andriod、IOS和PC（H5） ,Android開發語言是Kotlin和Java，IOS開發語言是Object-c和Swift，PC（H5）開發語言就比較雜了，有JS、CSS、HTML，還有很多第三方的前端框架，比如Angular.js、vue.js、Bootstrap、JQuery等等。

關於後端的功能，這一點可以說是眾說紛紜，主要需要考慮的是如何實現功能、數據的交互流程和存取、平台的穩定性與性能等。

那麼後端都用到哪些開發語言和技術呢？

根據後端技術選型的標准，後端可選的開發語言和技術是非常多的。

比如Java體系的話，可以選用SpringMVC、Spring cloud、Hibernate，Mybatis、Mysql、Redis、Memcache、zookeeper、Kafka......；

比如Python體系的話，可以選用Django、Flask、Tarnado、Web2py等，中間件都是通用的，Redis，MQ、MySQL、Kafka等都可以用在python體系中；

當然還有PHP、C、Perl等開發語言。

綜上所述，美團這個巨無霸公司，隨著業務線的擴展用到的技術肯定會越來越多，而且越來越復雜，技術快速變革的時代，適者生存的競爭性也會越來越激烈。

俗話說：羅馬不是一日建成的，任何事都不可能一蹴而就，包含技術。在以後的發展中美團也會逐步更新自己的技術和開發語言的。

至少三種語言。後端一種語言（比如Java丶Go丶Python丶PHP等），後端語言及生態比較成熟。下面重點聊前端App開發。

前台兩種語言（Android和iOS是不同的開發環境。比如Android用Java或者Kotlin，iOS採用Object C++或Swift），稱之為Native開發。

當然創業公司可以用一種前端語言寫App前端，這樣就不需要Android和蘋果分兩種語言寫，寫一次代碼可以編譯成Android和iOS的App，現在通行的方案有Vue之類的DOM渲染模式，以及ReactNative方案（RN）。性能上RN優於DOM渲染但低於用Native開發的App。所以美團這種公司，一定是Native方式寫App，但RN是初創項目不錯的選擇。

與RN競爭的還有一種新貴flutter，是google推出來的，但設計原理與RN不同，性能方面優於RN，只是目前生態不夠健全，國內有閑魚app是採用此技術。未來可能會佔一席之地。

最後，其實App開發已經是強努之末，我覺得主流應該是朝PWA和小程序方向發展。

你好，開發譬如美團這種APP，用一種語言是實現不了的，一個APP有安卓和蘋果兩個操作系統，開發能在安卓iOS端應用的APP主流的開發語言和技術是很多的，如後台有JAVA、C++、PHP、Python等多種開發語言，前端有kotlin、HTML、css、jquery、ajax、bootstrap、angular.js、react、vue.js、node.js、swift、object-c等多種語言和框架。

一個APP的開發是需要前端技術和後台技術共同配合完成，這樣的APP不論是功能還是性能都給用戶很好的體驗，單一開發語言畢竟技術支持有限，所以即使能開發出來，APP的用戶體驗也是不理想的。

一般APP有這幾種開發組合模式：1、原生安卓iOS開發，前端：JAVA、kotlin、swift、object-c後台：JAVA、PHP、C++等後台技術，這種模式開發周期長，成本高，性能好；2、混合APP開發即hybrid app，前端以網頁技術為主，穿插原生開發功能，兼具原生APP和web app的優點，如淘寶、微信等應用都是走的這個技術；3、web app，前端純網頁技術，後台為主流開發語言，這種模式開發速度快，成本低，界面體驗可能弱一些。

可見開發一款APP大多數都是多種語言配合完成，謝謝閱讀。

看完之前的評論，依然好奇為什麼一個語言不能完全勝任。

前端跨平台的方案有react native，cordova,flutter等，如果需要兼容開發小程序，h5頁面，可以採用taro來開發，一套代碼，所有平台通吃。

後端的方案有服務端運行時nodejs，大數據背景下運用而生的資料庫mobgodb，緩存解決方案redis，搜索工具elasticsearch，負載均衡ngix，基本上是需要什麼就有什麼

所以總結下來，一句話，一種語言可以實現類似美團這樣的app和小程序。為什麼美團使用的語言那麼多，一大原因估計是美團app開發的早，當時前端技術不成熟，工具沒現在這么多。

使用混合開發與C++ 進行跨平台開發，有好有壞。

C++ 進行跨平台開發

編寫一次，隨處運行。早在 2013 年，Dropbox 就採用上述策略進行移動開發，這背後的想法很簡單：用 C++ 編寫一次代碼，而不是用 Java 和 Objective-C 編寫兩次。那時，整個移動工程團隊相對還比較小，但需要支持快速增長的移動路線圖。因此，公司希望找到一種方法，使這個小團隊可以快速交付大量 Android 和 iOS 代碼。

如今，Dropbox 完全放棄了這個策略，轉而使用各個平台的原生語言（主要是 Swift 和 Kotlin ，這兩種語言在剛開始制定移動策略時還不存在）。

Hybrid App混合開發

Hybrid App主要以JS+Native兩者相互調用為主，從開發層面實現「一次開發，多處運行」的機制，成為真正適合跨平台的開發。Hybrid App兼具了Native App良好用戶體驗的優勢，也兼具了Web App使用HTML5跨平台開發低成本的優勢。

目前已經有眾多Hybrid App開發成功應用，比如美團、愛奇藝、支付寶等知名移動應用，都是採用Hybrid App開發模式。

移動應用開發的方式，目前主要有三種：

幾種模似都可以開發出應用，小應用無所謂，但是大流量應用，對圖形要求高的如 游戲 等原生開發的效果還是最好

支付寶打開很慢，就是因為採用混合開發，使用人多了不如原生開發

不行的哦。任何你看到的應用和網頁，都需要多個語言開發的，大的分比如前端和後端，用的語言都是不一樣的

F. 微信小程序開發和公眾號內嵌H5開發有什麼區別

首選從產品的角度來講

公眾號內嵌H5開發的時候，微信底部會提供相應菜單作為功能的引導入口，最終的頁面還是會把用戶引導到H5頁面，而在用戶體驗方便跟原生APP開發還是有相當大的差距。而微信小程序它提供了豐富的框架組件和API介面供開發者調用，具體包含：界面、視圖、內容、按鈕、導航、多媒體、位置、數據、網路、重力感應等。在這些組件和介面的幫助下，運行在微信上的小程序基本保持和Native APP一樣的流暢度，極大的提高了用戶的體驗。

然後從開發的角度來講

不論是APP、H5,它們的Server端都一樣，所以這里不討論。

之前的開發就是我們講的傳統的前端：html、js、css,加上微信用js提供的一些原生能力，最終的展現形式也是用手機內置瀏覽器（WebView）打開我們的頁面，但是歸根結底都是H5,這種方式我們應該熟悉的不能再熟悉了。小程序我們可以簡單粗暴的理解為RN（React Native），用大白話來講就是用H5寫的程序，最後以Native App的方式來運行，他們的原理都是用JS調用底層Native組件。

G. 跨平台技術；H5和Flutter誰是未來

前言

為什麼跨平台是發展趨勢？

同一個應用，各個「端」獨立開發，不僅開發周期長，而且人員成本高。同時，作為技術人員，也不應該滿足於這種重復、低能的工作狀態。在這樣的形勢下，跨平台的技術方案也受到越來越多人和企業的關注。

本篇文章我將從原理、優缺點等方面為大家分享跨平台技術

一. H5

說到跨平台，沒人不知道H5。不管是在Mac、Windows、Linux、iOS、Android還是其他平台，只要給一個瀏覽器，連「月球」上它都能跑。

1.瀏覽器架構

下面，我們來看看讓H5如此橫行霸道的瀏覽器的架構：

瀏覽器由以上7個部分組成，而「渲染引擎」是性能優化的重中之重，一起了解其中的渲染原理。

2.渲染引擎原理

不同的瀏覽器內核不同，渲染過程會不太一樣，但主要流程還是一致的。

分為下面6步驟：

從以上6步，我們可以總結渲染優化的要點：

以上就是瀏覽器端的內容。但H5作為跨平台技術的載體，是如何與不同平台的App進行交互的呢？這時候JSBridge就該出場了。

3.JSBridge原理

JSBridge，顧名思義，是JS和Native之間的橋梁，用來進行JS和Native之間的通信。

通信分為以下兩個維度：

那麼App內載入H5的過程是什麼樣的呢？

4.App打開H5過程

打開H5分為4個階段：

這四步，對應的過程如上圖所以，我們可以針對性的做性能優化。

5.優缺點分析

下面，我們進行H5的優缺點分析：

優點

缺點

雖然H5目前還存在不足，但隨著PWA、WebAssembly等技術的進步，相信H5在未來能夠得到越來也好的發展。

二.小程序

2018年是微信小程序飛速發展的一年，19年，各大廠商快速跟進，已經有了很大的影響力。下面，我們以微信小程序為例，分析小程序的技術架構。

小程序跟H5一樣，也是基於Webview實現。但它包含View視圖層、App Service邏輯層兩部分，分別獨立運行在各自的WebView線程中。

1.View

可以理解為h5的頁面，提供UI渲染。由WAWebview.js來提供底層的功能,具體如下：

每個窗口都有一個獨立的WebView進程，因此微信限制不能打開超過5個層級的頁面來保障用戶體驗。

2. App Service

提供邏輯處理、數據請求、介面調用。由WAService.js來提供底層的功能,具體如下：

運行環境：

僅有一個WebView進程

3.View & App Service通信

視圖層和邏輯層通過系統層的JSBridage進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層將觸發的事件通知到邏輯層進行業務處理。

4. 優缺點分析

優點

缺點

既然WebView性能不佳，那有沒有更好的方案呢？下面我們看看React Native。

三.React Native

RN的理念是在不同平台上編寫基於React的代碼，實現Learn once, write anywhere。

Virtual DOM在內存中，可以通過不同的渲染引擎生成不同平台下的UI，JS和Native之間通過Bridge通信

1.React Native 工作原理

在 React 框架中，JSX 源碼通過 React 框架最終渲染到了瀏覽器的真實 DOM 中，而在 React Native 框架中，JSX 源碼通過 React Native 框架編譯後，與Native原生的UI組件進行映射，用原生代替DOM元素來渲染，在UI渲染上非常接近Native App。

2.React Native 與Native平台通信

3.優缺點分析

優點

缺點

4.RN展望

雖然RN還存在不足，但RN新版本已經做了如下改進，並且RN團隊也在積極准備大版本重構，能否成為開發者們所信賴的跨平台方案，讓我們拭目以待。

既然React Native在渲染方面還擺脫不了原生，那有沒有一種方案是直接操控GPU，自製引擎渲染呢，我們終於迎來了Flutter！

四.Flutter

Flutter是Google開發的一套全新的跨平台、開源UI框架，支持iOS、Android系統開發，並且是未來新操作系統Fuchsia的默認開發套件。渲染引擎依靠跨平台的Skia圖形庫來實現，依賴系統的只有圖形繪制相關的介面，可以在最大程度上保證不同平台、不同設備的體驗一致性，邏輯處理使用支持AOT的Dart語言，執行效率也比JavaScript高得多。

1.Flutter架構原理

2.Dart優勢

很多人會好奇，為什麼Flutter要用Dart，而不是用JavaScript開發，這里列下Dart的優勢

3.優缺點分析

優點

缺點

H. react native 的項目可以接到釘釘的小程序嗎

如果供應商的信息系統集成認證的，只要供應商與釘釘考勤管理軟體雙方提供介面就可以對接的，前提是工程項目管理軟體有系統對接的能力。就好比市面上的eHR人力資源管理系統大多都能與釘釘的考勤軟體對接一樣。

I. 使用alita 將React Native項目轉化為小程序

1.通過npm全局安裝alita

2.官方文檔說明可以直接通過react native init一份項目直接轉化，不過試了試，有問題，小程序一直報未找到入口文件 app.js，所以盡量使用alita官方提供的examples文件，所以可以clone一份HelloWorldRN，將文件名改為你的項目名就可以了：比如Demo

3.使用命令轉化為小程序

4.安裝相關依賴

5.將Demowp導入到微信開發者工具運行即可！Alita生成的小程序使用了小程序的npm功能， 所以需要在微信開發者工具下構建npm， 工具 --> 構建npm

6.運行效果

github: https://github.com/areslabs/alita

J. 小程序運行時的原理以及它將如何顛覆傳統App

長期以來，移動互聯網界一直在尋找一種既能獲得Native原生的體驗，又可以低門檻快速開發的技術。在這個過程中出現了很多嘗試，例如React Native（RN），RN本質上是輕量化Native開發，在Native基礎上做減法；H5的特點是開發成本較低，可以做到比較靈活，但缺點在基礎信息獲取方面（如地理位置、手機信息、播放器等）和順滑體驗方面無法做到Native的效果；

就在這個背景下，微信小程序也給出了自己的方案，它的做法是在H5的標准上做Native能力的加法，賦予了小程序很多Native的能力，微信通過自行研發的小程序運行時，為小程序提供了大量的API層面能力支持，如地圖、導航、畫布、滾動視圖等方面都能提供支持。

小程序的優越性體現在既保留了H5開發的便利和靈活性，又可以達到媲美Native體驗，配合微信11億用戶的社交網路，越來越開發者選擇微信小程序的技術的。

據小程序團隊透露，目前已經50萬+的開發者在從事實際的開發，小程序已經成為移動互聯網領域「事實」的標准。伴隨著這種趨勢，阿里、網路分別在2017年的8月和2018年的3月啟動了自己的小程序項目，圍繞著支付寶和手機網路APP幾個超級APP在移動互聯網領域再次攻城略地。小程序已然成為近幾年最炙手可熱「現象級」技術。

小程序的出現不是一蹴而就，而是在移動互聯網近10年的業務、場景積累上逐步發展起來的。Web開發具有高效、靈活、門檻低的特點，但弊端在於所有的頁面都依賴瀏覽器的渲染，瀏覽器的能力就是的web研發的上限和邊界。為了克服這個問題，於是便有了JS-Bridge這種方式，將很多常用組件內置到應用中，當內嵌組件足夠多的時候，再做一層封裝，形成了JS-SDK，其本質沒有差別。 

小程序在JS-SDK的基礎上，一方面進一步開放和拓展原生的能力給到Web前端調用，另一方面，頁面渲染（Webview Render）的UI層和邏輯層，使用了兩個獨立的線程。如下圖所示：

小程序運行時本質上是一個處理Web頁面渲染、數據邏輯交互的虛擬機，這個虛擬機提供了豐富的原生能力供小程序調用（API、組件、AI能力等），極大的拓展了Web應用的能力邊界，尤其是在諸如滾動視圖（scrool-view）、導航（navigator）、圖片預覽（cover-image）等組件的提供，使得前端開發人員在使用現有的web前端技術，就可以開發出接近原生體驗的應用。

其實微信可以分成兩部分：即時通訊部分（IM）和小程序的運行渲染引擎（運行時）。小程序的運行的離不開運行時，它作為一個基礎支撐已經深度和微信整合。正是利用了微信11億的巨大的社會協同網路，賦予了小程序方便的轉發、分享能力，為商業應用創造了一個嶄新的藍海，所有人都可以利用的這個平台去更好的觸達、服務客戶。

以往業務部門要發布一些新的功能的時候，用戶必須要主動更新App，而且任何一個局部功能的變化升級需要去重新去應用市場再操作一次，成本很高。由於並不是所有的用戶都去更新，造成IT團隊需要花費大力氣去維護多個不同的版本。這種方式造成用巨大的資源浪費和用戶體驗的不便利。

如果用小程序，這個問題會迎刃而解。首先， 小程序可以獨立的去更新，App作為了一個載體，很長的一段時間內，不需要被頻繁更新。其次，每個小程序可以按照業務具體需要去獨立發布各自的版本，不同的小程序之間的更新升級彼此獨立、互不幹擾。最後，由於小程序運行的沙箱機制，保證了不論是哪個小程序出現Bug、崩潰等情況，不會拖累應用本身 ，即便出現嚴重問題，也不過就是把它下線即可。

凡泰小程序運行時是面向全行業的「小程序解決方案」，它借鑒了被大家廣發熟知的微信小程序概念，在技術上對微信小程序做兼容，開發工程師在現有的技能上可以直接上手。企業可以基於這套合規、安全的小程序運行時，配合整個小程序的上下架運營平台，自己就成為了一個「微信」。真正把這些技術賦能於現有的業務，App的更新也不再束手束腳，既松綁了業務，也松綁了IT研發。

並不會。首先，小程序的體驗和原生幾乎沒有差別，對用戶的來說是「透明」，不細致觀察，用戶甚至都不知道自己在使用小程序。其次，因為用戶其實每天都在接觸各種各樣的小程序，已經實際上已經嵌入到我們生活的方方面面。比如用戶在使用微信坐地鐵、買電影票就在用小程序；打開淘寶購物，許多商鋪就是小程序；打開網路搜索，出現的還是小程序。

互聯網公司實際上已經對用戶完成了「教育」和普及。接下來券商可以考慮如何利用好小程序的技術，結合小程序的優勢、特點，逐步把現有App的一些業務切換到小程序上來。每個業務單元可以基於小程序進行敏捷迭代，好的產品離不開10000小時定律，讓產品團隊可以不斷的圍繞業務場景去打磨、優化，以提供更好的體驗和服務。同時藉助小程序一次開發多次上架的特點，更好去利用微信的社交網路優勢，在獲客、觸達、營銷方面可以做更多的創新和嘗試。

任何事物的發展都具有周期性，顯然小程序的這波紅利已經到來， 今天的創新可能就是明天的標配。當務之急，盡早上船拿到「船票」。