建站
咨詢
售后
建站咨詢
新聞中心
- 框架開發(fā)
- Taro
- 第一步: 安裝開發(fā)工具
- 第二步: 初始化項目
- 第三步: 安裝依賴
- 第四步: 構(gòu)建目標代碼
- 第四步: 開發(fā)者工具打開項目
- mpvue
- 第一步: 初始化項目
- 第二步: 安裝依賴
- 第三步: 構(gòu)建目標代碼
- 第四步: 開發(fā)者工具打開項目
- WePY
- 第一步: 安裝開發(fā)工具
- 第二步: 初始化項目
- 第三步: 安裝依賴
- 第四步: 構(gòu)建目標代碼
- 第五步: 開發(fā)者工具預(yù)覽
- Okam
- 第一步：安裝 CLI 工具
- 第二步：初始化項目
- 第三步：構(gòu)建目標代碼
- 第四步: 開發(fā)者工具打開項目
- Taro
框架開發(fā)
小程序的開發(fā)除去常見的原生小程序語法的開發(fā)模式，還可以應(yīng)用層框架開發(fā)，用類現(xiàn)代框架 (vue/react) 的語法去開發(fā)小程序，提升開發(fā)體驗和解決跨平臺的問題。本文主要講解如何用常見的小程序框架開發(fā)百度小程序。
創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)，網(wǎng)站設(shè)計，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十多年品質(zhì)，值得信賴！
- 由于開發(fā)者工具會 watch 項目文件修改，如果出現(xiàn)三方框架構(gòu)建時變更大量文件而導(dǎo)致無法編譯的情況，請嘗試在三方框架的構(gòu)建結(jié)束后重新打開項目。
- 當(dāng)使用第三方框架生成百度小程序的代碼帶有 source-map 時，建議關(guān)閉第三方框架生成代碼的配置；否則開啟 source-map 可能會引起編譯失敗。
Taro
第一步: 安裝開發(fā)工具
安裝 Taro 開發(fā)工具 @tarojs/cli;
使用 npm 或者 yarn 的方式都可以獲取，也可以直接使用 npx(在 npm 5.2+ 下)
$ npm install -g @tarojs/cli$ yarn global add @tarojs/cli
第二步: 初始化項目
使用命令創(chuàng)建模板項目
$ taro init swan-taro
也可以參考 Taro 開發(fā)百度小程序示例
第三步: 安裝依賴
進入項目目錄，安裝依賴
$ npm install
第四步: 構(gòu)建目標代碼
去掉 —watch 將不會監(jiān)聽文件修改，并會對代碼進行壓縮打包
# npm script$ npm run dev:swan // 開發(fā)模式$ npm run build:swan // 線上模式# 僅限全局安裝$ taro build --type swan --watch$ taro build --type swan
第四步: 開發(fā)者工具打開項目
可以通過兩種方式打開項目：
方式一：使用開發(fā)者工具打開生成的 dist 目錄，進行調(diào)試、預(yù)覽、上傳；
方式二：使用 2.8.1 及以上版本開發(fā)者工具打開項目目錄，同時進行以下配置，配置完成后，就可以在開發(fā)者工具中開發(fā)、調(diào)試、預(yù)覽、上傳。
npm run build:swan- 在
project.swan.json文件中增加配置"smartProgramRoot": "dist"（如果已有此配置，請忽略） - 在項目信息面板中設(shè)置如下自定義預(yù)處理指令。
- 編譯前預(yù)處理:
npm run dev:swan并勾選 異步執(zhí)行 - 上傳前預(yù)處理:
npm run build:swan
- 編譯前預(yù)處理:
- 重新打開項目
mpvue
第一步: 初始化項目
使用示例項目:
$ git clone [email protected]:hucq/mpvue-platform-sample.git
也可以參考 mpvue 開發(fā)百度小程序示例
第二步: 安裝依賴
進入項目目錄，安裝依賴
$ npm install$ npm install mpvue@beta mpvue-loader@beta mpvue-template-compiler@beta
第三步: 構(gòu)建目標代碼
$ npm run dev:swan // 開發(fā)模式$ npm run build:swan // 線上模式
第四步: 開發(fā)者工具打開項目
可以通過兩種方式打開項目：
方式一：使用開發(fā)者工具打開生成的 dist/swan 目錄，進行調(diào)試、預(yù)覽、上傳，
方式二：使用 2.8.1 及以上版本開發(fā)者工具打開項目目錄，同時進行以下配置，配置完成后，就可以在開發(fā)者工具中開發(fā)、調(diào)試、預(yù)覽、上傳。
npm run build:swan- 在
project.swan.json文件中增加配置"smartProgramRoot": "dist/swan"（如果已有此配置，請忽略） - 在項目信息面板中設(shè)置如下自定義預(yù)處理指令。
- 編譯前預(yù)處理:
npm run dev:swan并勾選 異步執(zhí)行 - 上傳前預(yù)處理:
npm run build:swan
- 編譯前預(yù)處理:
- 點擊編譯按鈕
WePY
第一步: 安裝開發(fā)工具
安裝 WePY 開發(fā)工具 wepy-cli;
$ npm install -g [email protected]
第二步: 初始化項目
使用命令創(chuàng)建模板項目
$ wepy init standard
也可以參考 WePY 開發(fā)百度小程序示例
第三步: 安裝依賴
進入項目目錄，安裝依賴
$ npm install
第四步: 構(gòu)建目標代碼
注：去掉 —watch 將不會監(jiān)聽文件修改，并會對代碼進行壓縮打包
# 僅限全局安裝$ wepy build -o baidu --watch$ wepy build -o baidu
第五步: 開發(fā)者工具預(yù)覽
在百度開發(fā)者工具中選擇打開項目目錄下的dist目錄，就可以在開發(fā)者工具中預(yù)覽項目。
Okam
第一步：安裝 CLI 工具
- Node 安裝（要求
Node >=8 && NPM >= 3），具體安裝可以到官網(wǎng)下載； - CLI 工具安裝:
npm install okam-cli -g
第二步：初始化項目
okam init my-projectcd my-projectnpm install
第三步：構(gòu)建目標代碼
| 代碼 | 說明 |
|---|---|
npm run dev |
帶 watch 開發(fā)模式 |
npm run dev:clean |
刪掉構(gòu)建產(chǎn)物（不包括項目配置文件）并重新構(gòu)建且?guī)?watch 開發(fā)模式 |
npm run dev:server |
帶 watch && 開發(fā) Server 開發(fā)模式 |
npm run build |
刪掉構(gòu)建重新構(gòu)建（沒有 watch && 開發(fā) Server） |
npm run prod |
生產(chǎn)環(huán)境構(gòu)建 |
第四步: 開發(fā)者工具打開項目
可以通過兩種方式打開項目：
方式一：使用開發(fā)者工具打開生成的 dist 目錄，進行調(diào)試、預(yù)覽、上傳，
方式二：使用 2.8.1 及以上版本開發(fā)者工具打開項目目錄，同時進行以下配置，配置完成后，就可以在開發(fā)者工具中開發(fā)、調(diào)試、預(yù)覽、上傳。
npm run prod- 在
project.swan.json文件中增加配置"smartProgramRoot": "dist"（如果已有此配置，請忽略） - 在項目信息面板中設(shè)置如下自定義預(yù)處理指令。
- 編譯前預(yù)處理:
npm run dev并勾選 異步執(zhí)行 - 上傳前預(yù)處理:
npm run prod
- 編譯前預(yù)處理:
- 點擊編譯按鈕
更多關(guān)于 Okam 使用，可以參考 Okam 文檔。
新聞標題：創(chuàng)新互聯(lián)百度小程序教程：框架開發(fā)
瀏覽地址：http://www.fisionsoft.com.cn/article/djodogs.html
