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
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...