May 17, 2021 WeChat Mini Program Development Document
The plug-in feature page is supported starting with the small program base library version 2.1.0.
Some interfaces cannot be called directly in a plug-in (such as wx.login), but plug-in developers can use plug-in feature pages to implement functionality. Currently, plug-in feature pages include:
To use the plug-in function page, you need to activate the function page feature, configure the corresponding function page function, and then use the function-page-navigator component to jump to the plug-in function page to achieve the corresponding function. For more information, please refer to below.
Before we start development, we need to know that the plug-in feature page refers to a special page in the plug-in owner's program.
Plug-in owner applets, which refer to the same applets as plug-in AppID. F or example, a "small program sample" gadget has developed a "small program sample plug-in", so whichever small program the plug-in is used by, the plug-in owner's gadget is a "small program sample". The plug-in owner program will continue to be used below.
Typically, when starting using the plug-in function page, you need to turn on the two developer tools window, one of which opens the plugin item, another small program project that opens the plugin owner's applet.For example, an open "small program sample plugin" project and another open "small program sample" project.
These two windows, the former is used to edit the plugin, which is used to edit the plugin owner applet.All of the following needs to edit the contents of the plug-in owner's applet is done in the latter.
To call a plugin feature page in the plugin, you need to activate the function page features of the Plugin Owner's applet.Specifically, add the FunctionalPages defined segment in the app.json file of the plugin owner applet, and make it value true, for example:
Code example:
{
"functionalPages": {
"independent": true
}
}
Currently, compatible old-style write:
{
"functionalPages": true
}
Old-style Writings will be removed in the future, and the upload will not be compiled in the future.
The difference between these two ways is that the new way of writing "independent": True will make the code of the plug-in function page independently of other code, which means that the plug-in function page can be downloaded, loaded, with better performance performance.But also simultaneously allows the plug-in function page directory Functional-Pages / (Payment Features Using the files) Can't use files other than this directory (vice versa: files other than this directory cannot call this directory).
Note that when adding or changing this field, you need this applet to release a new version to use the plugin function page in your official environment.
Function page cannot use wx.navigateto to jump, but a component called Functional-Page-Navigator.Take user information as an example, you can place the following Functional-Page-Navigator in the plugin:
Code example:
<functional-page-navigator name="loginAndGetUserInfo" args="" version="develop" bind:success="loginSuccess">
<button>登录到插件</button>
</functional-page-navigator>
When the user clicks on this navigator, they automatically jump to the corresponding function page of the plug-in owner's program. T he feature page prompts the user to sign in or other appropriate actions. The result of the operation is returned as a component event.
The parameters and detailed usage methods of the function-page-navigator can be referred to in the component description.
Starting with the small program base library version 2.4.0, the plug-in owner's small program is enabled to jump to its own feature page. When the underlying library version is below 2.4.0, clicking function-page-navigator, which jumps to its own feature page, will not respond.
Currently, the jump of the feature page does not currently support debugging in developer tools, please test it on the real machine. When you first perform a real machine development test, the steps are usually as follows:
Note: the version-develop of functional-page-navigator is for debugging only, so before the plug-in is tried, you need to:
The User Information feature page is used to help plug-ins get user information, including openids and nicknames, which are equivalent to wx.login and wx.getUserInfo.
In addition, since the underlying library version 2.3.1, the plug-in can call wx.login and wx.getUserInfo directly after the user authorizes it in this feature page. Y ou don't need to go to the feature page again to get user information. Starting with base library version 2.6.3, you can use wx.getSetting to query whether a user has been authorized.
When the user information function page jumps using function-page-navigator, the corresponding parameter name should be the fixed value loginAndGetUserInfo, with the remaining parameters the same as wx.getUserInfo, specifically:
Args parameter description:
The name of the argument | Type | Required | Description |
---|---|---|---|
withCredentials | Boolean | Whether | Whether to bring login status information |
Lang | String | Whether | Specify the language in which the user information is returned, zh_CN Chinese Simplified, zh_TW Chinese Traditional, en English. The default is en. |
timeout | Number | Whether | Time-out, unit ms |
Note: When withCredentials is true, the data returned contains sensitive information such as encryptedData, iv, etc.
Bindsuccess returns a parameter description:
Parameters | Type | Description |
---|---|---|
code | String | User login credentials obtained with wx.login (valid for five minutes). Developers need to call apisers in the background on the developer server, using code in exchange for information session_key such as openids |
errMsg | String | The result of the call |
userInfo | OBJECT | User information objects that do not contain sensitive information such as openid |
rawData | String | The original data string, which does not include sensitive information, is used to calculate the signature. |
signature | String | Use sha1 (rawData and sessionkey) to get the string, which is used to verify the user information and refer to the document signature. |
encryptedData | String | Encrypted data for complete user information, including sensitive data, can be found in the encryption data decryption algorithm |
Ⅳ | String | The initial vector of the encryption algorithm can be found in detail in the encryption data decryption algorithm |
UserInfo parameter description:
Parameters | Type | Description |
---|---|---|
nickName | String | The user's nickname |
avatarUrl | String | The user avatar, the last value represents the square avatar size (there are 0, 46, 64, 96, 132 values optional, 0 represents 132 x 132 square avatar), the user does not have the avatar when the item is empty. If the user changes the avatar, the original avatar URL will not be valid. |
gender | String | The user's gender is male when the value is 1, female at 2, and unknown when the value is 0 |
city | String | The user's city |
province | String | The province in which the user is located |
country | String | The user's country |
language | String | The user's Chinese Simplified is zh_CN |
Code example:
<!--plugin/components/hello-component.wxml-->
<functional-page-navigator
name="loginAndGetUserInfo"
args="{{ args }}"
version="develop"
bind:success="loginSuccess"
bind:fail="loginFail"
>
<button class="login">登录到插件</button>
</functional-page-navigator>
// plugin/components/hello-component.js
Component({
properties: {},
data: {
args: {
withCredentials: true,
lang: 'zh_CN'
}
},
methods: {
loginSuccess: function (res) {
console.log(res.detail);
},
loginFail: function (res) {
console.log(res);
}
}
});
When the user clicks on the navigator, they will jump to the following user information function page:
Check out the examples in WeChat Developer Tools:
The payment function page is used to help the plug-in complete the payment, which is equivalent to the function of wx.requestPayment.
Note that plug-ins use the payment function and require additional permission requests, which are located in the "Small Program Plug-ins - Basic Settings - Payment Capabilities" settings in the administrative background. In addition, whether or not through the application, the main body for the personal program in the use of plug-ins, can not normally use the plug-in payment function.
When the payment function page jumps using functional-page-navigator, the corresponding parameter name should be a fixed value requestPayment, with the following other parameters:
Args parameter description:
The name of the argument | Type | Required | Description |
---|---|---|---|
fee | Number | Is | The amount that needs to be displayed on the page in points |
paymentArgs | Object | Whether | Any data passed to the response function in the function page |
currencyType | String | Whether | The code that needs to be displayed in the currency symbol on the page, which defaults to CNY |
Legal value of currencyType:
Value | Description | The lowest version |
---|---|---|
CNY | Currency symbol . ¥ | |
USD | The currency symbol US$ | |
JPY | Currency symbol J | |
EUR | Currency symbol . . | |
HKD | Currency symbol HK$ | |
GBP | The currency symbol | |
AUD | The currency symbol A$ | |
MOP | The currency symbol MOP$ | |
KRW | Currency symbol |
Code example:
<!-- plugin/components/pay.wxml -->
<!-- 上线时,version 应改为 "release",并确保插件所有者小程序已经发布 -->
<functional-page-navigator
version="develop"
name="requestPayment"
args="{{ args }}"
bind:success="paymentSuccess"
bind:fail="paymentFailed"
>
<button class="payment-button">支付 0.01 元</button>
</functional-page-navigator>
// plugin/components/pay.js
Component({
data: {
args: {
fee: 1, // 支付金额,单位为分
paymentArgs: 'A', // 将传递到功能页函数的自定义参数
currencyType: 'USD' // 货币符号,页面显示货币简写 US$
}
},
methods: {
// 支付成功的回调接口
paymentSuccess: function (e) {
console.log(e);
e.detail.extraData.timeStamp // 用 extraData 传递数据,详见下面功能页函数代码
},
// 支付失败的回调接口
paymentFailed: function (e) {
console.log(e);
}
}
})
When the user clicks on the navigator, they will jump to the payment feature page below:
The payment function page requires the plug-in developer to provide a function in the plug-in owner's program in response to payment calls in the plug-in. T hat is, when the plug-in jumps to the payment function page, the function is called at the appropriate time to help complete the payment. If a function page function is not provided, the function page call will return a failure through the fail event.
The payment function page function should be provided as an export function in the functional-pages/request-payment.js file under the root of the plug-in owner's applet, called beforeRequestPayment. The function should receive two arguments:
The name of the argument | Type | Description |
---|---|---|
paymentArgs | Object |
That is, custom data is passed to the feature page through
paymentArgs
arg
parameter of the function-page-navigator
|
callback | Function | Callback function, after which the applet initiates a payment (similar to wx.requestPayment) |
Arguments to the callback function:
The name of the argument | Type | Description |
---|---|---|
error | Object |
Failure information, if no failure, should be
null
|
requestPaymentArgs | Object | The payment parameter, which is used to call wx.requestPayment, is as follows |
Parameters for reqeustPaymentArgs:
The parameter used to initiate the payment is the same as wx.requestPayment, but there is no callback function (success, fail, complete):
Parameters | Type | Required | Description |
---|---|---|---|
timeStamp | String | Is | The number of seconds from 00:00:00 on January 1, 1970 to the present time |
nonceStr | String | Is | Random string with a length of less than 32 characters. |
package | String | Is | Unified order interface returned by the prepay_id parameter value, the submission format is prepay_id: |
signType | String | Is | Signature algorithm, MD5 is temporarily supported |
paySign | String | Is | Signature, the specific signature scheme can be seen in the small program payment interface document; |
extraData | any | Whether | A custom segment determined by the developer, which is passed unaligned into the callback parameters for successful payments, as shown in the code example. Base library 2.9.1 starts to support |
For more information, please review the WeChat payment interface documentation
Example of function code for a feature page:
// functional-pages/request-payment.js
exports.beforeRequestPayment = function (paymentArgs, callback) {
// 注意:
// 功能页函数(这个函数)不应 require 其他非 functional-pages 目录中的文件,
// 其他非 functional-pages 目录中的文件也不应 require 这个目录中的文件,
// 这样的 require 调用在未来将不被支持。
//
// 同在 functional-pages 中的文件可以 require
var getOpenIdURL = require('./URL').getOpenIdURL;
var paymentURL = require('./URL').paymentURL;
// 自定义的参数,此处应为从插件传递过来的 'A'
var customArgument = paymentArgs.customArgument;
// 第一步:调用 wx.login 方法获取 code,然后在服务端调用微信接口使用 code 换取下单用户的 openId
// 具体文档参考 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html?t=20161230#wxloginobject
wx.login({
success: function (data) {
wx.request({
url: getOpenIdURL,
data: { code: data.code },
success: function (res) {
// 拉取用户 openid 成功
// 第二步:在服务端调用支付统一下单,返回支付参数。这里的开发和普通的 wx.requestPayment 相同
// 文档可以参考 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3
wx.request({
url: paymentURL,
data: { openid: res.data.openid },
method: 'POST',
success: function (res) {
console.log('unified order success, response is:', res);
var payargs = res.data.payargs;
// 第三步:调用回调函数 callback 进行支付
// 在 callback 中需要返回两个参数: err 和 requestPaymentArgs:
// err 应为 null (或者一些失败信息);
// requestPaymentArgs 将被用于调用 wx.requestPayment,除了 success/fail/complete 不被支持外,
// 应与 wx.requestPayment 参数相同。
var error = null;
var requestPaymentArgs = {
timeStamp: payargs.timeStamp,
nonceStr: payargs.nonceStr,
package: payargs.package,
signType: payargs.signType,
paySign: payargs.paySign,
extraData: { // 用 extraData 传递自定义数据
timeStamp: payargs.timeStamp
},
};
callback(error, requestPaymentArgs);
}
});
},
fail: function (res) {
console.log('拉取用户openid失败,将无法正常使用开放接口等服务', res);
// callback 第一个参数为错误信息,返回错误信息
callback(res);
}
});
},
fail: function (err) {
console.log('wx.login 接口调用失败,将无法正常使用开放接口等服务', err)
// callback 第一个参数为错误信息,返回错误信息
callback(err);
}
});
}
Note: Feature page functions should not require files in other non-functional-pages directories, nor should files in other non-functional-pages directories. Such require calls will not be supported in the future.
This directory and file should be placed in the plug-in owner's program code, not in the plug-in owner's code, as part of the plug-in owner's program (not as part of the plug-in). If you need to add or change this code, you need to publish the plug-in owner gadget for it to take effect in the official version, and you need to preview the plug-in owner gadget again to take effect in the development version.
The ship-to address function page is used to display the user's list of receiving addresses, where the user can select the receiving address. Support starts with base library version 2.4.0.
When the user information function page jumps using function-page-navigator, the corresponding parameter name should be the fixed value chooseAddress, returning the same parameter as wx.chooseAddress.
Bindsuccess returns a parameter description:
Property | Type | Description | The lowest version |
---|---|---|---|
userName | string | The name of the conseer | |
postalCode | string | Zip | |
provinceName | string | The first-level address of the national standard receiving address | |
cityName | string | The first-level address of the national standard receiving address | |
countyName | string | The first-level address of the national standard receiving address | |
detailInfo | string | Detailed shipping address information | |
nationalCode | string | The country code of the receiving address | |
telNumber | string | The receiving person's mobile phone number | |
errMsg | string | The error message |
Code example:
<!--plugin/components/hello-component.wxml-->
<functional-page-navigator
name="chooseAddress"
version="develop"
bind:success="onSuccess"
bind:fail="onFail"
>
<button>选择收货地址</button>
</functional-page-navigator>
// plugin/components/hello-component.js
Component({
methods: {
onSuccess: function (res) {
console.log(res.detail);
},
onFail: function (res) {
console.log(res);
}
}
});