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

成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)的開發(fā)，更需要了解用戶，從用戶角度來建設(shè)網(wǎng)站，獲得較好的用戶體驗。創(chuàng)新互聯(lián)多年互聯(lián)網(wǎng)經(jīng)驗，見的多，溝通容易、能幫助客戶提出的運(yùn)營建議。作為成都一家網(wǎng)絡(luò)公司，打造的就是網(wǎng)站建設(shè)產(chǎn)品直銷的概念。選擇創(chuàng)新互聯(lián)，不只是建站，我們把建站作為產(chǎn)品，不斷的更新、完善，讓每位來訪用戶感受到浩方產(chǎn)品的價值服務(wù)。

獲取用戶信息

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

具體參數(shù)如下：

示例代碼

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" // 頭像
}

獲取手機(jī)號

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

使用方法

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

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

代碼示例

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

返回參數(shù)說明

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

調(diào)用如下接口

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

請求參數(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) => {
    // 請求支付接口
    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()
        }
      })
    })
  })
}

添加分享功能

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

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

靜態(tài)分享

示例代碼

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

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

帶參分享

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

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

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

全局分享

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

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

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

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

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

//重寫分享方法
overShare: function () {
    //間接實(shí)現(xiàn)全局設(shè)置分享內(nèi)容
    wx.onAppRoute(function () {
        //獲取加載的頁面
        let pages = getCurrentPages(),
            //獲取當(dāng)前頁面的對象
            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"    //分享頁面地址
                    };
                }
            }
        }
    })
},

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

onLaunch() {
    this.overShare()
}

分享按鈕

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

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

    分享

之后要確保我們在 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ù)說明

預(yù)覽圖片

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

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

示例代碼

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

頁面跳轉(zhuǎn)

跳轉(zhuǎn)普通頁面

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

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

跳轉(zhuǎn)tabBar 頁面

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

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

自定義組件

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

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

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

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

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

獲取名稱

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

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

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

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

定義全局組件

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

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

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

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

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

在 app.json 中添加如下代碼

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

全部參數(shù)列表

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

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

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

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