微信小程序開(kāi)發(fā)常用功能匯總
獲取用戶信息
調(diào)用 wx.getUserProfile 方法獲取用戶基本信息。頁(yè)面產(chǎn)生點(diǎn)擊事件(例如 button 上 bindtap 的回調(diào)中)后才可調(diào)用,每次請(qǐng)求都會(huì)彈出授權(quán)窗口,用戶同意后返回 userInfo
具體參數(shù)如下:
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| lang | string | en | 否 | 顯示用戶信息的語(yǔ)言 |
| desc | string | 是 | 聲明獲取用戶個(gè)人信息后的用途,不超過(guò)30個(gè)字符 | |
| 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í)行) |
示例代碼
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)慎使用,若用戶舉報(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傳到開(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 作用是不一樣的,不能混用。
代碼示例
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
Page({
getPhoneNumber (e) {
console.log(e.detail.code)
}
})返回參數(shù)說(shuō)明
| 參數(shù) | 類(lèi)型 | 說(shuō)明 | 最低版本 |
|---|---|---|---|
| code | String | 動(dòng)態(tài)令牌??赏ㄟ^(guò)動(dòng)態(tài)令牌換取用戶手機(jī)號(hào)。使用方法詳情 phonenumber.getPhoneNumber 接口 |
然后通過(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ù)
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 |
|---|---|---|---|---|
| access_token / cloudbase_access_token | string | 是 | 接口調(diào)用憑證 | |
| code | string | 是 | 手機(jī)號(hào)獲取憑證 |
返回的 JSON 數(shù)據(jù)包
| 屬性 | 類(lèi)型 | 說(shuō)明 |
|---|---|---|
| errcode | number | 錯(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ù)覽圖片
調(diào)用方法:wx.previewImage(Object object)
在新頁(yè)面中全屏預(yù)覽圖片。預(yù)覽的過(guò)程中用戶可以進(jìn)行保存圖片、發(fā)送給朋友等操作。
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 | 最低版本 |
|---|---|---|---|---|---|
| urls | Array. | 是 | 需要預(yù)覽的圖片鏈接列表。2.2.3 起支持云文件ID。 | ||
| showmenu | boolean | true | 否 | 是否顯示長(zhǎng)按菜單。 支持識(shí)別的碼:小程序碼 僅小程序支持識(shí)別的碼:微信個(gè)人碼、微信群碼、企業(yè)微信個(gè)人碼、 企業(yè)微信群碼與企業(yè)微信互通群碼; | 2.13.0 |
| current | string | urls 的第一張 | 否 | 當(dāng)前顯示圖片的鏈接 | |
| referrerPolicy | string | no-referrer | 否 | 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 |
| 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í)行) |
示例代碼
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)于微信小程序開(kāi)發(fā)常用功能的文章就介紹到這了,更多相關(guān)微信小程序開(kāi)發(fā)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript檢測(cè)瀏覽器是否支持CSS變量代碼實(shí)例
這篇文章主要介紹了JavaScript檢測(cè)瀏覽器是否支持CSS變量代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
JavaScript 獲取當(dāng)前日期時(shí)間 年月日 時(shí)分秒的方法
這篇文章主要介紹了JavaScript 獲取當(dāng)前日期時(shí)間年月日時(shí)分秒的方法,通過(guò)案例代碼介紹了獲取當(dāng)前日期方法,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2023-10-10
Bootstrap CSS組件之下拉菜單(dropdown)
這篇文章主要為大家詳細(xì)介紹了Bootstrap CSS組件之下拉菜單(dropdown),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼
這篇文章主要介紹了BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼,需要的朋友可以參考下2017-05-05
JavaScript 數(shù)組常見(jiàn)操作技巧 (二)
這篇文章主要介紹了JavaScript 數(shù)組常見(jiàn)操作技巧,上一篇文章已經(jīng)給大家分享了(一),下面緊接上一篇文章分享下面技巧,需要的小伙伴可以參考一下2022-02-02
sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析
這篇文章主要為大家介紹了sessionStorage存儲(chǔ)時(shí)多窗口之前能否進(jìn)行狀態(tài)共享解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
web頁(yè)面和微信小程序頁(yè)面實(shí)現(xiàn)瀑布流效果
這篇文章主要介紹了web頁(yè)面和微信小程序頁(yè)面實(shí)現(xiàn)瀑布流效果,本文通過(guò)實(shí)例代碼圖文介紹,給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09

