微信小程序開發(fā)常用功能有哪些

本文小編為大家詳細(xì)介紹“微信小程序開發(fā)常用功能有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“微信小程序開發(fā)常用功能有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

獲取用戶信息

調(diào)用 wx.getUserProfile 方法獲取用戶基本信息。頁(yè)面產(chǎn)生點(diǎn)擊事件（例如 button 上 bindtap 的回調(diào)中）后才可調(diào)用，每次請(qǐng)求都會(huì)彈出授權(quán)窗口，用戶同意后返回 userInfo

具體參數(shù)如下：

示例代碼

wx.getUserProfile({
    desc: '用于完善用戶基本資料', // 聲明獲取用戶個(gè)人信息后的用途，不超過(guò)30個(gè)字符
    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" // 頭像
}

獲取手機(jī)號(hào)

目前該接口針對(duì)非個(gè)人開發(fā)者，且完成了認(rèn)證的小程序開放（不包含海外主體）。需謹(jǐn)慎使用，若用戶舉報(bào)較多或被發(fā)現(xiàn)在不必要場(chǎng)景下使用，微信有權(quán)永久回收該小程序的該接口權(quán)限。

使用方法

需要將 button 組件 open-type 的值設(shè)置為 getPhoneNumber，當(dāng)用戶點(diǎn)擊并同意之后，可以通過(guò) bindgetphonenumber 事件回調(diào)獲取到動(dòng)態(tài)令牌code，然后把code傳到開發(fā)者后臺(tái)，并在開發(fā)者后臺(tái)調(diào)用微信后臺(tái)提供的 phonenumber.getPhoneNumber 接口，消費(fèi)code來(lái)?yè)Q取用戶手機(jī)號(hào)。每個(gè)code有效期為5分鐘，且只能消費(fèi)一次。

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

代碼示例

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

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

返回參數(shù)說(shuō)明

然后通過(guò) code 換取用戶手機(jī)號(hào)。 每個(gè)code只能使用一次，code的有效期為5min

調(diào)用如下接口

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

請(qǐng)求參數(shù)

返回的 JSON 數(shù)據(jù)包

返回結(jié)果示例

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

實(shí)現(xiàn)微信支付

喚起微信支付的核心方法調(diào)用 wx.requestPayment 方法，該方法具體參數(shù)如下

/**
 * 微信支付方法
 * @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) => {
    // 請(qǐng)求支付接口
    http.post(`${env.fayongApi}/app/shopping/order/pay`, data).then(res => {
      // 獲取支付簽名信息
      let payInfo = res.data
      // 調(diào)起微信支付
      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()
        }
      })
    })
  })
}

添加分享功能

在需要分享的分享的頁(yè)面中添加 onShareAppMessage 事件函數(shù)，此事件處理函數(shù)需要 return 一個(gè) Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容，只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕

onShareAppMessage 方法具體參數(shù)如下

靜態(tài)分享

示例代碼

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

添加完成后點(diǎn)擊右上角膠囊按鈕會(huì)分享圖標(biāo)會(huì)亮起

帶參分享

上面的分享是不帶參數(shù)的，我們可以直接在路徑中動(dòng)態(tài)添加參數(shù)，分享后用戶點(diǎn)擊時(shí)會(huì)觸發(fā) onLoad 函數(shù)獲取路徑中的參數(shù)值

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

動(dòng)態(tài)獲取分享圖片和標(biāo)題后我們每次分享時(shí)會(huì)出現(xiàn)不同內(nèi)容

全局分享

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

首先要在每個(gè)頁(yè)面中添加 onShareAppMessage 函數(shù)，函數(shù)體內(nèi)容可以為空，如果函數(shù)體內(nèi)容為空，則會(huì)使用我們?cè)?app.js 中定義的默認(rèn)分享方法，如果該函數(shù)返回了一個(gè) object 則使用我們自定義的分享功能

在需要被分享的頁(yè)面添加如下代碼

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

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

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

然后在 onLaunch 函數(shù)中調(diào)用該方法

onLaunch() {
    this.overShare()
}

分享按鈕

在開發(fā)中我們也會(huì)碰到點(diǎn)擊分享按鈕實(shí)現(xiàn)分享功能，實(shí)現(xiàn)代碼如下

首先在 html 中添加 button 按鈕。其中 open-typ 要等于 share,表示點(diǎn)擊這個(gè)按鈕注定觸發(fā)分享函數(shù)

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

之后要確保我們?cè)?js 中添加了 onShareAppMessage 函數(shù)

效果如下：

獲取用戶收貨地址

獲取用戶收貨地址。調(diào)起用戶編輯收貨地址原生界面，并在編輯完成后返回用戶選擇的地址。

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)
    }
})

參數(shù)說(shuō)明

預(yù)覽圖片

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

在新頁(yè)面中全屏預(yù)覽圖片。預(yù)覽的過(guò)程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作。

示例代碼

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

頁(yè)面跳轉(zhuǎn)

跳轉(zhuǎn)普通頁(yè)面

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

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。使用 wx.navigateBack 可以返回到原頁(yè)面。小程序中頁(yè)面棧最多十層

跳轉(zhuǎn)tabBar 頁(yè)面

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面

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

自定義組件

在小程序中的組件和普通頁(yè)面的 js 結(jié)構(gòu)有很大差異，結(jié)構(gòu)如下

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

     * 組件的初始數(shù)據(jù)
    data: {
     * 組件的方法列表
    methods: {
        // 獲取父組件傳遞過(guò)來(lái)的參數(shù)
        getPropName(){
            console.log(this.data.userName);
        }
    }
})

其中我們?cè)?properties 對(duì)象中定義組件組件的屬性列表

然后再組件中添加觸發(fā) getPropName 的方法

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

在我們需要引入這個(gè)組件的頁(yè)面去聲明這個(gè)組件的名稱和地址，找到后綴為 json 的文件，添加如下代碼

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

之后我們?cè)陧?yè)面中像使用普通標(biāo)簽一樣使用這個(gè)組件,并且給組件傳遞數(shù)據(jù)

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

傳遞數(shù)據(jù)后我們即可實(shí)現(xiàn)點(diǎn)擊組件中的按鈕獲取父組件傳遞過(guò)來(lái)的值

定義全局組件

我們定義完組件后想要在全局使用，我們可以將這個(gè)組件定義為全局組件

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

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

聲明完成后我們即可在全局像使用標(biāo)簽的方式使用該組件

設(shè)置默認(rèn)頂部導(dǎo)航欄樣式

在 app.json 中添加如下代碼

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

全部參數(shù)列表

取消頂部默認(rèn)的導(dǎo)航欄

找到頁(yè)面 json 文件添加 "navigationStyle":"custom",即可去掉默認(rèn)導(dǎo)航欄

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

讀到這里，這篇“微信小程序開發(fā)常用功能有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。