微信小程式開發常用功能

• 2022 年 2 月 11 日
• 筆記
• 小程式

獲取用戶資訊

調用 wx.getUserProfile 方法獲取用戶基本資訊。頁面產生點擊事件（例如 button 上 bindtap 的回調中）後才可調用，每次請求都會彈出授權窗口，用戶同意後返回 userInfo

具體參數如下：

示例程式碼

wx.getUserProfile({
    desc: '用於完善用戶基本資料', // 聲明獲取用戶個人資訊後的用途，不超過30個字元
    success: (res) => {
        console.log(res.userInfo));
    }
})

獲取到的返回值

{
  "nickName": "秋梓", // 微信昵稱
  "gender": 0,
  "language": "zh_CN",
  "city": "",
  "province": "",
  "country": "",
  "avatarUrl": "//thirdwx.qlogo.cn/mmopen/vi_32/qrSYVbDbBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/132" // 頭像
}

獲取手機號

目前該介面針對非個人開發者，且完成了認證的小程式開放（不包含海外主體）。需謹慎使用，若用戶舉報較多或被發現在不必要場景下使用，微信有權永久回收該小程式的該介面許可權。

使用方法

需要將 button 組件 open-type 的值設置為 getPhoneNumber，當用戶點擊並同意之後，可以通過 bindgetphonenumber 事件回調獲取到動態令牌code，然後把code傳到開發者後台，並在開發者後台調用微信後台提供的 phonenumber.getPhoneNumber 介面，消費code來換取用戶手機號。每個code有效期為5分鐘，且只能消費一次。

註：getPhoneNumber 返回的 code 與 wx.login 返回的 code 作用是不一樣的，不能混用。

程式碼示例

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

Page({
  getPhoneNumber (e) {
    console.log(e.detail.code)
  }
})

返回參數說明

然後通過 code 換取用戶手機號。 每個code只能使用一次，code的有效期為5min

調用如下介面

POST //api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN

請求參數

返回的 JSON 數據包

返回結果示例

{
    "errcode":0,
    "errmsg":"ok",
    "phone_info": {
        "phoneNumber":"xxxxxx",
        "purePhoneNumber": "xxxxxx",
        "countryCode": 86,
        "watermark": {
            "timestamp": 1637744274,
            "appid": "xxxx"
        }
    }
}

實現微信支付

喚起微信支付的核心方法調用 wx.requestPayment 方法，該方法具體參數如下

/**
 * 微信支付方法
 * @param {string} oderId 訂單id
 * @param {string} total 訂單金額
 * @param {stromg} openId 登陸人openid
 */
function weixinPayFun(data) {
  wx.showLoading({
    mask: true
  })
  const http = new Http()
  return new Promise((resolve, reject) => {
    // 請求支付介面
    http.post(`${env.fayongApi}/app/shopping/order/pay`, data).then(res => {
      // 獲取支付簽名資訊
      let payInfo = res.data
      // 調起微信支付
      wx.requestPayment({
        "timeStamp": payInfo.timeStamp + '',
        "nonceStr": payInfo.nonceStr,
        "package": payInfo.package,
        "signType": "RSA",
        "paySign": payInfo.paySign,
        "success": function (res) {
          console.log(res, 'success');
          // 支付成功
          resolve(res)
        },
        "fail": function (err) {
          // 支付失敗
          reject(err)
        },
        "complete": function (res) {
          wx.hideLoading()
        }
      })
    })
  })
}

添加分享功能

在需要分享的分享的頁面中添加 onShareAppMessage 事件函數，此事件處理函數需要 return 一個 Object，用於自定義轉發內容，只有定義了此事件處理函數，右上角菜單才會顯示「轉發」按鈕

onShareAppMessage 方法具體參數如下

靜態分享

示例程式碼

Page({
    // 分享
    onShareAppMessage() {
        return {
            title: "樂福健康", // 分享標題
            path: "pages/newhome/index", // 分享地址路徑
        }
    }
})

添加完成後點擊右上角膠囊按鈕會分享圖標會亮起

帶參分享

上面的分享是不帶參數的，我們可以直接在路徑中動態添加參數，分享後用戶點擊時會觸發 onLoad 函數獲取路徑中的參數值

// 分享
onShareAppMessage() {
    const that = this;
    return {
        title: that.data.goodInfo.goodName, // 動態獲取商品名稱
        path: "pages/component/orderparticulars/orderparticulars?id=" + that.data.productId, // 動態傳遞當前商品id
        imageUrl: that.data.background[0] // 獲取商品封面圖
    }
}

動態獲取分享圖片和標題後我們每次分享時會出現不同內容

全局分享

除此之外我們也可以添加全局分享功能

首先要在每個頁面中添加 onShareAppMessage 函數，函數體內容可以為空，如果函數體內容為空，則會使用我們在 app.js 中定義的默認分享方法，如果該函數返回了一個 object 則使用我們自定義的分享功能

在需要被分享的頁面添加如下程式碼

Page({
    /**
     * 用戶點擊右上角分享
     */
    onShareAppMessage: function () {
		// 函數體內容為空即可
    }
})

接著在 app.js 中添加重寫分享方法

//重寫分享方法
overShare: function () {
    //間接實現全局設置分享內容
    wx.onAppRoute(function () {
        //獲取載入的頁面
        let pages = getCurrentPages(),
            //獲取當前頁面的對象
            view = pages[pages.length - 1],
            data;
        if (view) {
            data = view.data;
            // 判斷是否需要重寫分享方法
            if (!data.isOverShare) {
                data.isOverShare = true;
                view.onShareAppMessage = function () {
                    //重寫分享配置
                    return {
                        title: '分享標題',
                        path: "/pages/index/index"    //分享頁面地址
                    };
                }
            }
        }
    })
},

然後在 onLaunch 函數中調用該方法

onLaunch() {
    this.overShare()
}

分享按鈕

在開發中我們也會碰到點擊分享按鈕實現分享功能，實現程式碼如下

首先在 html 中添加 button 按鈕。其中 open-typ 要等於 share,表示點擊這個按鈕註定觸發分享函數

<!-- 分享按鈕 -->
<van-button type="primary" icon="share" round class="search" open-type="share" size="small">
    分享
</van-button>

之後要確保我們在 js 中添加了 onShareAppMessage 函數

效果如下：

獲取用戶收貨地址

獲取用戶收貨地址。調起用戶編輯收貨地址原生介面，並在編輯完成後返回用戶選擇的地址。

wx.chooseAddress({
    success(res) {
        console.log(res.userName)
        console.log(res.postalCode)
        console.log(res.provinceName)
        console.log(res.cityName)
        console.log(res.countyName)
        console.log(res.detailInfo)
        console.log(res.nationalCode)
        console.log(res.telNumber)
    }
})

參數說明

預覽圖片

調用方法：wx.previewImage(Object object)

在新頁面中全螢幕預覽圖片。預覽的過程中用戶可以進行保存圖片、發送給朋友等操作。

示例程式碼

wx.previewImage({
  current: '', // 當前顯示圖片的http鏈接
  urls: [] // 需要預覽的圖片http鏈接列表
})

頁面跳轉

跳轉普通頁面

wx.navigateTo({
    url: '',
})

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程式中頁面棧最多十層

跳轉tabBar 頁面

跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面

wx.switchTab({
  url: '/index'
})

自定義組件

在小程式中的組件和普通頁面的 js 結構有很大差異，結構如下

// pages/TestComponent/test.js
Component({
    /**
     * 組件的屬性列表
     */
    properties: {
        userName:""
    },

    /**
     * 組件的初始數據
     */
    data: {

    },

    /**
     * 組件的方法列表
     */
    methods: {
        // 獲取父組件傳遞過來的參數
        getPropName(){
            console.log(this.data.userName);
        }
    }
})

其中我們在 properties 對象中定義組件組件的屬性列表

然後再組件中添加觸發 getPropName 的方法

<button bind:tap="getPropName">獲取名稱</button>

在我們需要引入這個組件的頁面去聲明這個組件的名稱和地址，找到後綴為 json 的文件，添加如下程式碼

{
  "usingComponents": {
    "test-component":"../TestComponent/test"
  }
}

之後我們在頁面中像使用普通標籤一樣使用這個組件,並且給組件傳遞數據

<test-component userName="張三"></test-component>

傳遞數據後我們即可實現點擊組件中的按鈕獲取父組件傳遞過來的值

定義全局組件

我們定義完組件後想要在全局使用，我們可以將這個組件定義為全局組件

首先找到項目中的 app.json 文件，找到 usingComponents 添加組件地址

{
    ......省略其他程式碼
    "usingComponents": {
        "test-component":"./pages/TestComponent/test"
    }
}

聲明完成後我們即可在全局像使用標籤的方式使用該組件

設置默認頂部導航欄樣式

在 app.json 中添加如下程式碼

{
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#22a381",
        "navigationBarTitleText": "樂福健康",
        "navigationBarTextStyle": "white"
    }
}

全部參數列表

效果

取消頂部默認的導航欄

找到頁面 json 文件添加 "navigationStyle":"custom",即可去掉默認導航欄

{
  "usingComponents": {
      
  },
  "navigationStyle":"custom"
}

添加自定義樣式後可以達到如下效果