Contents of this article
1. Background
The interface operation is to control the display interface of the WeChat webpage. The main functions include closing the current webpage, and controlling the display and hiding of some function buttons.
2. Code
Write test code directly to test 3 interfaces.
<input type="button" value="关闭当前窗口" onclick="uiTest('closeWindow')"> |
<input type="button" value="隐藏功能按钮" onclick="uiTest('hideAllNonBaseMenuItem')"> |
<input type="button" value="显示功能按钮" onclick="uiTest('showAllNonBaseMenuItem')"> |
<script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
var apiList = [ 'checkJsApi', 'closeWindow', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem' ];
$(function() {
// 向后端请求配置信息
$.ajax({
type : "GET",
url : "/wx-server/wxJsapiSignature",
data : {
url : location.href.split('#')[0]
},
dataType : "json",
success : function(res) {
configInfo(res);
}
});
});
// 通过wx.config注入配置信息
function configInfo(res) {
wx.config({
debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId : res.appId, // 必填，公众号的唯一标识
timestamp : res.timestamp, // 必填，生成签名的时间戳
nonceStr : res.nonceStr, // 必填，生成签名的随机串
signature : res.signature,// 必填，签名
jsApiList : apiList
// 必填，需要使用的JS接口列表
});
// 处理成功后回调
wx.ready(function() {
console.log("处理成功:");
wx.checkJsApi({
jsApiList : apiList,
success : function(checkRes) {
console.log("checkRes:", checkRes);
}
});
});
// 处理失败后回调
wx.error(function(err) {
console.log("处理失败:", err);
});
}
// 界面测试
function uiTest(type) {
if (type == 'closeWindow') {
wx.closeWindow();
} else if (type == 'hideAllNonBaseMenuItem') {
wx.hideAllNonBaseMenuItem();
} else if (type == 'showAllNonBaseMenuItem') {
wx.showAllNonBaseMenuItem();
}
}
</script>
3. Test
Use the mobile APP to open the WeChat webpage. When you click [Close the current window], the webpage will be closed.
After clicking the [Hide function button], click the menu in the upper right corner, and the function buttons displayed are obviously reduced. After clicking [Show Function Buttons], click the menu in the upper right corner again, and the display function buttons will return to normal.
