微信小程序開發常用功能有哪些

本文小編為大家詳細介紹“微信小程序開發常用功能有哪些”，內容詳細，步驟清晰，細節處理妥當，希望這篇“微信小程序開發常用功能有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

獲取用戶信息

調用 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": "https://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 https://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"
}

讀到這里，這篇“微信小程序開發常用功能有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。