小程序開發框架:Taro（一）基礎篇

1. Taro簡介
2. 環境搭建
3. 項目搭建
4. 編譯調試微信小程序
5. Taro項目結構分析
6. Yarn命令詳解
7. 解決問題：版本問題 Taro CLI 與本地安裝的小程序框架 @tarojs/taro-weapp 版本不一致

1. Taro簡介

  Taro是一個前端小程序框架，經過這個框架寫一套代碼，再經過 Taro 的編譯工具，就能夠將源代碼分別編譯出能夠在不一樣端（微信/百度/支付寶/字節跳動小程序、H五、React-Native 等）運行的代碼，[Taro官網](https://nervjs.github.io/taro/docs/README.html)
2. 環境搭建

  Taro的環境搭建要求更新node到最新版本，因此先老老實實的更新node吧
  2.1) 先查看下本身的編譯環境node的版本號
node -v

 

  隨後會顯示當前node的版本號,在不少方法中會讓你經過npm n模塊來更新node（n模塊用來管理node），可是你試過以後，你會發現坑真多，最粗暴的方案就是在node官網下載最新msi進行覆蓋安裝便可，經過以下命令查看本機node的安裝位置

where node

隨後他會顯示出本機node的安裝位置，當你下載完最新的msi以後，就在這個位置覆蓋安裝便可；

  2.2) 依次執行以下命令進行Taro環境搭建

npm config set registry http://registry.npm.taobao.org/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
cnpm install -g @tarojs/cli

第一個命令是使用npm的淘寶鏡像，
第二個命令是配置node-sass爲淘寶鏡像
第三個命令是使用cnpm全局安裝taro，將會生成一個taro 命令。taro-cli 包位於 Taro 工程的 packages 目錄下，主要負責項目初始化、編譯、構建等

安裝完成以後經過以下命令查看taro是否安裝完畢

taro -V

若是安裝沒有問題會顯示以下

  2.3) 配置環境遇到以下錯誤如何處理

C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\src\util\index.js:227
exports.replaceAsync = async function (str, regex, asyncFn) {
^^^^^^^^

SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\bin\taro:4:44)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  恭喜你，這就是node版本不是最新的致使的，更新node吧

3. 項目搭建

  經過以下命令搭建項目
taro init taro-learning-pro

這裏新建了一個名字叫taro-learning-pro的項目(在建立項目的時候，項目名最好不要包含大寫字母…)，在輸入上述命令以後，按照提示一步一步操做

緊接着，項目會下載對應的依賴，當依賴下載完成以後，會有以下提示

此時一個使用默認模板建立的項目就建立好了，目錄結構以下，使用不一樣的模板生成的項目目錄會有一些小小的差異

當項目建立好以後，咱們就能夠編譯調試小程序了，此處以生成微信小程序爲例

4. 編譯調試微信小程序

  4.1）在命令行中輸入以下命令
npm run dev:weapp

該命令會編譯項目代碼，並在dist目錄生成目標文件，結果以下

此時已經說明微信小程序目標文件已經生成到dist目錄

  4.2）下載微信開發者工具
微信開發者工具官網

  下載以後進行安裝

使用微信掃碼登陸以後，選擇小程序項目

而後選擇項目目錄中的dist文件夾

點擊肯定便可，由於taro一直在監聽你的文件變化，顧若是文件發生變化，微信小程序工具界面也會發生變化

5. Taro項目結構分析

從上圖可知，app.tsx是Taro項目入口文件，項目使用yarn工具來進行包管理，yarn的做用是代替npm的js包管理工具，至於爲何用yarn而不用npm，這裏就不計較了；

6. Yarn命令詳解

全局安裝yarn工具： cnpm install -g yarn

添加一個依賴,經過 yarn add 添加依賴會更新 package.json 以及 yarn.lock 文件
yarn add [packageName]
yarn add [packageName] --dev 依賴會記錄在 package.json 的 devDependencies 下

更新依賴
yarn upgrade
也能夠更新指定的依賴
yarn upgrade [packageName]

移除一個依賴
yarn remove [packageName]

安裝 package.json 中的全部文件
yarn 或者 yarn install

7. 解決問題：版本問題 Taro CLI 與本地安裝的小程序框架 @tarojs/taro-weapp 版本不一致，請確保一致

  多人協同開發的時候，特別是小組有新成員加入，新人須要本身搭建編譯環境，可是因爲項目是在早期創建的，因此會形成開發版本和新人新建的開發環境不一致的問題
  例如，一個項目在早期使用Taro CLI: 1.2.2進行了建立，也使用Taro CLI1.2.2下載了各類依賴，可是新人在加入項目的時候，Taro已經更新到1.2.4，因此在執行npm run dev:weapp的時候，就會提示版本不一致，根本緣由就是依賴文件和Taro CLI版本不一致所致，全部咱們須要更新兩個地方
1： 更新yarn.lock
2： 更新package.json

  更新yarn.lock：

cnpm install -g yarn
yarn

  更新package.json：

npm install -g npm-check-updates
ncu -u

 

經過上述命令，便可完成yarn.lock文件和package.json文件的依賴庫更新

點贊 4

————————————————版權聲明：本文爲CSDN博主「yi_master」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/yi_master/article/details/86009294