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
  • 使用原因: 在我們服務端調用第三方介面時,如:支付寶,微信支付,我們服務端需要模擬http請求並加上一些自己的邏輯響應給前端最終達到我們想要的效果 1.使用WebClient 引用命名空間 using System.Net; using System.Collections.Specialized; ...
  • WPF 實現帶蒙版的 MessageBox 消息提示框 WPF 實現帶蒙版的 MessageBox 消息提示框 作者:WPFDevelopersOrg 原文鏈接: https://github.com/WPFDevelopersOrg/WPFDevelopers.Minimal 框架使用大於等於.N ...
  • 一、JSON(JavaScript Object Notation)的簡介: ① JSON和XML類似,主要用於存儲和傳輸文本信息,但是和XML相比,JSON更小、更快、更易解析、更易編寫與閱讀。 ② C、Python、C++、Java、PHP、Go等編程語言都支持JSON。 二、JSON語法規則: ...
  • 1.避免Scoped模式註冊的服務變成Singleton模式 當提供一個生命周期模式為Singleton的服務實例時,如果發現該服務中還依賴生命周期模式為Scoped的服務實例(Scoped服務實例將被一個Singleton服務實例所引用),那麼這個被依賴的Scoped服務實例最終會成為一個Sing ...
  • 索引時資料庫提高數據查詢處理性能的一個非常關鍵的技術,索引的使用可以對性能產生上百倍甚至上千倍的影響。接下來,會介紹索引的基本原理、概念,並深入學習資料庫中所使用的索引結構和存儲方式,以及如何管理、維護索引等。 1.索引的基本概念 索引時用來快速查詢表記錄的一種存儲結構,一般使用索引有一下兩個方面: ...
  • django2 路由控制器 Route路由,是一種映射關係。路由是把客戶端請求的url路徑和用戶請求的應用程式,這裡意指django裡面的視圖進行綁定映射的一種關係。 請求路徑和視圖函數不是一一對應的關係 在django中所有的路由最終都被保存到一個叫urlpatterns的文件里,並且該文件必須在 ...
  • 1、我們的目標是獲取微博某博主的全部圖片、視頻 2、拿到網址後 我們先觀察 打開F12 隨著下滑我們發現載入出來了一個叫mymblog的東西,展開響應發現需要的東西就在裡面 3、重點來了!!! 通過觀察發現第二頁比第一頁多了參數since_id 而第二頁的since_id參數剛好在上一頁中能獲取到, ...
  • 一、實現原理 在Servlet3協議規範中,包含在JAR文件/META-INFO/resources/路徑下的資源可以直接訪問。 二、舉例說明 如下圖所示,是我新建的一個Spring Boot Starter項目:zimug-minitor-threadpool,用於實現可配置、可觀測的線程池。其中 ...
  • 精華筆記: static final常量:應用率高 必須聲明同時初始化 由類名打點來訪問,不能被改變 建議:常量所有字母都大寫,多個單詞用_分隔 編譯器在編譯時會將常量直接替換為具體的數,效率高 何時用:數據永遠不變,並且經常使用 抽象方法: 由abstract修飾 只有方法的定義,沒有具體的實現( ...
  • Python有一個for...else語法,它的寫法如下 for i in range(0,100): if i == 3: break else: print("Not found") 該語句表示:若for迴圈遍歷完畢,則執行else部分的語句。也就是說上述代碼不會有任何輸出,而下述代碼會輸出“N ...