小程序多端開發：使用taro框架【一、安裝使用】

npm install -g @tarojs/cli
//或者
cnpm install -g @tarojs/cli

使用命令創建模板項目

taro init myApp

創建的時候會自動安裝依賴，如果沒有安裝成功，只能在自己項目目錄下使用命令再次安裝依賴

# 使用 yarn 安裝依賴
$ yarn
# OR 使用 cnpm 安裝依賴
$ cnpm install
# OR 使用 npm 安裝依賴
$ npm install

微信小程序編譯預覽、打包

# 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

百度小程序編譯預覽、打包

# yarn
$ yarn dev:swan
$ yarn build:swan
# npm script
$ npm run dev:swan
$ npm run build:swan
# 僅限全局安裝
$ taro build --type swan --watch
$ taro build --type swan
# npx 用戶也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan

支付寶小程序編譯打包、預覽

# yarn
$ yarn dev:alipay
$ yarn build:alipay
# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 僅限全局安裝
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用戶也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay

字節跳動小程序

# yarn
$ yarn dev:tt
$ yarn build:tt
# npm script
$ npm run dev:tt
$ npm run build:tt
# 僅限全局安裝
$ taro build --type tt --watch
$ taro build --type tt
# npx 用戶也可以使用
$ npx taro build --type tt --watch
$ npx taro build --type tt

QQ小程序

# yarn
$ yarn dev:qq
$ yarn build:qq
# npm script
$ npm run dev:qq
$ npm run build:qq
# 僅限全局安裝
$ taro build --type qq --watch
$ taro build --type qq
# npx 用戶也可以使用
$ npx taro build --type qq --watch
$ npx taro build --type qq

京東小程序

# yarn
$ yarn dev:jd
$ yarn build:jd
# npm script
$ npm run dev:jd
$ npm run build:jd
# 僅限全局安裝
$ taro build --type jd --watch
$ taro build --type jd
# npx 用戶也可以使用
$ npx taro build --type jd --watch
$ npx taro build --type jd

快應用

# yarn
$ yarn dev:quickapp
$ yarn build:quickapp
# npm script
$ npm run dev:quickapp
$ npm run build:quickapp
# 僅限全局安裝
$ taro build --type quickapp --watch
$ taro build --type quickapp
# npx 用戶也可以使用
$ npx taro build --type quickapp --watch
$ npx taro build --type quickapp

H5預覽：

# yarn
$ yarn dev:h5
# npm script
$ npm run dev:h5
# 僅限全局安裝
$ taro build --type h5 --watch
# npx 用戶也可以使用
$ npx taro build --type h5 --watch

H5打包

# yarn
$ yarn build:h5
# npm script
$ npm run build:h5
# 僅限全局安裝
$ taro build --type h5
# npx 用戶也可以使用
$ npx taro build --type h5

ReactNative：

# yarn
$ yarn dev:rn
# npm script
$ npm run dev:rn
# 僅限全局安裝
$ taro build --type rn --watch
# npx 用戶也可以使用
$ npx taro build --type rn --watch

在樣式上要兼顧多端的限制，儘量使用：

1. flex佈局
2. 基於BEM寫樣式
3. 採用style屬性覆蓋組件樣式

現在編譯爲微信小程序：

npm run dev:weapp

結果如下圖：

打開微信開發者工具預覽剛剛我們編譯成功的dist文件

接下來就是自己修改代碼：

先介紹到這裏，希望對大家有幫助！！！
謝謝瀏覽！！！