本篇文章為大家?guī)?lái)了關(guān)於微信小程式的相關(guān)知識(shí)，主要介紹了微信小程式開(kāi)發(fā)常用功能,本文透過(guò)實(shí)例程式碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鏡價(jià)值，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

取得使用者資訊

##呼叫

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

#具體參數(shù)如下：

屬性#型別預(yù)設(shè)值

		##必填		說(shuō)明
lang	string	en	否	顯示使用者資訊的語(yǔ)言
desc	string	?	是	宣告取得使用者個(gè)人資訊後的用途，不超過(guò)30個(gè)字元
success	function	#?	否	介面呼叫成功的回呼函數(shù)
fail	function	?	#否	介面呼叫失敗的回呼函數(shù)
#complete	function	?	#否	介面呼叫結(jié)束的回呼函數(shù)（呼叫成功、失敗都會(huì)執(zhí)行）

#範(fàn)例程式碼

wx.getUserProfile({
    desc: '用于完善用戶基本資料', // 聲明獲取用戶個(gè)人信息后的用途，不超過(guò)30個(gè)字符
    success: (res) => {
        console.log(res.userInfo));
    }
})

取得到的回傳值

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

取得手機(jī)號(hào)碼

目前該介面針對(duì)非個(gè)人開(kāi)發(fā)者，且完成了認(rèn)證的小程式開(kāi)放（不包含海外主體）。需謹(jǐn)慎使用，若使用者檢舉較多或被發(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傳到開(kāi)發(fā)者後臺(tái)，並在開(kā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 作用是不一樣的，不能混用。

程式碼範(fàn)例

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

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

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

##類(lèi)型

#參數(shù)
			最低版本

code

String

#動(dòng)態(tài)令牌。可透過(guò)動(dòng)態(tài)令牌換取用戶手機(jī)號(hào)碼。使用方法詳情?phonenumber.getPhoneNumber?介面

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

屬性類(lèi)型預(yù)設(shè)值必填說(shuō)明access_token / cloudbase_access_tokenstring?是介面呼叫憑證#code

	#然後透過(guò) code 換取用戶手機(jī)號(hào)碼。每個(gè)code只能使用一次，code的有效期限為5min	呼叫如下介面	請(qǐng)求參數(shù)

string

?傳回的JSON 封包##屬性類(lèi)型說(shuō)明errcode#number

	是	手機(jī)號(hào)碼取得憑證

###錯(cuò)誤碼######### ####errmsg######string######錯(cuò)誤提示訊息#############phone_info#####Object######用戶手機(jī)號(hào)資訊############

返回結(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ù)如下

屬性	類(lèi)型	默認(rèn)值	必填	說(shuō)明
timeStamp	string		是	時(shí)間戳，從 1970 年 1 月 1 日 00:00:00 至今的秒數(shù)，即當(dāng)前的時(shí)間
nonceStr	string		是	隨機(jī)字符串，長(zhǎng)度為32個(gè)字符以下
package	string		是	統(tǒng)一下單接口返回的 prepay_id 參數(shù)值，提交格式如：prepay_id=***
signType	string	MD5 僅在 v2 版本接口適用	否	簽名算法，應(yīng)與后臺(tái)下單時(shí)的值一致
		HMAC-SHA256 僅在 v2 版本接口適用
		RSA 僅在 v3 版本接口適用
paySign	string		是	簽名，具體見(jiàn)微信支付文檔
success	function		否	接口調(diào)用成功的回調(diào)函數(shù)
fail	function		否	接口調(diào)用失敗的回調(diào)函數(shù)
complete	function		否	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

/**
 * 微信支付方法
 * @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ù)如下

字段	說(shuō)明	默認(rèn)值	最低版本
title	轉(zhuǎn)發(fā)標(biāo)題	當(dāng)前小程序名稱(chēng)
path	轉(zhuǎn)發(fā)路徑	當(dāng)前頁(yè)面 path ，必須是以 / 開(kāi)頭的完整路徑
imageUrl	自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網(wǎng)絡(luò)圖片路徑。支持PNG及JPG。顯示圖片長(zhǎng)寬比是 5:4。	使用默認(rèn)截圖	1.5.0
promise	如果該參數(shù)存在，則以 resolve 結(jié)果為準(zhǔn)，如果三秒內(nèi)不 resolve，分享會(huì)使用上面?zhèn)魅氲哪J(rèn)參數(shù)		2.12.0

靜態(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)獲取商品名稱(chēng)
        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 中添加重寫(xiě)分享方法

//重寫(xiě)分享方法
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;
            // 判斷是否需要重寫(xiě)分享方法
            if (!data.isOverShare) {
                data.isOverShare = true;
                view.onShareAppMessage = function () {
                    //重寫(xiě)分享配置
                    return {
                        title: '分享標(biāo)題',
                        path: "/pages/index/index"    //分享頁(yè)面地址
                    };
                }
            }
        }
    })
},

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

onLaunch() {
    this.overShare()
}

分享按鈕

在開(kāi)發(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ō)明

屬性	類(lèi)型	說(shuō)明
userName	string	收貨人姓名
postalCode	string	郵編
provinceName	string	國(guó)標(biāo)收貨地址第一級(jí)地址
cityName	string	國(guó)標(biāo)收貨地址第二級(jí)地址
countyName	string	國(guó)標(biāo)收貨地址第三級(jí)地址
streetName	string	國(guó)標(biāo)收貨地址第四級(jí)地址
detailInfo	string	詳細(xì)收貨地址信息（包括街道地址）
detailInfoNew	string	新選擇器詳細(xì)收貨地址信息
nationalCode	string	收貨地址國(guó)家碼
telNumber	string	收貨人手機(jī)號(hào)碼
errMsg	string	錯(cuò)誤信息

預(yù)覽圖片

呼叫方法：wx.previewImage(Object object)

在新頁(yè)面中全螢?zāi)活A(yù)覽圖片。預(yù)覽的過(guò)程中使用者可以進(jìn)行儲(chǔ)存圖片、傳送給朋友等操作。

##說(shuō)明#最低版本urlsArray.#?#是需要預(yù)覽的圖片連結(jié)列表。 2.2.3?起支援雲(yún)端文件ID。 ?showmenubooleantrue否是否顯示長(zhǎng)按菜單。支援識(shí)別的碼：小程式碼僅小程式支援辨識(shí)的碼：微信個(gè)人碼、微信群碼、企業(yè)微信個(gè)人碼、企業(yè)微信群碼與企業(yè)微信互通群碼；2.13.0currentstringurls 的第一張否目前顯示圖片的連結(jié)?referrerPolicystringno-referrer ##successfunction?否#介面呼叫成功的回呼函數(shù)?#failfunction?介面呼叫失敗的回呼函數(shù)

屬性	類(lèi)型	預(yù)設(shè)值	必填
				#origin : 發(fā)送完整的referrer;?#??##no-referrer: 不發(fā)送。格式固定為?https://servicewechat.com/{appid}/{version}/page-frame.html，其中{appid} 為小程式的appid，{version} 為小程式的版本號(hào)，版本號(hào)碼為0 表示為開(kāi)發(fā)版、體驗(yàn)版以及審核版本，版本號(hào)碼為devtools 表示為開(kāi)發(fā)者工具，其餘為正式版本；2.13.0
					否

?########## ####complete######function######?######否######介面呼叫結(jié)束的回呼函數(shù)（呼叫成功、失敗都會(huì)執(zhí)行）###### #################

示例代碼

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">獲取名稱(chēng)</button>

在我們需要引入這個(gè)組件的頁(yè)面去聲明這個(gè)組件的名稱(chēng)和地址，找到后綴為 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ù)列表

屬性	類(lèi)型	默認(rèn)值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	導(dǎo)航欄背景顏色，如 #000000
navigationBarTextStyle	string	white	導(dǎo)航欄標(biāo)題顏色，僅支持 black / white
navigationBarTitleText	string		導(dǎo)航欄標(biāo)題文字內(nèi)容
navigationStyle	string	default	導(dǎo)航欄樣式，僅支持以下值： default 默認(rèn)樣式 custom 自定義導(dǎo)航欄，只保留右上角膠囊按鈕。	iOS/Android 微信客戶端 7.0.0，Windows 微信客戶端不支持
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	string	dark	下拉 loading 的樣式，僅支持 dark / light
backgroundColorTop	string	#ffffff	頂部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，僅 iOS 支持	微信客戶端 6.5.16
enablePullDownRefresh	boolean	false	是否開(kāi)啟當(dāng)前頁(yè)面下拉刷新。 詳見(jiàn) Page.onPullDownRefresh
onReachBottomDistance	number	50	頁(yè)面上拉觸底事件觸發(fā)時(shí)距頁(yè)面底部距離，單位為px。 詳見(jiàn) Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉(zhuǎn)設(shè)置，支持 auto / portrait / landscape 詳見(jiàn) 響應(yīng)顯示區(qū)域變化	2.4.0 (auto) / 2.5.0(landscape)
disableScroll	boolean	false	設(shè)置為 true 則頁(yè)面整體不能上下滾動(dòng)。 只在頁(yè)面配置中有效，無(wú)法在 app.json 中設(shè)置
usingComponents	Object	否	頁(yè)面自定義組件配置	1.6.3
initialRenderingCache	string		頁(yè)面初始渲染緩存配置，支持 static / dynamic	2.11.1
style	string	default	啟用新版的組件樣式	2.10.2
singlePage	Object	否	單頁(yè)模式相關(guān)配置	2.12.0
restartStrategy	string	homePage	重新啟動(dòng)策略配置	2.8.0

效果

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

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

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

添加自定義樣式后可以達(dá)到如下效果

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

以上是微信小程式開(kāi)發(fā)常用功能匯總的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！