微信小程序入門到實戰(1)-基礎知識

時間  2019-11-14
標籤 微信 程序 入門 實戰 基礎 知識 简体版
原文   原文鏈接

 1.微信小程序介紹

微信小程序，簡稱小程序，英文名Mini Program，是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或搜一下便可打開應用。html

1.1. 爲何是微信小程序 ？

  1. 微信有海量用戶，並且粘性很高，在微信裏開發產品更容易觸達用戶；vue

  2. 推廣app 或公衆號的成本過高。node

  3. 開發適配成本低。react

  4. 容易小規模試錯，而後快速迭代。git

  5. 跨平臺。github

 

1.2. 微信小程序歷史

  • 2016年1月11日，微信之父張小龍時隔多年的公開亮相，解讀了微信的四大價值觀。張小龍指出，愈來愈多產品經過公衆號來作，由於這裏開發、獲取用戶和傳播成本更低。拆分出來的服務號並無提供更好的服務，因此微信內部正在研究新的形態，叫「微信小程序」 須要注意的是，以前是叫作 應用號web

  • 2016年9月21日，微信小程序正式開啓內測。在微信生態下，觸手可及、用完即走的微信小程序引發普遍關注。騰訊雲正式上線微信小程序解決方案，提供小程序在雲端服務器的技術方案。json

  • 2017年1月9日，微信推出的「小程序」正式上線。「小程序」是一種無需安裝，便可使用的手機「應用」。不須要像往常同樣下載App，用戶在微信中「用完即走」。小程序

 

1.3. 瘋狂的微信小程序

  1. 微信月活已經達到10.82億。其中55歲以上的用戶也達到6300萬微信小程序

  2. 信息傳達數達到450億，較去年增加18%;視頻通話4.1億次,增加100%

  3. 小程序覆蓋超過200+行業，交易額增加超過6倍，服務1000億+人次,創造出了5000億+的商業價值

 

1.4. 還有其餘的小程序 不容忽視

  1. 支付寶小程序

  2. 百度小程序

  3. QQ小程序

  4. 今日頭條 + 抖音小程序

 

1.5. 體驗

1.5.1. 官方微信小程序體驗

小程序示例源碼

 

1.5.2. 其餘優秀的第三方小程序

  • 拼多多

  • 滴滴出行

  • 歡樂鬥地主

  • 智行火車票

  • 惟品會

  • 。。。

 

2. 環境準備

開發微信小程序以前，必需要準備好相應的環境

2.1. 註冊帳號

建議使用全新的郵箱，沒有註冊過其餘小程序或者公衆號的。

訪問註冊頁面，耐心完成註冊便可。

2.2. 獲取APPID

因爲後期調用微信小程序的接口等功能，須要索取開發者的小程序中的APPID，因此在註冊成功後，可登陸，而後獲取APPID。

登陸，成功後可看到以下界面

而後複製你的APPID,悄悄的保存起來，不要給別人看到。

 

2.3. 開發工具

下載地址

微信小程序自帶開發者工具，集 開發 預覽 調試 發佈 於一身的 完整環境。

可是因爲編碼的體驗不算好，所以 建議使用 vs code + 微信小程序編輯工具 來實現編碼

vs code 負責敲代碼，微信編輯工具 負責預覽。

 

3. 第一個微信小程序

3.1. 打開微信開發者工具

注意 第一次登陸的時候 須要掃碼登陸

3.2. 新建小程序項目

3.3. 填寫項目信息

3.4. 成功

 

4. 微信開發者工具介紹

詳細的使用，能夠查看官網

 

5. 小程序結構目錄

小程序框架的目標是經過儘量簡單、高效的方式讓開發者能夠在微信中開發具備原生 APP 體驗的服務。

小程序框架提供了本身的視圖層描述語言 WXML 和 WXSS，以及 JavaScript，並在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者可以專一於數據與邏輯。

5.1. 小程序文件結構和傳統web對比

 

經過以上對比得出，傳統web 是三層結構。而微信小程序 是四層結構，多了一層 配置.json

5.2. 基本的項目目錄

 

6. 小程序配置文件

一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的 app.json 和 頁面本身的 page.json

 注意：配置文件中不能出現註釋。

6.1. 全局配置 app.json

app.json 是當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。普通快速啓動項目裏邊的 app.json 配置。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含義

  1. pages字段 —— 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。

  2. window字段 —— 定義小程序全部頁面的頂部背景顏色，文字顏色定義等。

  3. 完整的配置信息請參考 app.json配置

6.1.1. tabbar

6.2. 頁面配置 page.json

這裏的 page.json 其實用來表示頁面目錄下的 page.json 這類和小程序頁面相關的配置。

開發者能夠獨立定義每一個頁面的一些屬性，如頂部顏色、是否容許下拉刷新等等。

頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

 

6.3.sitemap 配置-瞭解便可

小程序根目錄下的 sitemap.json 文件用於配置小程序及其頁面是否容許被微信索引。

 

7. 模板語法

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。

7.1. 數據綁定

7.1.1. 普通寫法
<view> {{ message }} </view>

 

Page({
  data: {
    message: 'Hello MINA!'
  }
})

 

7.1.2. 組件屬性
<view id="item-{{id}}"> </view>

 

Page({
  data: {
    id: 0
  }
})

 

7.1.3. bool類型

不要直接寫 checked="false"，其計算結果是一個字符串

<checkbox checked="{{false}}"> </checkbox>

 

7.2. 運算

7.2.1. 三元運算
<view hidden="{{flag ? true : false}}"> Hidden </view>

 

7.2.2. 算數運算
<view> {{a + b}} + {{c}} + d </view>

 

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

 

7.2.3. 邏輯判斷
<view wx:if="{{length > 5}}"> </view>

 

7.2.4. 字符串運算
<view>{{"hello" + name}}</view>

 

Page({
  data:{
    name: 'MINA'
  }
})

 

7.2.5. 注意

花括號和引號之間若是有空格，將最終被解析成爲字符串

 

7.3. 列表渲染

7.3.1. wx:for

項的變量名默認爲 item wx:for-item 能夠指定數組當前元素的變量名

下標變量名默認爲 index wx:for-index 能夠指定數組當前下標的變量名

wx:key 用來提升數組渲染的性能

wx:key 綁定的值 有以下選擇

1. string 類型，表示 循環項中的惟一屬性 如

list:[{id:0,name:"炒飯"},{id:1,name:"炒麪"}]

wx:key="id"

 

2.保留字 *this ，它的意思是 item 自己 ，*this 表明的必須是 惟一的字符串和數組。

list:[1,2,3,4,5]

wx:key="*this"

代碼：

<view wx:for="{{array}}" wx:key="id">
  {{index}}: {{item.message}}
</view>

 

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
    }, {
      id:1,
      message: 'bar'
    }]
  }
})

 

7.3.2. block

渲染一個包含多節點的結構塊 block最終不會變成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

 

7.4. 條件渲染

7.4.1. wx:if

在框架中，使用 wx:if="{{condition}}" 來判斷是否須要渲染該代碼塊：

 

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>
7.4.2. hidden
<view hidden="{{condition}}"> True </view>

相似 wx:if

頻繁切換 用 hidden

不常使用 用 wx:if

 

8. 小程序事件的綁定

小程序中綁定事件，經過bind關鍵字來實現。如 bindtap bindinput bindchange 等

不一樣的組件支持不一樣的事件，具體看組件的說明便可。

8.1. wxml

<input bindinput="handleInput" />

8.2. page

Page({
  // 綁定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改變了");
  }
})

8.3. 特別注意

1.綁定事件時不能帶參數 不能帶括號 如下爲錯誤寫法

<input bindinput="handleInput(100)" />

2.事件傳值 經過標籤自定義屬性的方式 和 value

<input bindinput="handleInput" data-item="100" />

3.事件觸發時獲取數據

  handleInput: function(e) {
    // {item:100}
   console.log(e.currentTarget.dataset)
      
    // 輸入框的值
   console.log(e.detail.value);
  }

 

9. 樣式 WXSS

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的組件樣式。

與 CSS 相比，WXSS 擴展的特性有：

  • 響應式長度單位 rpx

  • 樣式導入

9.1. 尺寸單位

rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建議： 開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。

使用步驟：

  1. 肯定設計稿寬度 pageWidth

  2. 計算比例 750rpx = pageWidth px ,所以 1px=750rpx/pageWidth。

  3. 在less文件中，只要把設計稿中的 px => 750/pageWidth rpx 便可。

9.2. 樣式導入

wxss中直接就支持，樣式導入功能。

也能夠和 less中的導入混用。

使用@import語句能夠導入外聯樣式表，只支持相對路徑。

示例代碼：

/** common.wxss **/
.small-p {
  padding:5px;
}

 

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

 

9.3. 選擇器

特別須要注意的是 小程序 不支持通配符 * 所以如下代碼無效！

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

目前支持的選擇器有：

9.4. 小程序中使用less

原生小程序不支持less，其餘基於小程序的框架大致都支持，如wepy，mpvue，taro等。可是僅僅由於一個less功能，而去引入一個框架，確定是不可取的。所以能夠用如下方式來實現。

  1. 編輯器是vscode

  2. 安裝插件 easy less

3. 在vs code的設置中加入以下，配置

    "less.compile": {
        "outExt":       ".wxss"
    }

 

在要編寫樣式的地方，新建 less文件，如 index.less,而後正常編輯便可。

 

10. 常見組件

https://developers.weixin.qq.com/miniprogram/dev/component/

重點講解小程序中經常使用的佈局組件 view,text,rich-text,button,image,navigator,icon,swiper,radio,checkbox等

10.1. view

代替 原來的 div 標籤

  <view hover-class="h-class">
  點擊我試試
  </view>

10.2. text

  1. 文本標籤

  2. 只能嵌套text

  3. 長按文字能夠複製（只有該標籤有這個功能）

  4. 能夠對空格 回車 進行編碼

10.2.1. 代碼
  <text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>

10.3. image

  1. 圖片標籤，image組件默認寬度320px、高度240px

  2. 支持懶加載

 

mode 有效值：

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

10.4.swiper

微信內置輪播圖組件

 

默認寬度 100% 高度 150px

10.4.1. swiper

 滑塊視圖容器。

10.4.2. swiper-item

滑塊，默認寬度和高度都是100%

10.5. navigator

 導航組件 相似超連接標籤

open-type 有效值：

10.6. rich-text

富文本標籤

能夠將字符串解析成 對應標籤，相似 vue中 v-html功能

 

代碼

// 1   index.wxml  加載 節點數組
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加載 字符串
<rich-text nodes='<img src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.png" alt="">'></rich-text> 
 
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },
  tap() {
    console.log('tap')
  }
})
10.6.1. nodes屬性

nodes屬性支持 字符串 和 標籤節點數組

文本節點：type = text

  • nodes 不推薦使用 String 類型，性能會有所降低。

  • rich-text 組件內屏蔽全部節點的事件。

  • attrs 屬性不支持 id ，支持 class 。

  • name 屬性大小寫不敏感。

  • 若是使用了不受信任的 HTML 節點，該節點及其全部子節點將會被移除。

  • img 標籤僅支持網絡圖片。

10.7. button

<button
  type="default"
  size="{{defaultSize}}"
  loading="{{loading}}"
  plain="{{plain}}"
>
  default
</button>

 

 size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

open-type 的 contact的實現流程

  1. 將小程序 的appid 由測試號改成 本身的appid

  2. 登陸微信小程序官網，添加 客服 - 微信

  3. 爲了方便演示，我本身準備了兩個帳號

    1. 普通用戶 A

    2. 客服-微信 B

  4. 就是幹！

10.8. icon

 

 

 代碼:

 js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
    ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
    ],
  }
})

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view>

<view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

 

10.9. radio

能夠經過 color屬性來修改顏色

須要搭配 radio-group 一塊兒使用

10.10. checkbox

能夠經過 color屬性來修改顏色

須要搭配 checkbox-group 一塊兒使用

 

11. 自定義組件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

相似vue或者react中的自定義組件

小程序容許咱們使用自定義組件的方式來構建頁面。

11.1. 建立自定義組件

相似於頁面，一個自定義組件由 json wxml wxss js 4個文件組成.

能夠在微信開發者工具中快速建立組件的文件結構

 

 

在文件夾內components/myHeader，建立組件 名爲 myHeader

11.1.1. 聲明組件

首先須要在組件的 json 文件中進行自定義組件聲明

myHeader.json

{
  "component": true
}
11.1.2. 編輯組件

同時，還要在組件的 wxml 文件中編寫組件模板，在 wxss 文件中加入組件樣式。

slot表示插槽，相似vue中的slot

myHeader.wxml

<!-- 這是自定義組件的內部WXML結構 -->
<view class="inner">
  {{innerText}}
    <slot></slot>
</view>

在組件的 wxss文件中編寫樣式

注意：在組件wxss中不該使用ID選擇器、屬性選擇器和標籤名選擇器。

myHeader.wxss

/* 這裏的樣式只應用於這個自定義組件 */
.inner {
  color: red;
}
11.1.3. 註冊組件

在組件的 js 文件中，須要使用 Component() 來註冊組件，並提供組件的屬性定義、內部數據和自定義方法

 

myHeader.js

Component({
  properties: {
    // 這裏定義了innerText屬性，屬性值能夠在組件使用時指定
    innerText: {
      // 指望要的數據是 string類型
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 這裏是一些組件內部數據
    someData: {}
  },
  methods: {
    // 這裏是一個自定義方法
    customMethod: function(){}
  }
})

11.2. 聲明引入自定義組件

首先要在頁面的 json 文件中進行引用聲明。還要提供對應的組件名和組件路徑。

index.wxml

{
    // 引用聲明
  "usingComponents": {
      // 要使用的組件的名稱     // 組件的路徑
    "my-header":"/components/myHeader/myHeader"
  }
}

11.3. 頁面中使用自定義組件

<view>
  <!-- 如下是對一個自定義組件的引用 -->
  <my-header inner-text="Some text">
    <view>用來替代slot的</view>
    </my-header>
</view>

11.4. 定義段與示例方法

Component構造器可用於定義組件，調用Component構造器時能夠指定組件的屬性、數據、方法等。

11.5. 組件-自定義組件傳參

  1. 父組件經過屬性的方式給子組件傳遞參數

  2. 子組件經過事件的方式向父組件傳遞參數

11.5.1. 過程

  1. 父組件 把數據 {{tabs}} 傳遞到 子組件的 tabItems 屬性中

  2. 父組件 監聽 onMyTab 事件

  3. 子組件 觸發 bindmytap 中的 mytap 事件

    1. 自定義組件觸發事件時，須要使用 triggerEvent 方法，指定事件名、detail對象

  4. 父 -> 子 動態傳值 this.selectComponent("#tabs");

 父組件代碼

// page.wxml 

<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
  內容-這裏能夠放插槽
</tabs>

// page.js
  data: {
    tabs:[
      {name:"體驗問題"},
      {name:"商品、商家投訴"}
    ]
  },
  onMyTab(e){
    console.log(e.detail);
  },

子組件代碼

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>

// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
    }
  },
  /**
   * 組件的初始數據
   */
  data: {
  },

  /**
   * 組件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
    }
  }
})

11.6. 小結

  1. 標籤名 是 中劃線的方式

  2. 屬性的方式 也是要中劃線的方式

  3. 其餘狀況可使用駝峯命名

    1. 組件的文件名如 myHeader.js 的等

    2. 組件內的要接收的屬性名 如 innerText

  4. 更多。。

 

12. 小程序生命週期

分爲應用生命週期和頁面生命週期

 

關於小程序先後臺的定義和小程序的運行機制，請參考運行機制章節。

12.1. 應用生命週期

12.2. 頁面生命週期

12.3. 頁面生命週期圖解

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程