【移動應用開發(fā)技術】微信小程序開發(fā)常用功能有哪些

【移動應用開發(fā)技術】微信小程序開發(fā)常用功能有哪些

本文在下為大家詳細介紹“微信小程序開發(fā)常用功能有哪些”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“微信小程序開發(fā)常用功能有哪些”文章能幫助大家解決疑惑，下面跟著在下的思路慢慢深入，一起來學習新知識吧。獲取用戶信息調(diào)用wx.getUserProfile方法獲取用戶基本信息。頁面產(chǎn)生點擊事件（例如button上bindtap的回調(diào)中）后才可調(diào)用，每次請求都會彈出授權窗口，用戶同意后返回userInfo具體參數(shù)如下：示例代碼wx.getUserProfile({

desc:

'用于完善用戶基本資料',

//

聲明獲取用戶個人信息后的用途，不超過30個字符

success:

(res)

=>

{

console.log(res.userInfo));

}

})獲取到的返回值{

"nickName":

"秋梓",

//

微信昵稱

"gender":

0,

"language":

"zh_CN",

"city":

"",

"province":

"",

"country":

"",

"avatarUrl":

"/mmopen/vi_32/qrSYVbDbBhunywgP5HTx4mhT8HVNzhmlibd8pfYo4guPJ5w/132"

//

頭像

}獲取手機號目前該接口針對非個人開發(fā)者，且完成了認證的小程序開放（不包含海外主體）。需謹慎使用，若用戶舉報較多或被發(fā)現(xiàn)在不必要場景下使用，微信有權永久回收該小程序的該接口權限。使用方法需要將button組件open-type的值設置為getPhoneNumber，當用戶點擊并同意之后，可以通過bindgetphonenumber事件回調(diào)獲取到動態(tài)令牌code，然后把code傳到開發(fā)者后臺，并在開發(fā)者后臺調(diào)用微信后臺提供的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)

}

})返回參數(shù)說明然后通過code換取用戶手機號。每個code只能使用一次，code的有效期為5min調(diào)用如下接口POST

/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN請求參數(shù)返回的JSON數(shù)據(jù)包返回結果示例{

"errcode":0,

"errmsg":"ok",

"phone_info":

{

"phoneNumber":"xxxxxx",

"purePhoneNumber":

"xxxxxx",

"countryCode":

86,

"watermark":

{

"timestamp":

1637744274,

"appid":

"xxxx"

}

}

}實現(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，用于自定義轉發(fā)內(nèi)容，只有定義了此事件處理函數(shù)，右上角菜單才會顯示“轉發(fā)”按鈕onShareAppMessage方法具體參數(shù)如下靜態(tài)分享示例代碼Page({

//

分享

onShareAppMessage()

{

return

{

title:

"樂福健康",

//

分享標題

path:

"pages/newhome/index",

//

分享地址路徑

}

}

})添加完成后點擊右上角膠囊按鈕會分享圖標會亮起帶參分享上面的分享是不帶參數(shù)的，我們可以直接在路徑中動態(tài)添加參數(shù)，分享后用戶點擊時會觸發(fā)onLoad函數(shù)獲取路徑中的參數(shù)值//

分享

onShareAppMessage()

{

const

that

=

this;

return

{

title:

that.data.goodInfo.goodName,

//

動態(tài)獲取商品名稱

path:

"pages/component/orderparticulars/orderparticulars?id="

+

ductId,

//

動態(tài)傳遞當前商品id

imageUrl:

that.data.background[0]

//

獲取商品封面圖

}

}動態(tài)獲取分享圖片和標題后我們每次分享時會出現(xiàn)不同內(nèi)容全局分享除此之外我們也可以添加全局分享功能首先要在每個頁面中添加onShareAppMessage函數(shù)，函數(shù)體內(nèi)容可以為空，如果函數(shù)體內(nèi)容為空，則會使用我們在app.js中定義的默認分享方法，如果該函數(shù)返回了一個object則使用我們自定義的分享功能在需要被分享的頁面添加如下代碼Page({

/**

*

用戶點擊右上角分享

*/

onShareAppMessage:

function

()

{

//

函數(shù)體內(nèi)容為空即可

}

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

overShare:

function

()

{

//間接實現(xiàn)全局設置分享內(nèi)容

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函數(shù)中調(diào)用該方法onLaunch()

{

this.overShare()

}分享按鈕在開發(fā)中我們也會碰到點擊分享按鈕實現(xiàn)分享功能，實現(xiàn)代碼如下首先在html中添加button按鈕。其中open-typ要等于share,表示點擊這個按鈕注定觸發(fā)分享函數(shù)<!--

分享按鈕

-->

<van-button

type="primary"

icon="share"

round

class="search"

open-type="share"

size="small">

分享

</van-button>之后要確保我們在js中添加了onShareAppMessage函數(shù)效果如下：獲取用戶收貨地址獲取用戶收貨地址。調(diào)起用戶編輯收貨地址原生界面，并在編輯完成后返回用戶選擇的地址。wx.chooseAddress({

success(res)

{

console.log(res.userName)

console.log(res.postalCode)

console.log(vinceName)

console.log(res.cityName)

console.log(res.countyName)

console.log(res.detailInfo)

console.log(res.nationalCode)

console.log(res.telNumber)

}

})參數(shù)說明預覽圖片調(diào)用方法：wx.previewImage(Objectobject)在新頁面中全屏預覽圖片。預覽的過程中用戶可以進行保存圖片、發(fā)送給朋友等操作。示例代碼wx.previewImage({

current:

'',

//

當前顯示圖片的http鏈接

urls:

[]

//

需要預覽的圖片http鏈接列表

})頁面跳轉跳轉普通頁面wx.navigateTo({

url:

'',

})保留當前頁面，跳轉到應用內(nèi)的某個頁面。但是不能跳到tabbar頁面。使用wx.navigateBack可以返回到原頁面。小程序中頁面棧最多十層跳轉tabBar頁面跳轉到tabBar頁面，并關閉其他所有非tabBar頁面wx.switchTab({

url:

'/index'

})自定義組件在小程序中的組件和普通頁面的js結構有很大差異，結構如下//

pages/TestComponent/test.js

Component({

/**

*

組件的屬性列表

*/

properties:

{

userName:""

},

*

組件的初始數(shù)據(jù)

data:

{

*

組件的方法列表

methods:

{

//

獲取父組件傳遞過來的參數(shù)

getPropName(){

console.log(this.data.userName);

}

}

})其中我們在properties對象中定義組件組件的屬性列表然后再組件中添加觸發(fā)getPropName的方法<button

bind:tap="getPropName">獲取名稱</button>在我們需要引入這個組件的頁面去聲明這個組件的名稱和地址，找到后綴為json的文件，添加如下代碼{

"usingComponents":

{

"test-component":"../TestComponent/test"

}

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