如何制作微信小程序

這篇文章主要介紹如何制作微信小程序，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

注冊微信小程序

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

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

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

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

然后在左側導航欄點擊 “設置”，找到開發設置，獲得小程序的 AppID。

微信開發者工具

下載微信web開發者工具，根據自己的操作系統下載對應的安裝包進行安裝即可。

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

第一個小程序

新建項目

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

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

項目目錄結構

微信小程序的基本文件構造和項目目錄結構說明如下：

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

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

我們可以和 web 前端開發技術做個類比：

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

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

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

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

目標成果

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

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

步驟分解

Demo 代碼下載：https://gitee.com/luhuadong/Web_Learning/tree/master/WeChat/GoZeroWaster

分解目標成果：

1. 個人中心

2. 生活指南

3. 模擬彈窗

4. 預覽圖片

頁頭頁尾

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

最初的內容如下：

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

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

window 屬性用于設置小程序的狀態欄、導航條、標題、窗口背景色。

我們把頁頭的標題和顏色修改一下，頁尾部分我們做一個 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 是一個數組，主要用于設定導航的路徑。

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

個人中心

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

    <!--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>

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

<!--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}} 的做法，讓你知道在哪里修改這些數據。沒錯，就是在 index.js 文件：

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

wxml 文件中的 <view> 組件類似于網頁開發中的 <p>，而 <text> 組件是用來寫文本的，需要注意的是 <text/> 組件內只支持 <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=‘widthFix’  表示以寬度不變，高度自動變化，保持原圖寬高比不變的方式進行縮放以適應屏幕大小。

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

/**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 兩個目錄，因此我們還需要為第二個頁面創建一個目錄。

創建頁面有兩種方法：

• 在目錄結構的 pages 圖表上，新建目錄，然后在目錄下逐一創建頁面構成文件

• 在 app.json 下，直接添加

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

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

保存刷新之后就會發現，目錄結構里自動創建了這一頁。對應的，也要修改 app.json 中的 tabBar 的鏈接（實際上我們已經做了）：

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

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

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

修改 details.wxss 設置樣式：

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

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

// pages/details/details.jsPage({

  /**
   * 頁面的初始數據
   */
  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）的方法將這些數據綁定一個數組，并在頁面上重復渲染。修改 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>

默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 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;
    }

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

模擬彈窗

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

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

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

       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 來表示彈窗的狀態。如下：

  <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 事件處理，包括顯示和關閉事件：

      powerDrawer: function (e) {
        console.log("clicked");
    
        var currentStatu = e.currentTarget.dataset.statu;
        var index = e.currentTarget.id;
    
        // 關閉
        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  設置一下彈窗和遮罩層的樣式：

    .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，模擬彈窗也實現了。

預覽圖片

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

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

在 index.js 中添加 imgalist 項（我們直接把公眾號的二維碼圖片上傳到 CSDN 的圖片服務器了），并且實現 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鏈接列表
        })
      },

以上是“如何制作微信小程序”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！