UniApp小程式開發項目創建與運行

来源:https://www.cnblogs.com/shengjiangMock/archive/2023/04/12/17304620.html
-Advertisement-
Play Games

1.準備工作:HbuiderX + 微信開發者工具下載安裝+小程式賬號申請開通(這裡就不例舉了,可以看同賬號uniapp小程式開發準備) 2.創建項目 新版本的HbuilderX點擊新建項目——選擇uni-app——選擇預設模板——輸入項目名稱——選擇Vue版本(此隨筆是前後端分離開發,不使用Uni ...


1.準備工作:HbuiderX  +  微信開發者工具下載安裝+小程式賬號申請開通(這裡就不例舉了,可以看同賬號uniapp小程式開發準備)

2.創建項目

  新版本的HbuilderX點擊新建項目——選擇uni-app——選擇預設模板——輸入項目名稱——選擇Vue版本(此隨筆是前後端分離開發,不使用UniCloud雲開發)

3.目錄有用介紹 

  裡面基本包含

    pages文件夾——存放頁面,等同於Vue中的view

    static文件夾——存放靜態資源,類似於Vue中的assets

    App.vue存放每個頁面的公共部分——像是下拉刷新或者分享小程式需要放在App.vue中的生命周期中

    index.html——根

    main.js——入口文件

   * manifest.json——項目配置文件(重要)在裡面可以進行分享功能、小程式的Appid等重要功能配置

    pages.json——頁面路由等配置(在創建文件的時候它會自動添加路由,如果使用到分包需要自己去進行修改、以及對整個小程式的表頭或者TabBar等進行配置)

4.配置小程式開發者工具調試

  選擇運行——運行到小程式模擬器——運行設置  找到小程式運行配置 —— 點擊瀏覽選擇微信開發者工具.exe 保存後即可

5.配置manifest.json文件

  將自己申請的小程式APPID填寫到微信小程式配置中的微信小程式AppID中

6.啟動項目
  選擇運行——運行到小程式模擬器——微信開發者工具(第一次啟動會有一些慢且需要自己掃碼登陸,選擇自己當前的小程式項目即可)

7.配置微信開發者工具

  右上角詳情進行開發設置

  建議開啟將JS編譯為ES5、不校驗合法功能變數名稱其他自動開啟的就不用關閉了

  在基本信息可以看到自己的發佈狀態和appid等信息

8.根據需求開發

 以上就是UniApp創建和運行小程式項目的步驟了

 

 小白第一次寫博客,如有錯誤請指正,感謝


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 4月7-8日,年度資料庫行業盛會——2023數據技術嘉年華(DTC 2023)如期而至。 此次盛會匯聚了全國各地數千名數據領域學術精英、領袖人物、技術專家、從業者和技術愛好者,共同見證行業蓬勃發展、生態融合共贏、技術迭代升級及市場風雲變遷。 GreatSQL作為萬里資料庫主導成立的開源資料庫社區,首 ...
  • 在Oracle資料庫中,如果我們使用用戶管理備份與恢復(User-Managed Backup and Recovery)方式去備份還原資料庫的話,如何獲取用戶管理備份與恢復的記錄信息呢?例如,我要查看某個資料庫實例做用戶管理備份的記錄。一般使用下麵腳本。似乎用戶管理備份比較“簡單”,目前我查了相關 ...
  • Redis 構造了多種底層數據結構供使用,不同的數據類型有可能使用到多種底層數據結構存儲,因此,需要理解為何 Redis 會有這樣的設計,理解每個底層數據結構的概念之後,就能知曉在極端性能上如何做取捨。 ...
  • 蘋果在iOS16.1系統對第三方開放了靈動島的API,並允許開發者基於靈動島開發相應軟體,越來越多的APP開始基於靈動島的交互進行設計和開發,本文將簡單介紹靈動島開發的流程和將其與業務場景相結合的思考。 ...
  • 首先說明簡易版是只有一個 倒計時 和一個 進度條,頁面載入後自動開始計時,下次計時需要手動刷新頁面。 後續會更新實現完整的倒計時功能的文章 前期準備 前端框架 你需要準備一些前端框架:Bootstrap4 和 jQuery 安裝方法請自行查閱官方文檔或教程 Bootstrap4:https://v4 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 前言: 梳理了一下項目中的PWA的相關用法,下麵我會正對vue2和vue3的用法進行一些教程示例,引入離線緩存機制,即使你斷網,也能訪問頁面。一旦用戶訪問了我們的網頁,我們就像牛皮糖一樣粘連著他,他永遠都可以訪問,即使斷網也能訪問。有一天 ...
  • 作者:京東零售 周明亮 寫在前面 這裡我們初步提到了一些基礎概念和應用: 分析器 抽象語法樹 AST AST 在 JS 中的用途 AST 的應用實踐 有了初步的認識,還有常規的代碼改造應用實踐,現在我們來詳細說說使用 AST, 如何進行代碼改造? Babel AST 四件套的使用方法 其實在解析 A ...
  • 當瀏覽器載入網頁時,通常會遵循一個預設的流程,先載入 HTML、CSS 和 JavaScript,然後再載入圖片、音頻、視頻等資源。這個預設的流程可能會導致網頁載入速度變慢,用戶體驗不佳。因此,可以使用一些技術來優化網頁載入的速度,其中之一就是按需載入。 按需載入是指根據用戶實際需要,動態地載入資源 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...