This article brings you relevant knowledge about WeChat Mini Program. It mainly introduces the common functions of WeChat Mini Program development. This article introduces it to you in great detail through example code, which is helpful for your learning. Or the work has certain reference value, I hope it will be helpful to everyone.

[Related learning recommendations: 小program learning tutorial]

Get user information

Call The wx.getUserProfile method obtains basic user information. It can only be called after a click event occurs on the page (for example, in the callback of bindtap on button). An authorization window will pop up for each request. After the user agrees, userInfo# will be returned.

##The specific parameters are as follows:

AttributeTypeDefault valueRequiredDescriptionlangstringenNoLanguage for displaying user information descstringis declares the purpose of obtaining the user’s personal information, which shall not exceed 30 characterssuccessfunctionNoCallback function for successful interface callfailfunctionNoCallback function that fails to call the interfacecompletefunctionNoThe callback function at the end of the interface call (will be executed if the call is successful or failed)Sample code

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

Get the return value

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

Get the mobile phone number

Currently, this interface is for non-individual developers. Mini programs that have completed certification are open (excluding overseas entities). It needs to be used with caution. If users report it frequently or are found to be used in unnecessary scenarios, WeChat has the right to permanently revoke the interface permissions of the mini program.

Usage method

You need to set the value of the button component

open-type to getPhoneNumber. After the user clicks and agrees, you can use bindgetphonenumber The event callback obtains the dynamic token code, then passes code to the developer backend, and calls the phonenumber.getPhoneNumber interface provided by the WeChat backend in the developer backend. Spend code in exchange for the user’s mobile phone number. Each code is valid for 5 minutes and can only be consumed once.

Note: The

code returned by getPhoneNumber has different functions from the code returned by wx.login and cannot be Mix it up.

Code example

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

rrree

Return parameter description

##ParametercodeThen exchange the user's mobile phone number through code. Each code can only be used once, and the validity period of the code is 5min

Type	Description	Minimum version
String	Dynamic token. Users’ mobile phone numbers can be exchanged for dynamic tokens. Usage details phonenumber.getPhoneNumber interface

Call the following interface

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

Request parameters

Attributes##access_token / cloudbase_access_tokenstring is the interface call credential codestring is the mobile phone number to obtain the voucher The returned JSON data packet

Type	Default value	Required	Description

attribute TypeDescriptionerrcodenumberError codeerrmsgstringError messagephone_infoObjectUser phone number information

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

屬性	類型	默認(rèn)值	必填	說明
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		是	簽名，具體見微信支付文檔
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()
        }
      })
    })
  })
}

添加分享功能

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

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

字段	說明	默認(rèn)值	最低版本
title	轉(zhuǎn)發(fā)標(biāo)題	當(dāng)前小程序名稱
path	轉(zhuǎn)發(fā)路徑	當(dāng)前頁面 path ，必須是以 / 開頭的完整路徑
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: "樂福健康", // 分享標(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)獲取商品名稱
        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è)頁面中添加 onShareAppMessage 函數(shù)，函數(shù)體內(nèi)容可以為空，如果函數(shù)體內(nèi)容為空，則會(huì)使用我們?cè)?app.js 中定義的默認(rèn)分享方法，如果該函數(shù)返回了一個(gè) 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)前頁面的對(duì)象
            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ā)中我們也會(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ù)說明

屬性	類型	說明
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ò)誤信息

Preview image

Call method: wx.previewImage(Object object)

Preview the image in full screen on the new page. During the preview process, users can save pictures, send them to friends, etc.

Attribute	Type	Default value	Required	Description	Minimum version
urls	Array.		is a list of image links that	needs to be previewed . Cloud file ID is supported starting from 2.2.3.
showmenu	boolean	true	No	Whether to display long press menu. Codes that support identification: Mini Program codes. Only Mini Programs support identification codes: WeChat personal codes, WeChat group codes, corporate WeChat personal codes, corporate WeChat group codes, and corporate WeChat interoperable group codes;	2.13.0
current	string	The first picture of urls	No	The link of the currently displayed picture
referrerPolicy	string	no-referrer	No	origin : Send complete referrer; no-referrer: Do not send. The format is fixed to https://servicewechat.com/{appid}/{version}/page-frame.html, where {appid} is the appid of the mini program and {version} is the version number of the mini program. , the version number is 0, which means the development version, trial version and review version, the version number is devtools, which means the developer tools, and the rest are official versions;	2.13.0
success	function		No	Callback function for successful interface call
fail	function		No	Callback function for failed interface call
complete	function		No	The callback function at the end of the interface call (will be executed if the call is successful or failed)

示例代碼

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

頁面跳轉(zhuǎn)

跳轉(zhuǎn)普通頁面

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

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面。但是不能跳到 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);
        }
    }
})

其中我們?cè)?properties 對(duì)象中定義組件組件的屬性列表

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

<button bind:tap="getPropName">獲取名稱</button>

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

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

之后我們?cè)陧撁嬷邢袷褂闷胀?biāo)簽一樣使用這個(gè)組件,并且給組件傳遞數(shù)據(jù)

<test-component userName="張三"></test-component>

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

定義全局組件

我們定義完組件后想要在全局使用，我們可以將這個(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": "樂福健康",
        "navigationBarTextStyle": "white"
    }
}

全部參數(shù)列表

屬性	類型	默認(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	是否開啟當(dāng)前頁面下拉刷新。 詳見 Page.onPullDownRefresh
onReachBottomDistance	number	50	頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離，單位為px。 詳見 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋轉(zhuǎn)設(shè)置，支持 auto / portrait / landscape 詳見 響應(yīng)顯示區(qū)域變化	2.4.0 (auto) / 2.5.0(landscape)
disableScroll	boolean	false	設(shè)置為 true 則頁面整體不能上下滾動(dòng)。 只在頁面配置中有效，無法在 app.json 中設(shè)置
usingComponents	Object	否	頁面自定義組件配置	1.6.3
initialRenderingCache	string		頁面初始渲染緩存配置，支持 static / dynamic	2.11.1
style	string	default	啟用新版的組件樣式	2.10.2
singlePage	Object	否	單頁模式相關(guān)配置	2.12.0
restartStrategy	string	homePage	重新啟動(dòng)策略配置	2.8.0

效果

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

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

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

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

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

The above is the detailed content of Summary of common functions for WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!