獲取使用者資訊
呼叫 wx.getUserProfile 方法獲取使用者基本資訊。頁面產生點選事件（例如 button 上 bindtap 的回撥中）後才可呼叫，每次請求都會彈出授權視窗，使用者同意後返回 userInfo
具體引數如下：
| 屬性 | 型別 | 預設值 | 必填 | 說明 |
|---|---|---|---|---|
| lang | string | en | 否 | 顯示使用者資訊的語言 |
| desc | string | 是 | 宣告獲取使用者個人資訊後的用途，不超過30個字元 | |
| success | function | 否 | 介面呼叫成功的回撥函式 | |
| fail | function | 否 | 介面呼叫失敗的回撥函式 | |
| complete | function | 否 | 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行） |
示例程式碼
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" // 頭像
}
獲取手機號
目前該介面針對非個人開發者，且完成了認證的小程式開放（不包含海外主體）。需謹慎使用，若使用者舉報較多或被發現在不必要場景下使用，微信有權永久回收該小程式的該介面許可權。
使用方法
需要將 button 元件 open-type 的值設定為 getPhoneNumber，當使用者點選並同意之後，可以通過 bindgetphonenumber 事件回撥獲取到動態令牌code，然後把code傳到開發者後臺，並在開發者後臺呼叫微信後臺提供的 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)
}
})
返回引數說明
| 引數 | 型別 | 說明 | 最低版本 |
|---|---|---|---|
| code | String | 動態令牌。可通過動態令牌換取使用者手機號。使用方法詳情 phonenumber.getPhoneNumber 介面 |
然後通過 code 換取使用者手機號。 每個code只能使用一次，code的有效期為5min
呼叫如下介面
POST https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=ACCESS_TOKEN
請求引數
| 屬性 | 型別 | 預設值 | 必填 | 說明 |
|---|---|---|---|---|
| access_token / cloudbase_access_token | string | 是 | 介面呼叫憑證 | |
| code | string | 是 | 手機號獲取憑證 |
返回的 JSON 資料包
| 屬性 | 型別 | 說明 |
|---|---|---|
| errcode | number | 錯誤碼 |
| errmsg | string | 錯誤提示資訊 |
| phone_info | Object | 使用者手機號資訊 |
返回結果示例
{
"errcode":0,
"errmsg":"ok",
"phone_info": {
"phoneNumber":"xxxxxx",
"purePhoneNumber": "xxxxxx",
"countryCode": 86,
"watermark": {
"timestamp": 1637744274,
"appid": "xxxx"
}
}
}
實現微信支付
喚起微信支付的核心方法呼叫 wx.requestPayment 方法，該方法具體引數如下
| 屬性 | 型別 | 預設值 | 必填 | 說明 |
|---|---|---|---|---|
| timeStamp | string | 是 | 時間戳，從 1970 年 1 月 1 日 00:00:00 至今的秒數，即當前的時間 | |
| nonceStr | string | 是 | 隨機字串，長度為32個字元以下 | |
| package | string | 是 | 統一下單介面返回的 prepay_id 引數值，提交格式如：prepay_id=*** | |
| signType | string | MD5 僅在 v2 版本介面適用 |
否 | 簽名演算法，應與後臺下單時的值一致 |
HMAC-SHA256 僅在 v2 版本介面適用 |
||||
RSA 僅在 v3 版本介面適用 |
||||
| paySign | string | 是 | 簽名，具體見微信支付文件 | |
| success | function | 否 | 介面呼叫成功的回撥函式 | |
| fail | function | 否 | 介面呼叫失敗的回撥函式 | |
| complete | function | 否 | 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行） |
/**
* 微信支付方法
* @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
// 調起微信支付
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 事件函式，此事件處理函式需要 return 一個 Object，用於自定義轉發內容，只有定義了此事件處理函式，右上角選單才會顯示“轉發”按鈕
onShareAppMessage 方法具體引數如下
| 欄位 | 說明 | 預設值 | 最低版本 |
|---|---|---|---|
| title | 轉發標題 | 當前小程式名稱 | |
| path | 轉發路徑 | 當前頁面 path ，必須是以 / 開頭的完整路徑 | |
| imageUrl | 自定義圖片路徑，可以是本地檔案路徑、程式碼包檔案路徑或者網路圖片路徑。支援PNG及JPG。顯示圖片長寬比是 5:4。 | 使用預設截圖 | 1.5.0 |
| promise | 如果該引數存在，則以 resolve 結果為準，如果三秒內不 resolve，分享會使用上面傳入的預設引數 | 2.12.0 |
靜態分享
示例程式碼
Page({
// 分享
onShareAppMessage() {
return {
title: "樂福健康", // 分享標題
path: "pages/newhome/index", // 分享地址路徑
}
}
})
新增完成後點選右上角膠囊按鈕會分享圖示會亮起
帶參分享
上面的分享是不帶引數的，我們可以直接在路徑中動態新增引數，分享後使用者點選時會觸發 onLoad 函式獲取路徑中的引數值
// 分享
onShareAppMessage() {
const that = this;
return {
title: that.data.goodInfo.goodName, // 動態獲取商品名稱
path: "pages/component/orderparticulars/orderparticulars?id=" + that.data.productId, // 動態傳遞當前商品id
imageUrl: that.data.background[0] // 獲取商品封面圖
}
}
動態獲取分享圖片和標題後我們每次分享時會出現不同內容
全域性分享
除此之外我們也可以新增全域性分享功能
首先要在每個頁面中新增 onShareAppMessage 函式，函式體內容可以為空，如果函式體內容為空，則會使用我們在 app.js 中定義的預設分享方法，如果該函式返回了一個 object 則使用我們自定義的分享功能
在需要被分享的頁面新增如下程式碼
Page({
/**
* 使用者點選右上角分享
*/
onShareAppMessage: function () {
// 函式體內容為空即可
}
})
接著在 app.js 中新增重寫分享方法
//重寫分享方法
overShare: function () {
//間接實現全域性設定分享內容
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 函式中呼叫該方法
onLaunch() {
this.overShare()
}
分享按鈕
在開發中我們也會碰到點選分享按鈕實現分享功能，實現程式碼如下
首先在 html 中新增 button 按鈕。其中 open-typ 要等於 share,表示點選這個按鈕註定觸發分享函式
<!-- 分享按鈕 -->
<van-button type="primary" icon="share" round class="search" open-type="share" size="small">
分享
</van-button>
之後要確保我們在 js 中新增了 onShareAppMessage 函式
效果如下：
獲取使用者收貨地址
獲取使用者收貨地址。調起使用者編輯收貨地址原生介面，並在編輯完成後返回使用者選擇的地址。
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)
}
})
引數說明
| 屬性 | 型別 | 說明 |
|---|---|---|
| userName | string | 收貨人姓名 |
| postalCode | string | 郵編 |
| provinceName | string | 國標收貨地址第一級地址 |
| cityName | string | 國標收貨地址第二級地址 |
| countyName | string | 國標收貨地址第三級地址 |
| streetName | string | 國標收貨地址第四級地址 |
| detailInfo | string | 詳細收貨地址資訊（包括街道地址） |
| detailInfoNew | string | 新選擇器詳細收貨地址資訊 |
| nationalCode | string | 收貨地址國家碼 |
| telNumber | string | 收貨人手機號碼 |
| errMsg | string | 錯誤資訊 |
預覽圖片
呼叫方法：wx.previewImage(Object object)
在新頁面中全屏預覽圖片。預覽的過程中使用者可以進行儲存圖片、傳送給朋友等操作。
| 屬性 | 型別 | 預設值 | 必填 | 說明 | 最低版本 |
|---|---|---|---|---|---|
| urls | Array. |
是 | 需要預覽的圖片連結列表。2.2.3 起支援雲檔案ID。 | ||
| showmenu | boolean | true | 否 | 是否顯示長按選單。 支援識別的碼：小程式碼 僅小程式支援識別的碼：微信個人碼、微信群碼、企業微信個人碼、 企業微信群碼與企業微信互通群碼； | 2.13.0 |
| current | string | urls 的第一張 | 否 | 當前顯示圖片的連結 | |
| referrerPolicy | string | no-referrer | 否 | origin: 傳送完整的referrer; no-referrer: 不傳送。格式固定為 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 為小程式的 appid，{version} 為小程式的版本號，版本號為 0 表示為開發版、體驗版以及稽核版本，版本號為 devtools 表示為開發者工具，其餘為正式版本； |
2.13.0 |
| success | function | 否 | 介面呼叫成功的回撥函式 | ||
| fail | function | 否 | 介面呼叫失敗的回撥函式 | ||
| complete | function | 否 | 介面呼叫結束的回撥函式（呼叫成功、失敗都會執行） |
示例程式碼
wx.previewImage({
current: '', // 當前顯示圖片的http連結
urls: [] // 需要預覽的圖片http連結列表
})
頁面跳轉
跳轉普通頁面
wx.navigateTo({
url: '',
})
保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。小程式中頁面棧最多十層
跳轉tabBar 頁面
跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面
wx.switchTab({
url: '/index'
})
自定義元件
在小程式中的元件和普通頁面的 js 結構有很大差異，結構如下
// pages/TestComponent/test.js
Component({
/**
* 元件的屬性列表
*/
properties: {
userName:""
},
/**
* 元件的初始資料
*/
data: {
},
/**
* 元件的方法列表
*/
methods: {
// 獲取父元件傳遞過來的引數
getPropName(){
console.log(this.data.userName);
}
}
})
其中我們在 properties 物件中定義元件元件的屬性列表
然後再元件中新增觸發 getPropName 的方法
<button bind:tap="getPropName">獲取名稱</button>
在我們需要引入這個元件的頁面去宣告這個元件的名稱和地址，找到字尾為 json 的檔案，新增如下程式碼
{
"usingComponents": {
"test-component":"../TestComponent/test"
}
}
之後我們在頁面中像使用普通標籤一樣使用這個元件,並且給元件傳遞資料
<test-component userName="張三"></test-component>
傳遞資料後我們即可實現點選元件中的按鈕獲取父元件傳遞過來的值
定義全域性元件
我們定義完元件後想要在全域性使用，我們可以將這個元件定義為全域性元件
首先找到專案中的 app.json 檔案，找到 usingComponents 新增元件地址
{
......省略其他程式碼
"usingComponents": {
"test-component":"./pages/TestComponent/test"
}
}
宣告完成後我們即可在全域性像使用標籤的方式使用該元件
設定預設頂部導航欄樣式
在 app.json 中新增如下程式碼
{
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#22a381",
"navigationBarTitleText": "樂福健康",
"navigationBarTextStyle": "white"
}
}
全部引數列表
| 屬性 | 型別 | 預設值 | 描述 | 最低版本 |
|---|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | 導航欄背景顏色，如 #000000 |
|
| navigationBarTextStyle | string | white | 導航欄標題顏色，僅支援 black / white |
|
| navigationBarTitleText | string | 導航欄標題文字內容 | ||
| navigationStyle | string | default | 導航欄樣式，僅支援以下值： default 預設樣式 custom 自定義導航欄，只保留右上角膠囊按鈕。 |
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 | 是否開啟當前頁面下拉重新整理。 詳見 Page.onPullDownRefresh | |
| onReachBottomDistance | number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位為px。 詳見 Page.onReachBottom | |
| pageOrientation | string | portrait | 螢幕旋轉設定，支援 auto / portrait / landscape 詳見 響應顯示區域變化 |
2.4.0 (auto) / 2.5.0 (landscape) |
| disableScroll | boolean | false | 設定為 true 則頁面整體不能上下滾動。 只在頁面配置中有效，無法在 app.json 中設定 |
|
| usingComponents | Object | 否 | 頁面自定義元件配置 | 1.6.3 |
| initialRenderingCache | string | 頁面初始渲染快取配置，支援 static / dynamic |
2.11.1 | |
| style | string | default | 啟用新版的元件樣式 | 2.10.2 |
| singlePage | Object | 否 | 單頁模式相關配置 | 2.12.0 |
| restartStrategy | string | homePage | 重新啟動策略配置 | 2.8.0 |
效果
取消頂部預設的導航欄
找到頁面 json 檔案新增 "navigationStyle":"custom",即可去掉預設導航欄
{
"usingComponents": {
},
"navigationStyle":"custom"
}
新增自定義樣式後可以達到如下效果
