如何構建taro框架並編譯微信小程序項目

2020-12-18 IT軟體專家

工具

GitnpmHBuilderX微信開發者工具技術

taro微信小程序

1、在指定文件夾下，打開Git命令窗口

在指定文件夾下，打開Git命令窗口

2、輸入命令：npminstall -g @tarojs/cli，安裝taro cli

npm install -g @tarojs/cli，安裝taro

3、使用命令創建模板項目taro init abcn

使用命令創建模板項目taro init abcn

4、切換項目到根目錄，然後安裝依賴包

cd abcn/

cnpm install

切換項目到根目錄，然後安裝依賴包

5、編譯成微信小程序，使用命令：npm run dev:weapp

編譯成微信小程序，使用命令：npm run

6、打開HBuilderX開發工具，導入項目

打開HBuilderX開發工具，導入項目

7、接著打開微信開發者工具，然後選擇小程序，導入項目

選擇小程序，導入項目

8、項目導入成功後，可以查看到項目結構

項目導入成功後，可以查看到項目結構

9、保存並進行編譯，預覽界面效果

保存並進行編譯，預覽界面效果

相關焦點

  • Taro 3 支持 React Native
    廣義上理解，針對小程序各端的處理也基本類似，只不過中間多了一步：先編譯成目標平臺的代碼，然後再用小程序 IDE 編譯發布。當然它與前兩者還是有些差異：目標平臺的中間代碼包含 Taro 運行時，調試起來並不是非常直觀；而前兩者直接生成最終打包資源，所以天然地支持 source-map 。
  • Echarts在Taro微信小程序開發中的踩坑記錄
    本文轉載自【微信公眾號：前端人，ID:FrontendPeople】經微信公眾號授權轉載，如需轉載與原文作者聯繫背景近期筆者在使用Taro進行微信小程序開發，當引入Echarts圖表庫時，微信檢測單包超限2M的一系列優化措施的踩坑記錄，期望能指導讀者少走一些彎路。
  • 如何在微信小程序項目中使用倒計時組件
    工具微信開發者工具HBuilderX技術>微信小程序vueuni-appJavaScriptcountdown組件可以顯示天數、小時、分鐘和秒鐘，設置相關的屬性的顏色，有背景色、字體顏色和邊框顏色插入uni-countdown組件，添加組件的屬2、選擇項目，運行到微信開發者工具，進入工具查看效果
  • GitHub 上周 JavaScript 趨勢榜項目(0427-0504)
    >Docusaurus是一個用於輕鬆構建，部署和維護開源項目網站的項目。NervJS/taro項目地址：[https://github.com/NervJS/taro](https://github.com/NervJS/taro)stars:25125 | forks:3006 | 111 stars this week多端統一開發框架
  • Taro小程序、H5、快應用列表大量數據卡頓?
    如果你也遇到類似的問題，小編帶你如何解決。廢話不多說，我們直接上乾貨。1、代碼import React, { Component } from 'react'import { View, Text } from '@tarojs/components'import
  • 如何使用HBuilderX創建uni-app並編譯成微信小程序並配置底部菜單
    查看項目結構4、打開微信開發者工具，點擊設置--->安全設置配置外部web伺服器調用url7、選中uni-app項目，點擊運行--->運行到小程序模擬器--->微信開發者工具運行到小程序模擬器
  • 微信小程序開啟遊戲支持!你準備好了沒?
    所以：Cocos Creator 1.8 在今天同步發布集成微信小遊戲支持！Cocos Creator 底下所採用的 cocos2d-x 框架，已經完整集成了微信小遊戲的開發環境。使用 Cocos Creator 開發的遊戲，「遊戲內容」不需要做任何平臺移植工作，即可編譯發布到微信小遊戲調試環境中。
  • 微信小程序推廣方式 微信小程序推廣效果如何
    微信小程序推廣方式有哪些呢，有些在做小程序推廣的小夥伴們都有這方面的需求吧。那麼有沒有人知道微信小程序推廣效果如何呢。
  • 同樣的能力,為什麼開發小程序要比App簡單100倍?
    小程序是微信基於 xml 和 js 定義的一套標記語言、全新的生態、一個輕 OS，開發工具和 UI 框架都是騰訊自己做的，它依附微信、無需下載，也是一座流量富礦。 一、傳統 APP 開發 vs 小程序開發 儘管，大部分團隊已經意識到創新和高效很重要，但卻依舊難以」敏捷「起來。
  • 微信小程序如何做好「授權」設計?
    在本文中，作者結合案例，盤點了微信小程序授權登錄設計中需要注意的幾點問題，並對功能設計背後的設計思路與原理進行了簡要的分析，供大家一同參考學習。經歷了四個小程序從0-1的設計/研發/上線的生命周期，深感小程序由於微信生態圈的影響，使它擁有很多便捷的封裝功能，支持直接調用；同時弊端就是導致很多功能受限，不像原生app那樣靈活多變。
  • 微信小程序開發《影視小程序》從0實戰-無需懂代碼
    最近圈子裡很火爆的就是微信小程序了···不知道大家是否有注意，影視類一直是比較容易獲得認可的資源種類。今天免費分享怎麼從0開始搭建所有資原始碼請在GZH「副業研習圈」獲取需要準備的東西：1、伺服器2、備案域名3、註冊微信小程序
  • 微信小程序製作價格
    微信小程序製作價格與很多因素有關，主要取決於你要做多少程序頁面和要做的頁面內容及功能的複雜程度等。小程序相比於手機APP，在開發成本上還是便宜很多的。1、自己組技術團隊開發需要支付員工費用，這要算在開發一個小程序的成本中。
  • 5個開發桌面應用程式的JavaScript框架
    5個開發桌面應用程式的JavaScript框架 很久以前，開發客戶端桌面程序需要我們掌握各種複雜的技術，不過現在，我們只需要使用js就可以開發出桌面應用程式，下面我們盤點5個開發桌面應用程式的框架。
  • 如何在 Ubuntu/Debian Linux 上編寫、編譯和運行一個 C 程序
    你是如何在 Linux 上使用 C 編寫你的程序的？它確實是非常簡單的，由三個簡單的步驟組成。這只是如何在 Linux 中編譯和運行 C 程序的簡要總結。假設你是 C 語言或 Linux 系統的新手，我將仔細演示這些步驟，以便你能在 Linux 環境中舒服地編寫 C 程序。
  • 如何構建學術論文寫作框架
    構建框架首先我們確定了研究空白，然後確定了做這個研究的意義，然後我們要知道誰來關注這個研究，再去選擇一個理論框架。然後會有一個前提就是去知道做出來我們大概會有一個什麼樣的學術貢獻，是對誰的。把需要用到的所有理論選擇出來之後，會進行針對大問題來經營自己的研究設計，用一些不同的小課題來支撐整個大問題。首先講一下理論框架。像現在的生態系統這個概念，很多學者有很多看法，他們的定義可能會不一致，那麼你需要根據他們的來定義，來給自己一個邊界。
  • 商家是怎麼製作微信小程序的?
    在現代生活中微信小程序已經應用到了各個行業生活中是非常廣泛的，許多 線下實體的的店家都想製作微信小程序來進行線上購物模式那商家想要製作微信小程序是怎麼製作的呢，現在就仔細說一下是如何製做微信小程序的？對店家來說基本上就是想根據微信小程序來開展網絡在線購物商城達到發展線上商城的購物模式，如果是這麼考慮的話微信小程序必須想到要制定的微信小程序是需要什麼類型的用戶以及開發出需要什麼功能以及有什麼樣的設計風格的小程序，商家能夠依據同行業所做的小程序實例可以當做參考是否需要其中的小程序功能。
  • 產品經理項目實錄:怎樣從0到1做一款微信小程序?
    市面上有很多關於微信小程序的文章，但大多都是一些宏觀的分析或者框架式的方法論，卻沒有講到底怎麼去落地、以及實際項目過程中會遇到哪些問題。所以在本文中，我將以自己親手做過的一款小程序為載體，以整個項目流程為主線，系統地解構怎樣從0到1做一款微信小程序。
  • uni-app小程序開發指南
    以下全文使用wxapp指代小程序應用1.項目介紹wxapp是基於uni-app，使用vue.js語法進行開發的微信小程序項目。2.開發工具devtools：微信開發者工具。安裝完畢使用開發者帳號微信登陸微信開發者工具且到開發工具的安全設置中開放服務埠HBuilderX：由DCloud推出的web開發IDE。
  • 教孩子寫遊戲:手寫一個最最簡單的Windows程序框架
    編程的高難度時代已經過去，各種各樣的底層技術難題已經被我們的前輩們解決，而且很好地封裝到了各種各樣的函數中，我們只要懂得如何去使用就可以了。這一節課，我們就用這個集成工作環境寫一個Windows程序的框架。
  • 寵物小程序如何運營,西安微信小程序開發公司
    根據相關數據表明，如今的年輕人養寵物的越來越多，說是養寵物實際很多人已經把寵物當成了一名「家庭成員」自從寵物行業火爆以來，寵物相關的周邊產品也在與日俱增，比如寵物食糧、寵物用品、寵物醫療、美容等相關等相關產品，而有了微信小程序之後，不僅滿足了年輕消費者的網際網路使用習慣，也完成了商家流量和利潤雙重提升