day01小程式快速入門

来源:https://www.cnblogs.com/heymar/archive/2022/07/28/16527357.html
-Advertisement-
Play Games

這幾天正式開始微信小程式的修煉了,就目前而言來看簡直就是vue和react的結合體,所以在學小程式前,先把框架熟悉還是挺有用的。 一.簡介 1.1與普通網頁區別 二.第一個小程式 需要註冊小程式開發賬號,==最主要是獲得AppId== 然後就需要安裝 ==微信開發者工具== 2.1設置外觀和代理 2 ...


這幾天正式開始微信小程式的修煉了,就目前而言來看簡直就是vue和react的結合體,所以在學小程式前,先把框架熟悉還是挺有用的。

一.簡介

1.1與普通網頁區別

image-20220725103607923

二.第一個小程式

需要註冊小程式開發賬號,最主要是獲得AppId

然後就需要安裝 微信開發者工具

2.1設置外觀和代理

image-20220725105931540

2.2模擬器查看效果

image-20220725111115908

2.3真機查看效果

image-20220725111201748

三.小程式代碼構成

3.1項目基本組成結構

image-20220725112704774

3.2頁面組成部分

image-20220725112937888

3.2.1 json文件的作用

image-20220725113144897

  • app.json

image-20220725113546810

  • projec.config.json

    image-20220725113853757

  • sitemap.json我的理解為用戶在微信內部搜索的時候這個就發揮作用了,用戶可以直接通過微信搜索搜到你這個小程式

    image-20220725114251555

    現在就是表示所有小程式頁面都可以被搜索到

    如果不允許被索引到

    image-20220725114434132

  • 頁面json

    image-20220725115047459

    會覆蓋掉全局下的配置

3.3 新建小程式頁面

直接通過修改app.json創建一個頁面即可自動創建

image-20220725115428566

3.4 修改項目首頁

修改app.json裡面的順序為第一位即可

image-20220725115652293

3.5 WXML模板

和html的區別

image-20220725115934047

3.6 WXSS

和css區別

image-20220725120244161

註意最好別用太生僻的選擇器,wxss不會認,第二個是元素選擇器

3.7 js

分為三類

image-20220725133535786

四.小程式宿主環境

宿主環境即程式運行所依賴的環境,比如安卓系統只能安裝安卓軟體,ios系統只能安裝蘋果軟體

手機微信是小程式宿主環境

image-20220725133810281

4.1 通信模型

通信主體分為渲染層(wxml、wxss)和邏輯層(js腳本)

通信模型分為兩部分,渲染層和邏輯層的通信,邏輯層和第三方伺服器的通信,都是由微信客戶端完成轉發

image-20220725134246156

4.2 運行機制

小程式執行過程

image-20220725134504034

頁面渲染過程

image-20220725134552795

4.3 組件

一共分為九大類

image-20220725134707359

  • 視圖容器

    view(div)、scroll-view(可滾動視圖區域)、swiper和swiper-item(輪播圖組件和裡面的每一項)

    view基本使用

    image-20220725135320681

    scroll-view基本使用

    image-20220725140136579

    註意要加橫向或者縱向滾動的屬性

    swiper基本使用

    image-20220725140852957

    swiper常用屬性

    image-20220725155553661

  • 基礎內容

    text(span)、rich-text

    text:selectable屬性表示支持長按選中文本操作(註意小程式只有text有這個屬性

    image-20220725160613789

    rich-text:將html字元串渲染為對應ui結構通過nodes屬性節點

    註意:外面是雙引號裡面要用單引號

    image-20220725161150774

  • 其他常用組件

    button

    比htmlbutton功能要更豐富

    image-20220725161409461

    image-20220725161612338

    image

    圖片組件寬高預設300px 240px

    image-20220725162016642

image:mode屬性

可以指定圖片裁剪縮放模式

image-20220725162216241

4.4 API

一共分為三大類

  • 事件監聽API wx就是小程式的頂級對象,類似於window

image-20220725163048995

  • 同步API

    image-20220725163158117

  • 非同步API

    image-20220725163235812

五.協同工作與發佈

5.1 許可權管理

首先如果是在中大型公司裡面,開發一個小程式是需要同時多個人一起來協同開發的,包括開發和測試都是有不同的許可權的

image-20220725164407405

開發流程:

image-20220725164540211

5.2 成員管理

主要就是項目成員和體驗成員,最大的就是管理員

image-20220725165129820

項目成員和體驗成員的添加刪除在小程式管理後臺修改

image-20220725172104939

image-20220725172109451

5.3 發佈

小程式版本

image-20220725172331726

上傳版本

image-20220725172415906

上傳之後就可以在後臺看見上傳的版本

image-20220725172442743

審核通過就可以發佈了

image-20220725172603631

小程式的推廣與運行數據的查看

image-20220725173023271

查看數據

一種是通過管理後臺

image-20220725173155948

一種是通過小程式數據助手

image-20220725173236611


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

-Advertisement-
Play Games
更多相關文章
  • #資料庫的CRUD語句 ##INSERT語句 ###在指定列中插入數據 INSERT INTO 表名 (column1,column2,column3,...) VALUES (value1,value2,value3,...); INSERT INTO website (url,country) ...
  • 使用flink的時候難免和redis打交道,相信大家都使用過flink-connector-redis來處理,但是當我想要使用RedisSink寫入集群時,發現居然不支持使用密碼,於是有了這篇筆記。 ...
  • 19 | 為什麼我只查一行的語句,也執行這麼慢? 有些情況下,“查一行”,也會執行得特別慢。 需要說明的是,如果 MySQL 資料庫本身就有很大的壓力,導致資料庫伺服器 CPU 占用率很高或 ioutil(IO 利用率)很高,這種情況下所有語句的執行都有可能變慢,不屬於本章討論範圍。 為了便於描述, ...
  • 18 | 為什麼這些SQL語句邏輯相同,性能卻差異巨大? 在 MySQL 中,有很多看上去邏輯相同,但性能卻差異巨大的 SQL 語句。對這些語句使用不當的話,就會不經意間導致整個資料庫的壓力變大。 三個案例 案例一:條件欄位函數操作 假設你現在維護了一個交易系統,其中交易記錄表 tradelog 包 ...
  • 步驟一:設置sql server資料庫 1.以新建一個新用戶名test作為遠程連接登錄名。在本地登錄sql server資料庫,安全性->右鍵用戶名 2.點擊根目錄右鍵,選擇屬性 選擇安全性 選擇連接,勾上允許遠程連接到此伺服器,點擊確定 3.設置伺服器的方面選項 4.設置sql server 配置 ...
  • 上篇文章講了MySQL架構體系,瞭解到MySQL Server端的優化器可以生成Explain執行計劃,而執行計劃可以幫助我們分析SQL語句性能瓶頸,優化SQL查詢邏輯,今天就一塊學習Explain執行計劃的具體用法。 ...
  • 2008年,“大數據”一詞在《大數據時代》中被首次提出,距今已有整整14個年頭。在這14年中,許多人親眼見證了數據的力量,以及目睹它如何改變世界。大部分企業的決策者都明白了一個道理:數據才是企業中最有價值的商品,它可以被人為選擇成就還是破壞業務。 然而,自流行詞“大數據”出現的14年後,如何獲得更高 ...
  • 最近一鍵“露齒笑”席卷全網,無論是短視頻用戶還是社交App用戶都在使用這項黑科技。當三兩好友聚會拍集體照留念時,為了處理個別人的表情“瑕疵”,讓大家都儘量保持微笑,總要進行表情微調,但如果需要進行複雜的換頭換臉等P圖操作,對用戶來說門檻太高。有些用戶“鏡頭恐懼”,拍照時不會微笑、表情尷尬;有些用戶對 ...
一周排行
    -Advertisement-
    Play Games
  • 在本篇教程中,我們學習瞭如何使用 Taurus.MVC WebMVC 框架創建一個簡單的頁面。 我們創建了一個控制器並編寫了一個用於呈現頁面的方法,然後創建了對應的視圖,並最終成功運行了應用程式。 在下一篇教程中,我們將繼續探索 Taurus.MVC WebMVC 框架的更多功能和用法。 ...
  • 一:背景 1. 講故事 很多.NET開發者在學習高級調試的時候,使用sos的命令輸出會發現這裡也看不懂那裡也看不懂,比如截圖中的這位朋友。 .NET高級調試屬於一個偏冷門的領域,國內可觀測的資料比較少,所以很多東西需要你自己去探究源代碼,然後用各種調試工具去驗證,相關源代碼如下: coreclr: ...
  • 我一直都以為c中除以2的n次方可以使用右移n位代替,然而在實際調試中發現並不都是這樣的。是在計算餘數是發現了異常 被除數:114325068 右移15計算結果:3488 除法取整計算結果:3489 右移操作計算餘數:33772 除法取整計算餘數:1005 顯然:這是不一樣的。 移位操作是一條cpu指 ...
  • 在上一篇文章中,我們介紹了ReentrantLock類的一些基本用法,今天我們重點來介紹一下ReentrantLock其它的常用方法,以便對ReentrantLock類的使用有更深入的理解。 ...
  • Excelize 是 Go 語言編寫的用於操作電子錶格辦公文檔的開源基礎庫,2024年2月26日,社區正式發佈了 2.8.1 版本,該版本包含了多項新增功能、錯誤修複和相容性提升優化。 ...
  • 雲採用框架(Cloud Adoption Framework,簡稱CAF)為企業上雲提供策略和技術的指導原則和最佳實踐,幫助企業上好雲、用好雲、管好雲,併成功實現業務目標。本雲採用框架是基於服務大量企業客戶的經驗總結,將企業雲採用分為四個階段,並詳細探討企業應在每個階段採取的業務和技術策略;同時,還 ...
  • 與TXT文本文件,PDF文件更加專業也更適合傳輸,常用於正式報告、簡歷、合同等場合。項目中如果有使用Java將TXT文本文件轉為PDF文件的需求,可以查看本文中介紹的免費實現方法。 免費Java PDF庫 本文介紹的方法需要用到Free Spire.PDF for Java,該免費庫支持多種操作、轉 ...
  • 指針和引用 當我們需要在程式中傳遞變數的地址時,可以使用指針或引用。它們都可以用來間接訪問變數,但它們之間有一些重要的區別。 指針是一個變數,它存儲另一個變數的地址。通過指針,我們可以訪問存儲在該地址中的變數。指針可以被重新分配,可以指向不同的變數,也可以為NULL。指針使用*運算符來訪問存儲在地址 ...
  • 即使再小再簡單的需求,作為研發開發完畢之後,我們可以直接上線麽?其實很多時候事故往往就是由於“不以為意”發生的。事故的發生往往也遵循“墨菲定律”,這就要求我們更要敬畏線上,再小的需求點都需要經過嚴格的測試驗證才能上線。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、是什麼 許可權是對特定資源的訪問許可,所謂許可權控制,也就是確保用戶只能訪問到被分配的資源 而前端許可權歸根結底是請求的發起權,請求的發起可能有下麵兩種形式觸發 頁面載入觸發 頁面上的按鈕點擊觸發 總的來說,所有的請求發起都觸發自前端路由或 ...