Web前端_微信小程式實戰開發

来源:https://www.cnblogs.com/Vhaomei0452/archive/2019/07/17/11202479.html
-Advertisement-
Play Games

微信小程式開發實戰教程 一、微信小程式 它是一種混合開發的方式。 是安裝在微信中的程式（一個程式最多2M空間）。 1.1 註冊 1 2 點擊立即註冊：進入下方頁面 3 4 點擊小程式進入表單填寫頁面 5 6 填寫完畢之後提交，會讓你去郵箱中激活。激活之後就可以進入小程式開發了。 1.2 安裝開發工具 ...


微信小程式開發實戰教程

一、微信小程式

它是一種混合開發的方式。

是安裝在微信中的程式（一個程式最多2M空間）。

1.1 註冊

1 圖片1.png

2 點擊立即註冊：進入下方頁面

3 圖片2.png

4 點擊小程式進入表單填寫頁面

5 圖片3.png

6 填寫完畢之後提交，會讓你去郵箱中激活。激活之後就可以進入小程式開發了。

1.2 安裝開發工具

經過1.1註冊之後，我們有了開發賬號，但是沒有辦法憑空開發內容，我們需要下載開發工具。使用微信提供的開發工具進行開發。

下載地址：

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

進入之後，會看到讓你選擇版本的信息。

1 圖片4.png

選擇對應的版本進行安裝。 例如：我的電腦就是windows64位操作系統，那麼我就選Windows 64位

點擊之後就會開始下載

1 圖片5.png

下載完畢之後，得到一個安裝包

1 圖片6.png

雙擊進行安裝，下一步下一步直到結束。

安裝完畢之後，會自動打開登錄界面。有一個二維碼，通過微信掃描該二維碼登錄。

登錄之後

1 圖片7.png

1.3 創建小程式項目

點擊上圖中的小程式項目

1 圖片8.png

項目目錄：就是項目所在目錄

AppId： 小程式的id。你通過註冊之後會得到一個id。輸入它即可。

我們現在沒有註冊完畢，只能點擊測試小程式進行測試

項目名稱： 你當前創建的項目的名稱 這是唯一的。

填寫完畢之後：

1 圖片9.png

建立普通快速啟動模板： 如果勾選 則會在項目目錄下 自動創建一個demo案例

點擊確定之後，編輯器會啟動

1 圖片10.png

預覽視窗： 你編寫的小程式的預覽視窗，可以進行點擊 其實就是一個手機模擬器

功能視窗： 許多功能按鈕

目錄結構： 項目的目錄狀態

代碼編輯視窗：代碼可以在這裡編輯

調試視窗： 代碼書寫過程中，調試時，會在這裡輸出一些信息。也有控制台的功能也有文檔結構的功能。

1.4 目錄結構介紹

1.4.1 pages

這個文件夾，是用來放所有的小程式需要的頁面。

該文件夾中是一個一個的子文件夾，每一個子文件夾表示一個頁面。

預設創建出來的pages中有兩個：1 index 就代表index頁面  2 logs 就代表logs頁面

1.4.2 utils

這個文件夾，是用來放所有的工具的。可以刪除。

1.4.3 app.js

這個文件，叫做應用程式構造器。

整個應用程式的配置，都可以在這裡面書寫，主要是應用程式的聲明周期函數以及全局數據。

全局的腳本文件

App({

  /** onLaunch

   * 當小程式初始化完成時，會觸發 onLaunch（全局只觸發一次）

   */

  /** onShow

   * 當小程式啟動，或從後臺進入前臺顯示，會觸發 onShow

   */

  /**onHide

   * 當小程式從前臺進入後臺，會觸發 onHide

   */  

  /** onError

   * 當小程式發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 並帶上錯誤信息

   */

})

 

1.4.4 app.json

這個文件，是小程式的配置文件。

配置的是小程式的內容。

這是一個JSON文件 需要使用符合規範的JSON語法。

key必須要使用雙引號

不能有註釋

對象的最後一個屬性值之後不能有逗號

 

pages: 配置當前小程式在運行過程中所需要的頁面

它的值是一個數組，每一個成員是一個頁面文件的路徑 本質上是在說明index.wxml 但是可以省略尾碼

它有一個特點：如果在添加完某一項並保存之後，該文件和文件夾還沒有存在，則會自動創建出來

window: 配置小程式的界面的

"window"

    "backgroundTextStyle": 背景文字顏色

    "navigationBarBackgroundColor": 導航部分的背景顏色

    "navigationBarTitleText":  導航標題文本

    "navigationBarTextStyle":  導航文本顏色

"tabBar": 底部按鈕

"list": 每一個按鈕都配置在這裡面 它是一個數組

數組的成員是對象

        "pagePath": 點擊該按鈕的時候跳轉到哪個頁面 該屬性的值必須是pages數組中的某一項

        "text":  文本

        "iconPath": 圖標路徑,

        "selectedIconPath": 選中時候的圖標路徑

 

1.4.5 app.wxss

其實就是css文件。它裡面配置的內容是全局樣式。類似於我們的reset.css

這是一個全局樣式文件。會自動應用在所有頁面中。

1.4.6 project.config.json

這是針對項目的配置。

1.5 局部文件

pages是一個文件夾，該文件夾內是子文件夾，每一個子文件夾代表一個頁面。

子文件夾內：

1.5.1 局部腳本

.js文件： 局部腳本文件 該文件只對當前頁面生效

Page({

 

  /**data

   * 頁面的初始數據

   */

  /** onLoad

   * 生命周期函數--監聽頁面載入

   */

  /**onReady

   * 生命周期函數--監聽頁面初次渲染完成

   */  

  /**onShow

   * 生命周期函數--監聽頁面顯示

   */  

  /**onHide

   * 生命周期函數--監聽頁面隱藏

   */  

  /**onUnload

   * 生命周期函數--監聽頁面卸載

   */  

  /**onPullDownRefresh

   * 頁面相關事件處理函數--監聽用戶下拉動作

   */

  /**onReachBottom

   * 頁面上拉觸底事件的處理函數

   */  

  /**onShareAppMessage

   * 用戶點擊右上角分享

   */

})

1.5.2 局部樣式

位於頁面內的wxss文件，是針對當前頁面的局部樣式。與全局app.wxss一起負責當前頁面的樣式。如果有衝突，優先使用當前頁面的wxss樣式。

1.5.3 頁面骨架

頁面內有一個wxml文件，用於搭建當前頁面的骨架。

html文件內的標簽，我們叫做元素。

wxml文件內的標簽，我們叫做組件。因為對html元素進行了封裝。所以叫做組件。

 

 

二、混合開發

從一開始的瀏覽器只是一個內容發佈器開始，到後來的WebApp。

本質上都是在網頁端做事情。

Hybird就是混合開發。它的意思是： 一處開發，多端使用。

微信小程式就是屬於混合開發。

混合開發有三種形式：

1 hybird 瀏覽器渲染

2 reactnative 原生API

3微信小程式

三、屬性

對於一個html來說，內容是由標簽構成的。對於JS來說，我們稱標簽為 “元素”。

對於一個wxml來說，內容是由標簽構成的。對於JS來說，我們成標簽為“組件”。

其實，wxml就是對html的標簽進行了封裝。封裝之後，就不是元素了，而是組件。也不可以使用jQuery等內容。

3.1 通用屬性

對於html的標簽來說

標準屬性分為兩部分

一部分是所有的標簽都有的屬性（通用屬性）

另一部分是某一些標簽特有的屬性（特有屬性）

對於wxml的標簽來說

標準屬性分為兩部分

一部分是所有標簽都有的屬性（通用屬性）

另一部分是某一些標簽特有的屬性（特有屬性）

wxml中的通用屬性：

id  組件的id

class 用於通過類的形式設置樣式

style 行內樣式

hidden 用於隱藏組件

data-* 自定義屬性

bind* | catch* 事件屬性

非通用屬性：

image組件的src屬性等

四、數據相關

頁面所需的數據定義在對應的js文件的對象中。 屬性名叫做data。

微信小程式是屬於數據驅動。

頁面初始化時所需要的數據都必須先定義。

數據渲染的過程就是將對應的數據插入到頁面中的過程。（插值的過程）

插值語法： {{}}

註：它裡面並沒有提供一個真正的js環境，只是一個偽環境。 只能夠執行簡單的運算 而不能夠調用方法。

之前遇見過的插值語法：

underscore: <%=%>

MVC中: <%%>

ejs中: <%%>

ES6中： ${}

less中： @{}

sass中:  #{}

4.1 插值

插值模板:

1 <view>{{num * 2}}</view>

2 <view>{{title.toUpperCase()}}</view>

插值數據的定義：

1 data: {

2   num: 123,

3   title: "aichuangketang"

4 }

渲染之後：

1 圖片11.png

 

4.2 修改數據

要使用頁面去修改數據:

this.setData(option);

option 是一個對象

key: 要修改的屬性層級字元串 可以是單層級 可以是多層級

value: 要修改的對應key的值

demo:

更改數據之前：

1 圖片12.png

更改代碼：

1 onLoad: function (options) {

2   var me = this;

3   console.log("index頁面頁面載入")

4   setTimeout(function() {

5     me.setData({

6       title: "愛創課堂",

7       "obj.name": "王老四"

8     })

9     console.log(me)

10   }, 3000)

11 },

代碼執行之後：

1 圖片13.png

4.3 數據丟失

更改數據，一定要通過setData方法來修改。因為它是微信提供的方法。

如果使用點語法或者方括弧語法直接修改屬性的值。則無法渲染到頁面上。這就叫做數據丟失。

註：儘量只更改關鍵的信息。

demo:

更改數據之前：

1 圖片14.png

 更改代碼：

1 setTimeout(function() {

2   me.data.title = "愛創課堂";

3   console.log(me.data)

4 }, 3000)

數據狀態：

1 圖片15.png

頁面狀態：

1 圖片16.png

數據已經被修改，但是頁面沒有發生變化。

五、事件

根據事件的特性，有兩類

所有組件都擁有的事件 通用事件

touchstart 觸摸開始

touchend 觸摸結束

touchmove 觸摸移動

touchcancel 觸摸取消

tap 輕按

longtap 長按

longpress 長按

transitionend 過渡完成

animationstart 動畫開始

animationend 動畫結束

animationinteration 動畫執行一次就觸發一次

還有一類是某些（個）特定組件的特有事件

例如表單的提交事件

根據事件的綁定方式，也可以分成兩類

一類是冒泡事件

bind[eventName]

另一類是不冒泡事件

catch[eventName]

5.1 綁定冒泡事件

組件結構：

1 <!--pages/event/event.wxml-->

2 <view bindtap='parent'>

3     <view bindtap='show'>我是一個組件</view>

4 </view>

對應的js代碼：

1 // pages/event/event.js

2 Page({

3 

4   /**

5    * 頁面的初始數據

6    */

7   data: {

8   

9   },

10   // 定義show事件

11   show: function() {

12     console.log("點擊我了");

13   },

14   // 定義parent事件

15   parent: function() {

16     console.log("點擊到爸爸了")

17   }

18 })

點擊之後：兩個事件都會輸出

1 16後1.png

 

5.2 綁定不冒泡事件

組件結構：

1 <!--pages/event/event.wxml-->

2 <view bindtap='parent'>

3     <view catchtap='show'>我是一個組件</view>

4 </view>

代碼

1 // pages/event/event.js

2 Page({

3 

4   /**

5    * 頁面的初始數據

6    */

7   data: {

8   

9   },

10   // 定義show事件

11   show: function() {

12     console.log("點擊我了");

13   },

14   // 定義parent事件

15   parent: function() {

16     console.log("點擊到爸爸了")

17   }

18 })

點擊之後：只有子元素的事件觸發 父元素的事件沒有觸發

1 16後.png

5.3 事件對象

查看事件對象：

1 圖片17.png

changedTouches: 改變的手指的列表

currentTarget: 綁定事件的組件

id: 當前組件的id

offsetLeft: 該組件的距離父組件的left值

offsetTop: 該組件的距離父組件的top值

dataset: 該組件的自定義數據

detail: 手指位置

target: 觸發事件的組件

timeStamp：頁面載入到事件觸發的時間間隔

touches: 手指列表

type: 事件類型


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

-Advertisement-
Play Games
更多相關文章
  • 初識Node.js
    Node.js的應用領域 NodeJS宣稱其目標是“旨在提供一種簡單的構建可伸縮網路程式的方法”； Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm ...
  • jsonserver的安裝及啟動
    JsonServer 主要的作用就是搭建本地的數據介面，創建json文件，便於調試調用 是一個 Node 模塊，運行 Express 伺服器，可以指定一個 json 文件作為 api 的數據源 官網：https://www.npmjs.com/package/json-server 安裝全局的jso ...
  • ES6中 對字元串增強
    在曾經，我們只能用A.indexof（B）來判斷A中是否含有B字元串； 現在在ES6中 有了： includes(), startswith(),endswith() reapt()重覆次數； 輸出 `是一個新增的運算符，表示模板字元串。 輸出： 好高興啊，我買了一個手機，花了10元，我很高興啊！、 ...
  • 盒子模型
    內邊距和外邊距之間即為border，可以設置邊框，改變外觀； 而邊距可以調整齣所有想要的距離效果。 補充： ...
  • 我的前端佈局方法
    前些日子無聊的時候學了下前端，說實話沒有美感前端和搬磚沒有區別，唯一值得一提的就是他的佈局方法。我的這個方法用於寫死網頁，不含各種框架的自適應性功能，而且主要想記錄一下思想。 寫前端不同於演算法優化，演算法中經常是能少一個數組就少一個數組，而前端只要保證不亂，多套幾個div沒有任何關係，也沒人會深究你浪 ...
  • 將網址url中的參數轉化為JSON格式的兩種方法
    在我們進入主題前，我先先看下獲取網址URL的方法： window.location.href // 設置或獲取整個URL為字元串 window.location.hash // 設置或獲取href屬性中在井號#後面的部分參數 window.location.search // 設置或獲取href屬性 ...
  • 【微信小程式】mpvue中頁面之間傳值（全網唯一真正可行的方法，中指推了一下隱形眼鏡）
    摘要： mpvue中頁面之間傳值（註意：是頁面之間，不是組件之間） 場景：A頁面跳轉B頁面，在B頁面選擇商品，將商品名帶回A頁面並顯示 使用api： getCurrentPages step1： A頁面js: 先定義一個全局的對象that，然後在mouted中把this賦給that step2： B ...
  • 【微信小程式】手寫索引選擇器（城市列表，汽車品牌選擇列表）
    摘要： 小程式索引選擇器，點擊跳轉相應條目，索引可滑動，滑動也可跳轉 場景：城市選擇列表， 汽車品牌選擇列表 所用組件： scroll-view（小程式原生） https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類