微信小程序入門開發(fā)實例分析

這篇“微信小程序入門開發(fā)實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序入門開發(fā)實例分析”文章吧。

注冊微信小程序

如果你還沒有微信公眾平臺的賬號，請先進入微信公眾平臺首頁，點擊 “立即注冊” 按鈕進行注冊。注冊的賬號類型可以是訂閱號、服務號、小程序以及企業(yè)微信，我們選擇 “小程序” 即可。

接著填寫賬號信息，需要注意的是，填寫的郵箱必須是未被微信公眾平臺注冊、未被個人微信號綁定的郵箱，而且每個郵箱僅能申請一個小程序。

激活郵箱之后，選擇主體類型為 “個人類型”，并按要求登記主體信息。主體信息提交后不可修改，該主體將成為你使用微信公眾平臺各項服務和功能的唯一法律主體與締約主體，在后續(xù)開通其他業(yè)務功能時不得變更或修改。

一切 OK 就可以直接進入小程序的管理平臺了。如果直接跳轉(zhuǎn)失敗，也可以從微信公眾平臺上手動登錄。填寫小程序的基本信息，包括名稱、圖標、描述等。提交成功之后，再添加開發(fā)者。開發(fā)者默認為管理員，我們也可以從這里新增綁定開發(fā)者，這是管理員才有權(quán)限的操作。

然后在左側(cè)導航欄點擊 “設(shè)置”，找到開發(fā)設(shè)置，獲得小程序的 AppID。

微信開發(fā)者工具

下載微信web開發(fā)者工具，根據(jù)自己的操作系統(tǒng)下載對應的安裝包進行安裝即可。

打開開發(fā)者工具，用微信掃碼登錄開發(fā)者工具，準備開發(fā)你的第一個小程序吧！

第一個小程序

新建項目

打開開發(fā)者工具，選擇 “小程序項目”，點擊右下角的 “+” 新建項目。

選擇一個空的文件夾作為項目目錄，填入剛剛的 AppID，再填寫一個項目名稱，比如我這里叫做 GoZeroWaster。點擊 “確定” 進入工具主界面。

項目目錄結(jié)構(gòu)

微信小程序的基本文件構(gòu)造和項目目錄結(jié)構(gòu)說明如下：

    .
    ├── app.js     # 小程序的邏輯文件
    ├── app.json   # 小程序的配置文件
    ├── app.wxss   # 全局公共樣式文件
    ├── pages      # 存放小程序的各個頁面
    │   ├── index  # index頁面
    │   │   ├── index.js     # 頁面邏輯
    │   │   ├── index.wxml   # 頁面結(jié)構(gòu)
    │   │   └── index.wxss   # 頁面樣式表
    │   └── logs   # logs頁面
    │       ├── logs.js      # 頁面邏輯
    │       ├── logs.json    # 頁面配置
    │       ├── logs.wxml    # 頁面結(jié)構(gòu)
    │       └── logs.wxss    # 頁面樣式表
    ├── project.config.json
    └── utils
        └── util.js

根目錄下有3個文件：app.js、app.json、app.wxss，小程序必須有這3個描述 APP 的文件，并放在根目錄下。這3個是應用程序級別的文件，與之平行的還有一個 pages 文件夾，用來存放小程序的各個頁面。

我們可以和 web 前端開發(fā)技術(shù)做個類比：

• wxml 類似于 HTML 文件，用來編寫頁面的標簽和骨架，但里面只能用小程序自己封裝的組件；

• wxss 類似于 CSS 文件，用來編寫頁面樣式，只是把 css 文件換成了 wxss 文件；

• js 文件類似于前端編程中的 JavaScript 文件，用來編寫小程序的頁面邏輯；

• json 文件用來配置頁面的樣式和行為。

目標成果

我們先來看看最終的目標和成果，很簡單，一共兩頁：

（為了讓廣大程序員也能保護環(huán)境和熱愛生活，我特意選了 “零垃圾生活” 主題來做 Demo）

步驟分解

分解目標成果：

• 個人中心

• 生活指南

• 模擬彈窗

• 預覽圖片

頁頭頁尾

在目標成果預覽中我們看到，兩個頁面都有共同的部分 —— 頁頭和頁尾。所以在構(gòu)建頁面內(nèi)容之前，我們先把頁頭和頁尾處理好。我們很容易猜到，這兩部分屬于小程序的全局配置，因此需要修改 app.json 文件。

最初的內(nèi)容如下：

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

pages 屬性用來設(shè)置頁面路徑，它是一個數(shù)組，每一項都是字符串來指定小程序由哪些頁面組成。數(shù)組的第一項代表小程序的初始頁面。小程序中新增或減少頁面，都需要對 pages 數(shù)組進行修改。

window 屬性用于設(shè)置小程序的狀態(tài)欄、導航條、標題、窗口背景色。

我們把頁頭的標題和顏色修改一下，頁尾部分我們做一個 tab 欄來切換頁面，這個屬性叫做 tabBar，代碼如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2f2f8f",
    "navigationBarTitleText": "GoZeroWaste",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "color": "#bfc1ab",
    "selectedColor": "#13b11c",
    "backgroundColor": "#1f1f4f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "個人中心"
      },
      {
        "pagePath": "pages/details/details",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "生活指南"
      }
    ]
  }
}

（所用到的圖片放在項目的 image 目錄，你也可以使用自己的圖片）

這里用到幾個 tabBar 的屬性是 color、selectedColor、backgroundColor 和 list，list 是一個數(shù)組，主要用于設(shè)定導航的路徑。

CTRL + S 保存之后，模擬器就會自動刷新，馬上可以看到效果。

個人中心

簡單起見，我們就在 pages/index 目錄下實現(xiàn) “個人中心” 頁面好了。雙擊打開 index.wxml，初始內(nèi)容如下：

    <!--index.wxml-->
    <view class="container">
      <view class="userinfo">
        <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
          <text class="userinfo-nickname">{{userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{{motto}}</text>
      </view>
    </view>

這里已經(jīng)有一些代碼了，雖然現(xiàn)在可能還看不懂，但我們知道，這就是現(xiàn)在頁面的源代碼。我們把 “Hello World” 部分注釋掉，增加我們希望顯示的內(nèi)容：

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
   <!-- <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>  -->
  <view class="ID_Badge">
    <view>
      <text class="ID_info">{{company}}</text>
    </view>
    <view>
      <text class='ID_info'>{{position}}</text>
    </view>
    <view>
      <text class='ID_info'>{{lesson}}</text>
    </view>
  </view>
</view>

這里分別使用 {{company}}、{{position}} 和 {{lesson}} 作為占位符，用法類似于 Django 的模板語言。當然也可以直接用相應的字符來替換它，只不過我們想沿用 {{motto}} 的做法，讓你知道在哪里修改這些數(shù)據(jù)。沒錯，就是在 index.js 文件：

Page({
  data: {
    motto: 'Hello World',
    company: "GoZeroWaste",
    lesson: "21天零垃圾生活指南",
    position: "垃圾魔法師",
    /* ... */
  },

wxml 文件中的 <view> 組件類似于網(wǎng)頁開發(fā)中的 <div>，而 <text> 組件是用來寫文本的，需要注意的是 <text/> 組件內(nèi)只支持 <text/> 嵌套。當然，可用用 <image> 插入圖片，圖片要保存到 image 目錄，否則在測試的時候是無法上傳的。

    <view class="ID_Badge">
        <!-- 省略 -->
        <view>
          <text class='ID_info'>{{lesson}}</text>
        </view>
        <view>
          <image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg'></image>
        </view>
      </view>

mode=&lsquo;widthFix&rsquo; 表示以寬度不變，高度自動變化，保持原圖寬高比不變的方式進行縮放以適應屏幕大小。

接下來還需要修改 index.wxss 文件來設(shè)置樣式：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}
.ID_Badge {
  padding-top: 20rpx;
  color: blue;
}
.ID_info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pics {
  width: 400rpx;
}

保存刷新，“個人中心” 頁面就完成了。

生活指南

原來的項目中 pages 目錄下只有 index 和 logs 兩個目錄，因此我們還需要為第二個頁面創(chuàng)建一個目錄。

創(chuàng)建頁面有兩種方法：

• 在目錄結(jié)構(gòu)的 pages 圖表上，新建目錄，然后在目錄下逐一創(chuàng)建頁面構(gòu)成文件

• 在 app.json 下，直接添加

建議采用第二種方法，修改 app.json 文件：

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs",
        "pages/details/details"
      ],

保存刷新之后就會發(fā)現(xiàn)，目錄結(jié)構(gòu)里自動創(chuàng)建了這一頁。對應的，也要修改 app.json 中的 tabBar 的鏈接（實際上我們已經(jīng)做了）：

    	{
            "pagePath": "pages/details/details",
            "iconPath": "image/icon_API.png",
            "selectedIconPath": "image/icon_API_HL.png",
            "text": "生活指南"
        }

然后修改 details.wxml 設(shè)置這一頁的標題：

    <!--pages/details/details.wxml-->
    <view>
      <view class='title'>
        <text>21天零垃圾生活指南</text>
      </view>
    </view>

修改 details.wxss 設(shè)置樣式：

    /* pages/details/details.wxss */
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
      font-size: 40rpx;
    }

這個頁面是一個列表展示的頁面，我們先在 details.js 文件中準備好數(shù)據(jù)：

// pages/details/details.js
Page({
  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    showModalStatus: false,
    list: [
      {
        id: 0,
        name : "寫一篇《垃圾日記》",
        introduce: "零垃圾并不是一項宏大的工程，而是由日常生活中一個個小小的習慣和選擇組成的。最難的，是邁出第一步。",
        src: '../../image/day01.jpg',
        showModalStatus: false,
        catalog: [
          { section: "1. xxx" },
          { section: "2. xxx" },
          { section: "3. xxx" },
          { section: "4. xxx" },
        ]
      },
      {
        id: 1,
        name: "帶上自己的購物袋",
        introduce: "在我們家，當時垃圾桶里最多的就是塑料袋，而這些袋子跟著我回家后，都幾乎難逃被丟進垃圾桶的命運。",
        src: '../../image/day02.jpg',
        showModalStatus: false,
        catalog: [
          { section: "1. xxx" },
          { section: "2. xxx" },
          { section: "3. xxx" },
          { section: "4. xxx" },
        ]
      },
      /* 省略 */
    ]
  },

接下來我們要使用列表渲染（wx:for）的方法將這些數(shù)據(jù)綁定一個數(shù)組，并在頁面上重復渲染。修改 details.wxml 文件：

      <view>
        <view wx:for="{{list}}" wx:key="id" >
          <view class="lesson" id="{{item.id}}">
            <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
            <view class="lessonName">{{item.name}}</view>
            <view class="lessonIntroduce">{{item.introduce}}</view>
          </view>
        </view>
      </view>

默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 item。

修改 details.wxss 文件添加樣式：

    .lesson {
      height: 190rpx;
      padding-left: 20rpx;
    }
    .lessonPic {
      position: absolute;
      height: 150rpx;
      width: 150rpx;
    }
    .lessonName {
      position: absolute;
      margin-left: 220rpx;
      font-size: 35rpx;
    }
    .lessonIntroduce {
      position: absolute;
      margin-left: 220rpx;
      margin-top: 60rpx;
      margin-right: 20rpx;
      color: rgb(185, 161, 161);
      font-size: 28rpx;
    }

好啦，第二個頁面也完成了。

模擬彈窗

接下來我們要在 “生活指南” 頁面模擬一個彈窗的效果，正常的時候不顯示，只有在點擊的時候才出現(xiàn)，摁下面的 “確定” 就會消失。

完了實現(xiàn)這個功能，我們要在組件中綁定一個事件處理函數(shù) bindtap，點擊該組件的時候，小程序會在該頁面對應的 Page 中找到相應的事件處理函數(shù)。

我們先在 details.js 中為每一列數(shù)據(jù)里引入一個 boolean 變量 showModalStatus 來描述對應的彈窗狀態(tài)，并且初始值為 false，表示不顯示。同時外層也增加一個初始值為 false 的 showModalStatus 變量實現(xiàn)遮罩效果。如下：

       data: {
        showModalStatus: false,
        list: [
          {
            id: 0,
            name : "寫一篇《垃圾日記》",
            introduce: "零垃圾并不是一項宏大的工程，而是由日常生活中一個個小小的習慣和選擇組成的。最難的，是邁出第一步。",
            src: '../../image/day01.jpg',
            showModalStatus: false,
            catalog: [
              { section: "1. xxx" },
              { section: "2. xxx" },
              { section: "3. xxx" },
              { section: "4. xxx" },
            ]
          },

然后在 details.wxml 中插入彈窗，并用條件渲染（wx:if）來判斷是否渲染（顯示）彈窗。同時為每一個 item 添加 data-statu 來表示彈窗的狀態(tài)。如下：

  <view>
    <view wx:for="{{list}}" wx:key="id" >
      <view class="lesson" bindtap='powerDrawer' data-statu='open' id="{{item.id}}">
        <image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
        <view class="lessonName">{{item.name}}</view>
        <view class="lessonIntroduce">{{item.introduce}}</view>
      </view>
      <!-- 彈窗 -->
      <view class='drawer_box' wx:if='{{item.showModalStatus}}' id='{{item.id}}'>
        <view class="title">{{item.name}}</view>
        <view class='drawer_content'>
          <view class='title' wx:for='{{item.catalog}}' wx:for-item='catalog' wx:key='id'>
            {{catalog.section}}
          </view>
        </view>
        <!-- 確定按鈕 -->
        <view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{item.id}}'>確定</view>
      </view>
    </view>
    <!-- 遮罩層 -->
    <view class='drawer_screen' data-statu='close' wx:if='{{showModalStatus}}'></view>
  </view>

在 details.js 添加 powerDrawer 事件處理，包括顯示和關(guān)閉事件：

      powerDrawer: function (e) {
        console.log("clicked");
        var currentStatu = e.currentTarget.dataset.statu;
        var index = e.currentTarget.id;
        // 關(guān)閉
        if (currentStatu == 'close') {
          this.data.list[index].showModalStatus = false;
          this.setData({
            showModalStatus: false,
            list: this.data.list,
          });
        }
        // 顯示
        if (currentStatu == 'open') {
          this.data.list[index].showModalStatus = true;
          this.setData({
            showModalStatus: true,
            list: this.data.list,
          });
        }
      },

最后在 details.wxss 設(shè)置一下彈窗和遮罩層的樣式：

    .drawer_box {
      width: 650rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      z-index: 1001;
      background: #FAFAFA;
      margin: -150px 50rpx 0 50rpx;
    }
    .drawer_content {
      border-top: 1.5px solid #E8E8EA;
      height: 210px;
      overflow-y: scroll; /* 超出父盒子高度可滾動 */
    }
    .btn_ok {
      padding: 10px;
      font: 20px "microsoft yahei";
      text-align: center;
      border-top: 1.5px solid #E8E8EA;
      color: #3CC51F;
    }
    .drawer_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background: black;
      opacity: 0.5;
      overflow: hidden;
    }

OK，模擬彈窗也實現(xiàn)了。

預覽圖片

最后一步就是在第一個頁面實現(xiàn)圖片預覽和圖片保存的功能，在 index.wxml 中為圖片添加一個點擊事件 previewImage。

    <image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg' bindtap='previewImage'></image>

在 index.js 中添加 imgalist 項（我們直接把公眾號的二維碼圖片上傳到 CSDN 的圖片服務器了），并且實現(xiàn) previewImage 事件處理。如下：

    Page({
      data: {
        motto: 'Hello World',
        company: "GoZeroWaste",
        lesson: "21天零垃圾生活指南",
        position: "垃圾魔法師",
        imgalist: ['https://img-blog.csdnimg.cn/20190109104518898.jpg'],
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      previewImage: function (e) {
        wx.previewImage({
          current: this.data.imgalist,  // 當前顯示圖片的http鏈接
          urls: this.data.imgalist      // 需要預覽的圖片http鏈接列表
        })
      },

以上就是關(guān)于“微信小程序入門開發(fā)實例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。