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
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 很多軟體工程師都認為MD5是一種加密演算法,然而這種觀點是不對的。作為一個 1992 年第一次被公開的演算法,到今天為止已經被髮現了一些致命的漏洞。本文討論MD5在密碼保存方面的一些問題。 ...
  • Maven可以使我們在構建項目時需要用到很多第三方類jar包,如下一些常用jar包 而maven的出現可以讓我們避免手動導入jar包出現的某些問題,它可以自動下載那須所需要的jar包 我們只需要在創建的maven項目自動生成的pom.xml中輸入如下代碼 <dependencies> <!--ser ...
  • 來源:https://developer.aliyun.com/article/694020 非同步調用幾乎是處理高併發Web應用性能問題的萬金油,那麼什麼是“非同步調用”? “非同步調用”對應的是“同步調用”,同步調用指程式按照定義順序依次執行,每一行程式都必須等待上一行程式執行完成之後才能執行;非同步調 ...
  • 1.面向對象 面向對象編程是在面向過程編程的基礎上發展來的,它比面向過程編程具有更強的靈活性和擴展性,所以可以先瞭解下什麼是面向過程編程: 面向過程編程的核心是過程,就是分析出實現需求所需要的步驟,通過函數一步一步實現這些步驟,接著依次調用即可,再簡單理解就是程式 從上到下一步步執行,從頭到尾的解決 ...
  • 10瓶毒藥其中只有一瓶有毒至少需要幾隻老鼠可以找到有毒的那瓶 身似浮雲,心如飛絮,氣若游絲。 用二分查找和二進位位運算的思想都可以把死亡的老鼠降到最低。 其中,二進位位運算就是每一隻老鼠代表一個二進位0或1,0就代表老鼠存活,1代表老鼠死亡;根據數學運算 23 = 8、24 = 16,那麼至少需要四 ...
  • 一、Kafka存在哪些方面的優勢 1. 多生產者 可以無縫地支持多個生產者,不管客戶端在使用單個主題還是多個主題。 2. 多消費者 支持多個消費者從一個單獨的消息流上讀取數據,而且消費者之間互不影響。 3. 基於磁碟的數據存儲 支持消費者非實時地讀取消息,由於消息被提交到磁碟,根據設置的規則進行保存 ...
  • 大家好,我是陶朱公Boy。 前言 上一篇文章《關於狀態機的技術選型,最後一個真心好》我跟大家聊了一下關於”狀態機“的話題。從眾多技術選型中我也推薦了一款阿裡開源的狀態機—“cola-statemachine”。 於是就有小伙伴私信我,自己項目也考慮引入這款狀態機,但網上資料實在太少,能不能系統的介紹 ...
  • 使用腳本自動跑實驗(Ubuntu),將實驗結果記錄在文件中,併在實驗結束之後將結果通過郵件發送到郵箱,最後在windows端自動解析成excel表格。 ...
  • 話說在前面,我不是小黑子~ 我是超級大黑子😏 表弟大周末的跑來我家,沒事幹天天騷擾我,搞得我都不能跟小姐姐好好聊天了,於是為了打發表弟,我決定用Python做一個小游戲來消耗一下他的精力,我思來想去,決定把他變成小黑子,於是做了一個坤坤打籃球的游戲,沒想到他還挺愛玩的~ 終於解放了,於是我把游戲寫 ...