• 框架開(kāi)發(fā)
  • Taro
    • 第一步: 安裝開(kāi)發(fā)工具
    • 第二步: 初始化項(xiàng)目
    • 第三步: 安裝依賴(lài)
    • 第四步: 構(gòu)建目標(biāo)代碼
    • 第四步: 開(kāi)發(fā)者工具打開(kāi)項(xiàng)目
  • mpvue
    • 第一步: 初始化項(xiàng)目
    • 第二步: 安裝依賴(lài)
    • 第三步: 構(gòu)建目標(biāo)代碼
    • 第四步: 開(kāi)發(fā)者工具打開(kāi)項(xiàng)目
  • WePY
    • 第一步: 安裝開(kāi)發(fā)工具
    • 第二步: 初始化項(xiàng)目
    • 第三步: 安裝依賴(lài)
    • 第四步: 構(gòu)建目標(biāo)代碼
    • 第五步: 開(kāi)發(fā)者工具預(yù)覽
  • Okam
    • 第一步：安裝 CLI 工具
    • 第二步：初始化項(xiàng)目
    • 第三步：構(gòu)建目標(biāo)代碼
    • 第四步: 開(kāi)發(fā)者工具打開(kāi)項(xiàng)目

框架開(kāi)發(fā)

小程序的開(kāi)發(fā)除去常見(jiàn)的原生小程序語(yǔ)法的開(kāi)發(fā)模式，還可以應(yīng)用層框架開(kāi)發(fā)，用類(lèi)現(xiàn)代框架 (vue/react) 的語(yǔ)法去開(kāi)發(fā)小程序，提升開(kāi)發(fā)體驗(yàn)和解決跨平臺(tái)的問(wèn)題。本文主要講解如何用常見(jiàn)的小程序框架開(kāi)發(fā)百度小程序。

創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專(zhuān)業(yè)的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十多年品質(zhì)，值得信賴(lài)！

• 由于開(kāi)發(fā)者工具會(huì) watch 項(xiàng)目文件修改，如果出現(xiàn)三方框架構(gòu)建時(shí)變更大量文件而導(dǎo)致無(wú)法編譯的情況，請(qǐng)嘗試在三方框架的構(gòu)建結(jié)束后重新打開(kāi)項(xiàng)目。
• 當(dāng)使用第三方框架生成百度小程序的代碼帶有 source-map 時(shí)，建議關(guān)閉第三方框架生成代碼的配置；否則開(kāi)啟 source-map 可能會(huì)引起編譯失敗。

Taro

第一步: 安裝開(kāi)發(fā)工具

安裝 Taro 開(kāi)發(fā)工具 @tarojs/cli;
使用 npm 或者 yarn 的方式都可以獲取，也可以直接使用 npx(在 npm 5.2+ 下)

 
 
 

  
  
  
 $ npm install -g @tarojs/cli
  
  
  
 $ yarn global add @tarojs/cli
 
 
 

第二步: 初始化項(xiàng)目

使用命令創(chuàng)建模板項(xiàng)目

 
 
 

  
  
  
 $ taro init swan-taro
 
 
 

也可以參考 Taro 開(kāi)發(fā)百度小程序示例

第三步: 安裝依賴(lài)

進(jìn)入項(xiàng)目目錄，安裝依賴(lài)

 
 
 

  
  
  
 $ npm install
 
 
 

第四步: 構(gòu)建目標(biāo)代碼

去掉 —watch 將不會(huì)監(jiān)聽(tīng)文件修改，并會(huì)對(duì)代碼進(jìn)行壓縮打包

 
 
 

  
  
  
 # npm script
  
  
  
 $ npm run dev:swan // 開(kāi)發(fā)模式
  
  
  
 $ npm run build:swan // 線上模式
  
  
  
 # 僅限全局安裝
  
  
  
 $ taro build --type swan --watch
  
  
  
 $ taro build --type swan
 
 
 

第四步: 開(kāi)發(fā)者工具打開(kāi)項(xiàng)目

可以通過(guò)兩種方式打開(kāi)項(xiàng)目：
方式一：使用開(kāi)發(fā)者工具打開(kāi)生成的 dist 目錄，進(jìn)行調(diào)試、預(yù)覽、上傳；
方式二：使用 2.8.1 及以上版本開(kāi)發(fā)者工具打開(kāi)項(xiàng)目目錄，同時(shí)進(jìn)行以下配置，配置完成后，就可以在開(kāi)發(fā)者工具中開(kāi)發(fā)、調(diào)試、預(yù)覽、上傳。

1. npm run build:swan
2. 在 project.swan.json文件中增加配置 "smartProgramRoot": "dist"（如果已有此配置，請(qǐng)忽略）
3. 在項(xiàng)目信息面板中設(shè)置如下自定義預(yù)處理指令。
   • 編譯前預(yù)處理: npm run dev:swan 并勾選 異步執(zhí)行
   • 上傳前預(yù)處理: npm run build:swan
4. 重新打開(kāi)項(xiàng)目

mpvue

第一步: 初始化項(xiàng)目

使用示例項(xiàng)目:

 
 
 

  
  
  
 $ git clone git@github.com:hucq/mpvue-platform-sample.git
 
 
 

也可以參考 mpvue 開(kāi)發(fā)百度小程序示例

第二步: 安裝依賴(lài)

進(jìn)入項(xiàng)目目錄，安裝依賴(lài)

 
 
 

  
  
  
 $ npm install
  
  
  
 $ npm install mpvue@beta mpvue-loader@beta mpvue-template-compiler@beta
 
 
 

第三步: 構(gòu)建目標(biāo)代碼

 
 
 

  
  
  
 $ npm run dev:swan // 開(kāi)發(fā)模式
  
  
  
 $ npm run build:swan // 線上模式
 
 
 

第四步: 開(kāi)發(fā)者工具打開(kāi)項(xiàng)目

可以通過(guò)兩種方式打開(kāi)項(xiàng)目：
方式一：使用開(kāi)發(fā)者工具打開(kāi)生成的 dist/swan 目錄，進(jìn)行調(diào)試、預(yù)覽、上傳，
方式二：使用 2.8.1 及以上版本開(kāi)發(fā)者工具打開(kāi)項(xiàng)目目錄，同時(shí)進(jìn)行以下配置，配置完成后，就可以在開(kāi)發(fā)者工具中開(kāi)發(fā)、調(diào)試、預(yù)覽、上傳。

1. npm run build:swan
2. 在project.swan.json文件中增加配置 "smartProgramRoot": "dist/swan"（如果已有此配置，請(qǐng)忽略）
3. 在項(xiàng)目信息面板中設(shè)置如下自定義預(yù)處理指令。
   • 編譯前預(yù)處理: npm run dev:swan 并勾選 異步執(zhí)行
   • 上傳前預(yù)處理: npm run build:swan
4. 點(diǎn)擊編譯按鈕

WePY

第一步: 安裝開(kāi)發(fā)工具

安裝 WePY 開(kāi)發(fā)工具 wepy-cli;

 
 
 

  
  
  
 $ npm install -g wepy-cli@1.7.3-alpha6
 
 
 

第二步: 初始化項(xiàng)目

使用命令創(chuàng)建模板項(xiàng)目

 
 
 

  
  
  
 $ wepy init standard
 
 
 

也可以參考 WePY 開(kāi)發(fā)百度小程序示例

第三步: 安裝依賴(lài)

進(jìn)入項(xiàng)目目錄，安裝依賴(lài)

 
 
 

  
  
  
 $ npm install
 
 
 

第四步: 構(gòu)建目標(biāo)代碼

注：去掉 —watch 將不會(huì)監(jiān)聽(tīng)文件修改，并會(huì)對(duì)代碼進(jìn)行壓縮打包

 
 
 

  
  
  
 # 僅限全局安裝
  
  
  
 $ wepy build -o baidu --watch
  
  
  
 $ wepy build -o baidu
 
 
 

第五步: 開(kāi)發(fā)者工具預(yù)覽

在百度開(kāi)發(fā)者工具中選擇打開(kāi)項(xiàng)目目錄下的dist目錄，就可以在開(kāi)發(fā)者工具中預(yù)覽項(xiàng)目。

Okam

第一步：安裝 CLI 工具

• Node 安裝（要求 Node >=8 && NPM >= 3），具體安裝可以到官網(wǎng)下載；
• CLI 工具安裝:

 
 
 

  
  
  
npm install okam-cli -g
 
 
 

第二步：初始化項(xiàng)目

 
 
 

  
  
  
okam init my-project
  
  
  
cd my-project
  
  
  
npm install
 
 
 

第三步：構(gòu)建目標(biāo)代碼

代碼	說(shuō)明
npm run dev	帶 watch 開(kāi)發(fā)模式
npm run dev:clean	刪掉構(gòu)建產(chǎn)物（不包括項(xiàng)目配置文件）并重新構(gòu)建且?guī)?watch 開(kāi)發(fā)模式
npm run dev:server	帶 watch && 開(kāi)發(fā) Server 開(kāi)發(fā)模式
npm run build	刪掉構(gòu)建重新構(gòu)建（沒(méi)有 watch && 開(kāi)發(fā) Server）
npm run prod	生產(chǎn)環(huán)境構(gòu)建

第四步: 開(kāi)發(fā)者工具打開(kāi)項(xiàng)目

可以通過(guò)兩種方式打開(kāi)項(xiàng)目：
方式一：使用開(kāi)發(fā)者工具打開(kāi)生成的 dist 目錄，進(jìn)行調(diào)試、預(yù)覽、上傳，
方式二：使用 2.8.1 及以上版本開(kāi)發(fā)者工具打開(kāi)項(xiàng)目目錄，同時(shí)進(jìn)行以下配置，配置完成后，就可以在開(kāi)發(fā)者工具中開(kāi)發(fā)、調(diào)試、預(yù)覽、上傳。

1. npm run prod
2. 在 project.swan.json文件中增加配置 "smartProgramRoot": "dist"（如果已有此配置，請(qǐng)忽略）
3. 在項(xiàng)目信息面板中設(shè)置如下自定義預(yù)處理指令。
   • 編譯前預(yù)處理: npm run dev 并勾選 異步執(zhí)行
   • 上傳前預(yù)處理: npm run prod
4. 點(diǎn)擊編譯按鈕

更多關(guān)于 Okam 使用，可以參考 Okam 文檔。

標(biāo)題名稱(chēng)：創(chuàng)新互聯(lián)百度小程序教程：框架開(kāi)發(fā)
標(biāo)題URL：http://www.5511xx.com/article/djodogs.html