可選的小程序框架

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

?首先，就要排除?Taro ，因?yàn)闆](méi)用React開(kāi)發(fā)過(guò)項(xiàng)目。只有Vue技術(shù)棧。

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

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

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

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

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

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

# 全局安裝

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

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

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

# 進(jìn)入項(xiàng)目目錄

$ cd my-project

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

$ npm run dev:mp-weixin

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

$ npm run build:mp-weixin

使用Webstorm來(lái)開(kāi)發(fā)配置

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

1. 創(chuàng)建項(xiàng)目

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

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

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

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

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

?這里我選擇了：默認(rèn)模板,?默認(rèn)模版使用的vue2，

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

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

2.運(yùn)行

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

? ? ? ?在webstorm terminal上運(yùn)行項(xiàng)目，僅限手機(jī)端web效果：

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

注：

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

3. HBuilder 配置

3.1 HBuilderX 安裝

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

3.2 DCloud開(kāi)發(fā)者認(rèn)證

運(yùn)行打包之前，需要使用HBuilder的開(kāi)發(fā)都需要，認(rèn)證手機(jī)號(hào)。認(rèn)證頁(yè)面：

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

3.3 導(dǎo)入項(xiàng)目

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

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

• 導(dǎo)入項(xiàng)目2： 官方hello-uniapp?DEMO項(xiàng)目

下載源碼：

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有時(shí)候打開(kāi)不了，備用：

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

4.打包 Android APK

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

4.1 配置項(xiàng)目的Appid(必須）

當(dāng)前項(xiàng)目第一次打包，沒(méi)有配置AppID，點(diǎn)擊?Modify->? manifest.json。

配置一個(gè)由DClound自己賬號(hào)下生成一個(gè)應(yīng)該的AppID。

在登錄情況下點(diǎn)擊：【Reacquire】會(huì)自動(dòng)生成。

然后保存再回到打包界面

4.2 本地配置好APK簽名證書(shū)文件，導(dǎo)入證書(shū)與對(duì)應(yīng)密碼。

4.3 遇到打包問(wèn)題：讀通訊錄權(quán)限對(duì)象

?解決：

將Read_contacts權(quán)限注釋?

5.Android APK 安裝到手機(jī)：

打包完成之后，打開(kāi)APK目錄，右鍵選擇安裝到真實(shí)手機(jī)上。?

?

6.打包成微信小程序

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

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

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

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

5.2 配置微信開(kāi)發(fā)者工具安裝目錄之后，報(bào)端口錯(cuò)誤時(shí)

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

5.3 小程序運(yùn)行

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

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

7. 微信小程序項(xiàng)目打包上傳

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

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

7.2 正式版打包

Build->Mini-program-Wechat->Build

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

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

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

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

這個(gè)最簡(jiǎn)單了，只要有瀏覽器在就OK

?打開(kāi)運(yùn)行完成。

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

webstorm用習(xí)慣了，

基于webstorm+hbuilderX兩個(gè)編譯器結(jié)合開(kāi)發(fā)uni-app程序

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

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

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

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

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

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

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

此方案運(yùn)行與打包在：

HBuilder X

更多詳情參考：

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

擴(kuò)展

區(qū)分PC端與移動(dòng)端技術(shù)：

PC端? ? ： VUE+elementui

移動(dòng)端? ：?Uni-app小程序 + Vant weapp組件

uni-app

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

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

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

Nvue

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

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

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

weex簡(jiǎn)介

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

nvue和vue的區(qū)別：

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

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

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

MintUI

Mint UI 是餓了么前端團(tuán)隊(duì)出品的移動(dòng)端 UI 組件庫(kù)。

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

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

Mint UI 組件庫(kù)特性

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

Vant

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

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

參考：

Taro vs uni-app選型對(duì)比經(jīng)歷 - 簡(jiǎn)書(shū)文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-450383.html

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