了解微信小程式

📢 本文由 gemini-3-flash-preview 翻譯

官網： https://mp.weixin.qq.com/cgi-bin/wx

開發小程式之前需要先註冊一個小程式，可以使用不同主體註冊小程式，相應的權限也不同。例如以個人的身份註冊小程式是無法獲得支付權限的 (也可以使用測試帳號體驗)

註冊完成後設定相關資訊，獲取 AppID 與 AppSecret，下載開發者工具，登入，建立專案

首先右上角「詳情」-「本地設定」，勾選「不校驗合法網域名稱、web-view (業務網域)、TLS 版本以及 HTTPS 憑證」

小程式的開發屬於前端開發，主要使用 JavaScript

小程式目錄結構

小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page

主體部分

由三個檔案組成，必須放在專案的根目錄

檔案	作用
app.js	小程式邏輯
app.json	小程式全域設定
app.wxss	小程式全域樣式表，非必須檔案，類似 CSS

頁面

一個小程式有多個頁面，存放在 pages 目錄

每個頁面由四個檔案組成

檔案類型	是否必須	作用
js	是	頁面邏輯，JavaScript
wxml	是	頁面結構、佈局，HTML
json	否	頁面設定
wxss	否	頁面樣式表，CSS

簡單入門

小程式的撰寫風格類似於 Vue

插值

wxml

1
<view>{{title}}</view>

1
2
3
4
5
Page({
    data: {
    title: 'Hello'
  }
})

取得使用者資訊

wxml

1
2
3
4
<view>
    <button type="default" bindtap="getUserInfo">取得使用者資訊</button>
    <image src="{{avatarUrl}}" style="width: 100px; height: 100px;"/>{{nickName}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
Page({
  data: {
    title: 'Hello',
    avatarUrl: '',
    nickName: ''
  },
  getUserInfo: function(){
    wx.getUserProfile({
      desc: '取得使用者資訊',
      success: (res) => {
        console.log(res);
        this.setData({
          avatarUrl: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
      }
    })
  }
})

微信登入

wxml

1
2
3
4
<view>
    <button type="primary" bind:tap="wxlogin">微信登入</button>
    授權碼：{{code}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
Page({
  data: {
    code: ''
  },
  wxlogin: function(){
    wx.login({
      success: (res) => {
        console.log("授權碼：" + res.code);
        this.setData({
          code: res.code
        })
      },
    })
  }
})

微信登入流程： https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

傳送 HTTP 請求

wxml

1
2
3
4
<view>
    <button type="warn" bind:tap="sendRequest">傳送請求</button>
    回應結果：{{result}}
</view>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
Page({
  data: {
    result: ''
  },
  sendRequest: function(){
    wx.request({
      url: 'url', // 請求路徑
      method: 'GET', // 請求方式
      success: (res) => {
        console.log("回應結果：" + res.data);
        this.setData({
          result: res.data // 回應數據
        })
      }
    })
  }
})

編譯與發佈

上方編譯按鈕，編譯完成後在左方預覽

程式碼開發完畢後，上傳，指定版本號。上傳成功後在微信公眾平台提交審核後可以發佈為線上版本