可選的小程序框架

我們主要分析了如下小程序開發(fā)框架，主要包括：

?首先，就要排除?Taro ，因為沒用React開發(fā)過項目。只有Vue技術棧。

本人選型方案 ：Uni-app （NVue ）+? Vue2?

結合本人自身知識系統(tǒng)（Vue2,Webstorm）,綜合相關框架了解，選擇了以下方案：

開發(fā)環(huán)境：HBuilder X? +?Webstorm +微信開發(fā)者工具（微信小程序必須要用）

框? ? ? ?架：Uni-app （NVue ）+? Vue2??

?uni-app創(chuàng)建項目：?

vue-cli腳手架創(chuàng)建，通過cmd命令行創(chuàng)建。

# 全局安裝

vue-cli $ npm install -g @vue/cli

# 創(chuàng)建uni-app項目

$ vue create -p dcloudio/uni-preset-vue my-project

# 進入項目目錄

$ cd my-project

# 運行到微信小程序，調(diào)試模式

$ npm run dev:mp-weixin

# 發(fā)行到微信小程序

$ npm run build:mp-weixin

使用Webstorm來開發(fā)配置

webstorm開發(fā)的uniapp + hbuilderx進行app?小程序打包

1. 創(chuàng)建項目

• 使用vue2 CLI創(chuàng)建uni-app項目

vue2環(huán)境，node.js,?cli腳手架必須要有，這里就不詳說了。

模版名字這個是固定，必須要輸入 : dcloudio/uni-preset-vue

創(chuàng)建一個新目錄，window終端cmd執(zhí)行以下語句

vue create -p dcloudio/uni-preset-vue my-project
（如果已有項目，cd后直接 npm install ）

?這里我選擇了：默認模板,?默認模版使用的vue2，

如果選擇了：Hello uni-app?模版。?使用的vue3

創(chuàng)建uniapp vue項目完成。

2.運行

這樣通過終端創(chuàng)建的uni-app項目，在webstorm上node_module目錄與常規(guī)web項目是一樣，整個開發(fā)期間都可以在webstorm上直接調(diào)試運行：

? ? ? ?在webstorm terminal上運行項目，僅限手機端web效果：

????????????????? npm run dev:h5?

注：

如果，想看微信小程序或者android app端的效果，那么就要HBuiler來運行了，通過上面方式創(chuàng)建的項目也是可以正常在HBuiler運行的。接下來介紹要結合HBuilder來進行編譯運行打包。

3. HBuilder 配置

3.1 HBuilderX 安裝

官網(wǎng)下載，并安裝，安裝完成之后進入Dcloud注冊一個賬號 ：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流應用、HTML5、小程序開發(fā)、跨平臺App、多端框架uni-app多端開發(fā),開發(fā)一次同時生成App、小程序、H5https://dcloud.io/

3.2 DCloud開發(fā)者認證

運行打包之前，需要使用HBuilder的開發(fā)都需要，認證手機號。認證頁面：

開發(fā)者中心https://dev.dcloud.net.cn/pages/user/realname

3.3 導入項目

導入官方的Demo項目源碼，或者上面創(chuàng)建的項目。（File->import->選擇項目根目錄）

• 導入項目1:? 我這里是：導入上面指令創(chuàng)建項目

• 導入項目2： 官方hello-uniapp?DEMO項目

下載源碼：

GitHub - dcloudio/hello-uniapp: uni-app框架演示示例uni-app框架演示示例. Contribute to dcloudio/hello-uniapp development by creating an account on GitHub.https://github.com/dcloudio/hello-uniapp

注：

GitHub有時候打開不了，備用：

hello-uniapp: Uniapp官方demohttps://gitee.com/wyf13418531395/hello-uniapp

4.打包 Android APK

完成上面步驟3項目導入之后，在HBuilerX，打包原生APP apk安裝包：?Build=>Mobile App Cloud packaging。

4.1 配置項目的Appid(必須）

當前項目第一次打包，沒有配置AppID，點擊?Modify->? manifest.json。

配置一個由DClound自己賬號下生成一個應該的AppID。

在登錄情況下點擊：【Reacquire】會自動生成。

然后保存再回到打包界面

4.2 本地配置好APK簽名證書文件，導入證書與對應密碼。

4.3 遇到打包問題：讀通訊錄權限對象

?解決：

將Read_contacts權限注釋?

5.Android APK 安裝到手機：

打包完成之后，打開APK目錄，右鍵選擇安裝到真實手機上。?

?

6.打包成微信小程序

首先：下載并安裝微信開發(fā)者工具，然后這個開發(fā)者工具需要到其他網(wǎng)上注冊一個開發(fā)者賬號，否則運行不程序。

在HBuilerX打開上面用腳手架創(chuàng)建uniapp或者用官方的hello uniapp項目，

5.1 配置小程序開發(fā)者工具

如果是第一次運行微信小程序，這里HBuilder需要配置一下開發(fā)者工具安裝目錄exe。這樣才能自動打開對應微信小程序界面。

5.2 配置微信開發(fā)者工具安裝目錄之后，報端口錯誤時

在開發(fā)者工具打開：服務端口

5.3 小程序運行

打開成功，在微信小程序開發(fā)者工具界面如下：

這種情況下的修改，可以實時熱更新到微信開發(fā)者中。

7. 微信小程序項目打包上傳

7.1小程序開發(fā)版打包

按上面步驟之后，HBuilder會自動發(fā)布一個開發(fā)版的小程序項目，在不需要修改代碼情況下，可以直接用微信開發(fā)工具打開此項目運行查看效果。

7.2 正式版打包

Build->Mini-program-Wechat->Build

7.3 之后在unpackage->dist->build目錄下會生成mp-weixin，?此目錄就是微信小程序項目

區(qū)別dev版，build代碼壓縮過。項目包更小。

8.使用微信開發(fā)者工具打開上面目錄項目，點擊上傳，然后等待微信客服審核。

8.打包PC?web網(wǎng)頁

這個最簡單了，只要有瀏覽器在就OK

?打開運行完成。

9. HBuilderX?與WebStorm配合開發(fā)uni_app

webstorm用習慣了，

基于webstorm+hbuilderX兩個編譯器結合開發(fā)uni-app程序

以上面的操作方案(腳手架創(chuàng)建?Webstorm?開發(fā) + HBuilder打包）：

用cmd指令腳手架創(chuàng)建uniapp項目，然后在webstrom上可以運行html5調(diào)試并開發(fā)。

但是打包到小程序與Android APP（apk）只能的用HBuilder。

最新版的Hbuilder X創(chuàng)建uni-app項目:

【采用Vite方法創(chuàng)建】導致無法生成package.json文件,且不會自動安裝node_modules的庫,為此【Hbuilder X】創(chuàng)建的uni-app,無法在webstorm正常編譯！

為了同時支持webstorm+hbuilderX配合開發(fā)編譯,首先請使用vue-cli3的腳手架創(chuàng)建一個Vue3 的初始項目,然后把其中的【package.json】文件拷貝到uni-app,在執(zhí)行【npm install】此時在webstorm即可正常開發(fā)uni-app了

注意：雖然webstorm無法正常編譯運行uni-app項目,但是對于【Ctrl+B】跳轉(zhuǎn)路徑來說,webstorm要方便很多，其次就是在【package.json】定義ESlint的規(guī)則，要方便很多！

此方案運行與打包在：

HBuilder X

更多詳情參考：

Webstorm 玩轉(zhuǎn)uni-app 項目 微信小程序 移動端項目方案_Lan.W的博客-CSDN博客

擴展

區(qū)分PC端與移動端技術：

PC端? ? ： VUE+elementui

移動端? ：?Uni-app小程序 + Vant weapp組件

uni-app

uni-app是 DCloud 出品的新一代跨端框架，可以說是目前跨端數(shù)最多的框架之一了，目前支持發(fā)布到：App（Android/iOS）、H5、小程序（微信小程序/支付寶小程序/百度小程序/字節(jié)跳動小程序），目前市面上類似的框架還有：Taro（京東出品）、Megalo（網(wǎng)易出品）。

uni-app 的 nvue 說白了就是 weex 的那一套東西，uni-app App端內(nèi)置了一個基于 weex?的SDK 改進的原生渲染引擎，提供并實現(xiàn)了 App 端了原生渲染能力。

weex 支持的東西，在 nvue 里大多都是支持的，所以這里就不詳細講述 weex 的相關組件和 api 調(diào)用，只講述一些在實際開發(fā)過程中遇到的一些小問題。

Nvue

是native vue的縮寫，是uni-app的一種渲染方式。

nvue用的是weex方式的原生渲染，nvue的css寫法受限，nvue頁面只能使用flex布局，不支持其他布局方式，如果不開發(fā)APP，那么不需要使用nvue；Weex渲染：Weex是使用流行的web開發(fā)體驗來開發(fā)高性能原生應用的框架。

而vue文件用的是webview渲染，Webview是一個基于webkit的引擎，可以解析DOM元素，展示html頁面的控件，他和瀏覽器展示頁面的原理是相同的，所以可以把它當做瀏覽器看待。

weex簡介

Weex 是一套簡單易用的跨平臺開發(fā)方案，能以 web 的開發(fā)體驗構建高性能、可擴展的 native 應用，為了做到這些，Weex 與 Vue 合作，使用 Vue 作為上層框架，并遵循 W3C 標準實現(xiàn)了統(tǒng)一的 JSEngine 和 DOM API，這樣一來，你甚至可以使用其他框架驅(qū)動 Weex，打造三端一致的 native 應用。

nvue和vue的區(qū)別：

nvue是native vue的縮寫，是uni-app的一種渲染方式。

nvue用的是weex方式的原生渲染，nvue的css寫法受限，nvue頁面只能使用flex布局，不支持其他布局方式，如果不開發(fā)APP，則不需要適用nvue。weex渲染：weex是使用流行的web開發(fā)體驗來開發(fā)高性能原生應用的框架。

vue文件用的是webview渲染，Webview是一個基于webkit的引擎，可以解析DOM元素，展示html頁面的控件，他和瀏覽器展示頁面的原理是相同的，所以可以把它當做瀏覽器看待。

MintUI

Mint UI 是餓了么前端團隊出品的移動端 UI 組件庫。

基于 Vue 2.0 構建，繼桌面 UI 組件庫 Element UI 后又一個優(yōu)秀的開源 UI 組件庫，包含豐富的 CSS 和 JS 組件，能夠快速構建出風格統(tǒng)一的頁面，提升開發(fā)效率。

和Bootstrap一樣對原生的HTML標簽進行了封裝，進行了美化，讓我們能夠?qū)Ｗ⒂跇I(yè)務邏輯而不是UI界面。

Mint UI 組件庫特性

• UI 設計風格中性，不需要改樣式就能適應很多產(chǎn)品項目
• 輕量化。依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化，即便引入全部組件，壓縮后的文件體積也僅有 30kb 左右（gzip）
• 性能優(yōu)秀。各種動效采用 CSS3 處理，避免瀏覽器進行不必要的重繪和重排，從而獲得流暢順滑的體驗
• 按需加載組件。支持只加載聲明過的組件及其樣式文件，中小項目能大大減少打包體積
• 官方文檔：mint-ui documentation

Vant

有贊前端開發(fā)團隊推出的一款基于VUe的移動端UI框架，和Bootstrap一樣對原生的HTML標簽進行了封裝，進行了美化，讓我們能夠?qū)Ｗ⒂跇I(yè)務邏輯而不是UI界面。（通常用于電商界面制作）

官方文檔：Vant 2 - Mobile UI Components built on Vue

參考：

Taro vs uni-app選型對比經(jīng)歷 - 簡書文章來源地址http://www.zghlxwxcb.cn/news/detail-414204.html

到了這里，關于在 WebStorm 中開發(fā) uni-app - 用vue2實現(xiàn)手機APP(apk) + 微信小程序項目開發(fā)方案 webstorm開發(fā)的uniapp + hbuilderx進行app?小程序打包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！