【今日幸運色】項目帶你快速完成 Taro 小程序開發和微信小程序發佈

掃碼可查看小程序

官方文檔

• taro 4.x
• taro-ui

項目開發步驟

温馨提示

• Taro 項目基於 node，請確保已具備較新的 node 環境（>=16.20.0）。
• 由於 Taro 部分能力使用 Rust 開發，在 Windows 上，請確保安裝了 Microsoft Visual C++ Redistributable。點擊查看
• 在 macOS 或類 Unix 系統中，當你遇到 permission denied 錯誤時，通常是因為你沒有足夠的權限來執行某個操作：sudo chown -R [用户名] [文件路徑]，例如 sudo chown -R admin /Users/admin/Desktop/taro-applet/

1. 項目初始化

方式一

1. 需要使用 npm 或者 yarn 全局安裝 @tarojs/cli

   npm install -g @tarojs/cli

   yarn global add @tarojs/cli

   pnpm install -g @tarojs/cli

温馨提示

• 因權限問題造成的安裝失敗，需要在命令前面加 sudo
• 可以使用 npm info 查看 Taro 版本信息：npm info @tarojs/cli
  

2. 初始化

   taro init myApp

   
   初始化時根據自己的需求進行選擇，建議選擇CLI 內置默認模版，因為其他模版可能會有demo報錯的情況。

方式二

npm 5.2+ 也可在不全局安裝的情況下使用 npx 創建模板項目，初始化如下：

npx @tarojs/cli init myApp

項目目錄結構

├── dist                        編譯結果目錄
|
├── config                      項目編譯配置目錄
|   ├── index.js                默認配置
|   ├── dev.js                  開發環境配置
|   └── prod.js                 生產環境配置
|
├── src                         源碼目錄
|   ├── pages                   頁面文件目錄
|   |   └── index               index 頁面目錄
|   |       ├── index.js        index 頁面邏輯
|   |       ├── index.css       index 頁面樣式
|   |       └── index.config.js index 頁面配置
|   |
|   ├── app.js                  項目入口文件
|   ├── app.css                 項目總通用樣式
|   └── app.config.js           項目入口配置
|
├── project.config.json         微信小程序項目配置 project.config.json
├── project.tt.json             抖音小程序項目配置 project.tt.json
├── project.swan.json           百度小程序項目配置 project.swan.json
├── project.qq.json             QQ 小程序項目配置 project.qq.json
├── ascf.config.json            ASCF元服務項目配置 ascf.config.json
|
├── babel.config.js             Babel 配置
├── tsconfig.json               TypeScript 配置
├── .eslintrc                   ESLint 配置
|
└── package.json

若安裝依賴失敗

在創建完項目之後，Taro 會默認開始安裝項目所需要的依賴，但某些情況下可能會安裝失敗，這時候可以使用安裝命令進行安裝：

# 進入項目根目錄
cd myApp

# 使用 npm 安裝依賴
npm install

# 進入項目根目錄
cd myApp

# 使用 yarn 安裝依賴
yarn

# 進入項目根目錄
cd myApp

# 使用 pnpm 安裝依賴
pnpm install

2. 安裝UI庫和依賴

如果不使用 taro-ui 和 微信工具 可以跳過此步驟，如果需要開發其他小程序，需要裝對應的工具。

npm install taro-ui @tarojs/plugin-platform-weapp

yarn add taro-ui @tarojs/plugin-platform-weapp

pnpm install taro-ui @tarojs/plugin-platform-weapp

3. 下載小程序開發者工具

• 微信開發者工具
• 百度開發者工具
• 支付寶小程序開發者工具
• 抖音小程序開發者工具
• QQ 小程序開發者工具
• 京東小程序開發者工具

需要注意開發者工具的項目設置：

• 需要關閉 ES6 轉 ES5 功能，開啓可能報錯
• 需要關閉上傳代碼時樣式自動補全，開啓可能報錯
• 需要關閉代碼壓縮上傳，開啓可能報錯

4. 啓動項目: weapp

以微信小程序為例，編譯命令如下：

# pnpm
$ pnpm dev:weapp
$ pnpm build:weapp

# yarn
$ yarn dev:weapp
$ yarn build:weapp

# 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

# watch 同時開啓壓縮
$ set NODE_ENV=production && taro build --type weapp --watch # CMD
$ NODE_ENV=production taro build --type weapp --watch # Bash

5. 開發調試: weapp

1. 在微信開發者工具中導入項目
2. 選擇項目目錄 dist 文件夾
3. 開啓真機調試功能
4. 使用預覽功能測試

導入 dist 文件夾後，就已經可以調試了；但你如果想使用真機調試，需要配置AppID(小程序ID)到 project.config.json中，如下：

{
"miniprogramRoot": "./dist",
"projectname": "taro-applet",
"description": "基於taro的小程序模版",
"appid": "touristappid",  // 模版提供
"appid": "AppID",  // 需自己提供
"setting": {
    "urlCheck": true,
    "es6": false,
    "enhance": false,
    "compileHotReLoad": false,
    "postcss": false,
    "minified": false
},
"compileType": "miniprogram"
}

把 touristappid 替換成你自己的 AppID。

項目説明

Git 地址

• Github 地址
• Gitee 地址

效果截圖

主頁

查看詳情

我的記錄

顏色測試

搭配指南

掃碼可查看小程序

小程序發佈流程

1. 獲取AppID(小程序ID) ：進入微信公眾平台，有賬户登陸查詢，無賬號註冊獲取
   
2. 把 project.config.json 中的 touristappid 替換成你自己的 AppID
3. 確認真機調試是否有問題
4. 點擊上傳，添加版本信息
   
5. 保證自己的小程序信息填寫完整
6. 小程序：管理 -> 版本管理中 -> 選擇提交審核 -> 提交審核通過後選擇發佈

如果微信小程序未認證，則不能 被搜索 和 被分享，只能通過下載小程序碼掃碼查看。