# JSSDK
JSSDK is used to provide WeChat's built-in browser interface capabilities, such as forwarding control, calling camera permissions (photo, video), file uploading, closing windows, evoking code scanning windows, and so on.
To use JSSDK only in the built-in browser, there are two steps: "Getting signature information on the server side" and "Configuring JSSDK on the web side".
# Server-side signature retrieval
The backend can automatically get all the JSSDK parameters needed by the frontend by using the JSSDKHelper.GetJsSdkUiPackageAsync()
method:
public async Task Index()
{
var jssdkUiPackage = await JSSDKHelper.GetJsSdkUiPackageAsync(appId, appSecret, Request)
return View(jssdkUiPackage);
}
Reference file for this project: /Controllers/WeixiJSSDKnController.cs
# Configure JSSDK on web side
Parameters configured in the back-end can be set directly in the front-end JS using wx.config
, for example, the following code will customise the title and image of the forwarded message when forwarding a web page:
wx.config({
debug: false, // 开启调试模式
appId: '@Model.AppId', // 必填,公众号的唯一标识
timestamp: '@Model.Timestamp', // 必填,生成签名的时间戳
nonceStr: '@Model.NonceStr', // 必填,生成签名的随机串
signature: '@Model.Signature',// 必填,签名
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
wx.error(function (res) {
console.log(res);
alert('验证失败');
});
wx.ready(function () {
var url = 'https://sdk.weixin.senparc.com';
var link = url + '/';
var imgUrl = url + '/images/v2/ewm_01.png';
//转发到朋友圈
wx.onMenuShareTimeline({
title: 'JSSDK朋友圈转发测试',
link: link,
imgUrl: imgUrl,
success: function () {
alert('转发成功!');
},
cancel: function () {
alert('转发失败!');
}
});
//转发给朋友
wx.onMenuShareAppMessage({
title: 'JSSDK朋友圈转发测试',
desc: '转发给朋友',
link: link,
imgUrl: imgUrl,
type: 'link',
dataUrl: '',
success: function () {
alert('转发成功!');
},
cancel: function () {
alert('转发失败!');
}
});
});
Tip: Passing a ViewModel in MVC needs to be defined at the top of the .cshtml file:
@model Senparc.Weixin.MP.Helpers.JsSdkUiPackage
Reference file for this project:
/Views/WeixinJSSDK/Index.cshtml
For more setting details, please refer to: JS-SDK description document (opens new window).