如何制作微信小程序

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

創(chuàng)新互聯(lián)于2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元曲阜做網(wǎng)站,已為上家服務(wù),為曲阜各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

如何制作微信小程序

注冊微信小程序

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

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

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

如何制作微信小程序

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

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

微信開發(fā)者工具

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

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

第一個小程序

新建項(xiàng)目

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

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

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

微信小程序的基本文件構(gòu)造和項(xiàng)目目錄結(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個是應(yīng)用程序級別的文件，與之平行的還有一個 pages 文件夾，用來存放小程序的各個頁面。

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

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

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

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

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

目標(biāo)成果

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

如何制作微信小程序

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

步驟分解

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

分解目標(biāo)成果：

  1. 個人中心

  2. 生活指南

  3. 模擬彈窗

  4. 預(yù)覽圖片

頁頭頁尾

在目標(biāo)成果預(yù)覽中我們看到，兩個頁面都有共同的部分 —— 頁頭和頁尾。所以在構(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ù)組，每一項(xiàng)都是字符串來指定小程序由哪些頁面組成。數(shù)組的第一項(xiàng)代表小程序的初始頁面。小程序中新增或減少頁面，都需要對 pages 數(shù)組進(jìn)行修改。

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

我們把頁頭的標(biāo)題和顏色修改一下，頁尾部分我們做一個 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": "生活指南"
      }
    ]
  }}

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

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

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

個人中心

如何制作微信小程序

簡單起見，我們就在 pages/index 目錄下實(shí)現(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 的模板語言。當(dāng)然也可以直接用相應(yīng)的字符來替換它，只不過我們想沿用 {{motto}} 的做法，讓你知道在哪里修改這些數(shù)據(jù)。沒錯，就是在 index.js 文件：

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

wxml 文件中的 <view> 組件類似于網(wǎng)頁開發(fā)中的 <p>，而 <text> 組件是用來寫文本的，需要注意的是 <text/> 組件內(nèi)只支持 <text/> 嵌套。當(dāng)然，可用用 <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’  表示以寬度不變，高度自動變化，保持原圖寬高比不變的方式進(jìn)行縮放以適應(yīng)屏幕大小。

接下來還需要修改 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;}

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

生活指南

如何制作微信小程序

原來的項(xiàng)目中 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)建了這一頁。對應(yīng)的，也要修改 app.json 中的 tabBar 的鏈接（實(shí)際上我們已經(jīng)做了）：

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

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

    <!--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 文件中準(zhǔn)備好數(shù)據(jù)：

// pages/details/details.jsPage({

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

接下來我們要使用列表渲染（wx:for）的方法將這些數(shù)據(jù)綁定一個數(shù)組，并在頁面上重復(fù)渲染。修改 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>

默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 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;
    }

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

模擬彈窗

如何制作微信小程序

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

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

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

       data: {
        showModalStatus: false,
        list: [
          {
            id: 0,
            name : "寫一篇《垃圾日記》",
            introduce: "零垃圾并不是一項(xiàng)宏大的工程，而是由日常生活中一個個小小的習(xí)慣和選擇組成的。最難的，是邁出第一步。",
            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，模擬彈窗也實(shí)現(xiàn)了。

預(yù)覽圖片

如何制作微信小程序

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

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

在 index.js 中添加 imgalist 項(xiàng)（我們直接把公眾號的二維碼圖片上傳到 CSDN 的圖片服務(wù)器了），并且實(shí)現(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,  // 當(dāng)前顯示圖片的http鏈接
          urls: this.data.imgalist      // 需要預(yù)覽的圖片http鏈接列表
        })
      },

以上是“如何制作微信小程序”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：如何制作微信小程序
分享路徑：http://bm7419.com/article48/jddsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、商城網(wǎng)站、全網(wǎng)營銷推廣、網(wǎng)站建設(shè)、Google、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)