小程式開發工具與基礎之環境搭建與工具

来源:https://www.cnblogs.com/chenyingying0/archive/2020/03/16/12503444.html
-Advertisement-
Play Games

小程式開發準備 1、申請小程式賬號(appid) 2、下載並安裝微信開發者工具 進入微信公眾平臺 https://mp.weixin.qq.com/ 立即註冊小程式 按照信息填寫之後完成註冊 具體操作可查看小程式官方開發文檔 使用註冊的小程式賬號密碼,登錄 https://mp.weixin.qq. ...


小程式開發準備

1、申請小程式賬號(appid)

2、下載並安裝微信開發者工具

 

進入微信公眾平臺 https://mp.weixin.qq.com/

立即註冊小程式

 

 按照信息填寫之後完成註冊

具體操作可查看小程式官方開發文檔

 

使用註冊的小程式賬號密碼,登錄 https://mp.weixin.qq.com/

在菜單-設置-開發者設置中,查看小程式的appID

 

 

下載並安裝微信開發者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 

 選擇適合自己操作系統的最新穩定版本,傻瓜式下載安裝即可

 

掃碼登錄

 

 新建小程式項目

(沒有appID可以暫時先使用測試號)

不過現在個人是可以註冊小程式的,還是建議註冊一個,因為測試號有很多限制

 

 

小程式屬於前端開發,單獨的小程式是沒有意義的

而完整的應用不僅要有前端,還需要伺服器的支持(後端給前端提供數據)

小程式後端可以使用後端語言來開發,比如java python php node.js ,不懂後端的可以使用小程式雲開發

 

 

 進去以後的預設頁面是這樣的,微信頭像+微信名,怎麼這麼大……

 

微信開發工具UI簡介與小程式調試方法

創建類型:

 

如果選擇page,會生成4個文件 .js  .json  .xml  .xss

 

如何查看快捷鍵:

滑鼠移動到代碼區域,按F1,會出現所有操作及快捷鍵

 

 

如何運行代碼:

1、點擊編譯

 

 2、小程式有自動編譯功能

編輯完代碼之後按ctrl+s保存即可自動編譯

 

清緩存:

 

 

如何查看項目的配置信息和狀態:

點擊設置-項目設置

 

 

 

 或者點擊右上角的詳情

 

 

 

關於調試:

1、console.log列印變數進行查看

2、斷點調試,在控制台sources點擊對應文件,左側可以進行打斷點操作

然後再點擊下編譯

 


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

-Advertisement-
Play Games
更多相關文章
  • 1、查看本機公鑰; 打開git bush,執行 cd ~/.ssh 進入.ssh文件夾(C:\Users\Administrator\.ssh) 執行 ls 命令,查看列表 執行 cat id_rsa.pub 或者 vim id_rsa.pub 查看id_rsa.pub這個文件,出現的一串代碼即是公 ...
  • 實例 當雙擊按鈕時,隱藏或顯示元素: ~~~ $("button").dblclick(function(){ $("p").slideToggle(); }); ~~~ "親自試一試" 定義和用法 當雙擊元素時,會發生 dblclick 事件。 當滑鼠指針停留在元素上方,然後按下並鬆開滑鼠左鍵時, ...
  • 實例 當點擊滑鼠時,隱藏或顯示 p 元素: ~~~ $("button").bind("click",function(){ $("p").slideToggle(); }); ~~~ "親自試一試" 定義和用法 bind() 方法為被選元素添加一個或多個事件處理程式,並規定事件發生時運行的函數。 ...
  • 實例 構建表單中所有值的列表: ~~~ $("p").append( $("input").map(function(){ return $(this).val(); }).get().join(", ") ); ~~~ "親自試一試" 定義和用法 map() 把每個元素通過函數傳遞到當前匹配集合中 ...
  • 項目常用eslint配置(Vue/React/TypeScript) 記錄一下常用的eslint配置。 Vue項目常用eslint配置 需要安裝依賴(Vue這裡使用standard擴展和vue插件,所以需要安裝) .eslintrc.js文件配置 javascript // https://esli ...
  • 實例 本例演示如何通過 closest() 完成事件委托。當被最接近的列表元素或其子後代元素被點擊時,會切換黃色背景: ~~~ $( document ).bind("click", function( e ) { $( e.target ).closest("li").toggleClass("h ...
  • 新建項目以後,可以看到官方的種子項目 這是首頁 點擊頭像可以跳轉到另一個頁面 目錄結構 wxml類似於html,wxss類似於css,.json通常用來做配置(可以沒有) 應用程式級別文件 app.js 應用程式級別的邏輯 app.json 應用程式級別的配置 app.wxss 應用程式級別的全局樣 ...
  • 不管是哪一種請求方式,客戶端都可以把信息傳遞給伺服器,伺服器也可以把信息返回給客戶端,只不過GET方式偏向於拿,聽上去更多的是獲取,屬於給的少拿的多,而POST偏向於給,傳遞嘛,屬於給的多拿的少。 先介紹一些其他的方法: ·HEAD:只獲取響應頭的信息,不獲取響應主體內容; ·DELETE:刪除,一 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...