uniapp 开发微信公众号H5 隐藏右上角扩展按钮
1.首先使用npm安装一下微信的jsApi (这个应该都会吧 就跟vue使用npm安装依赖一样)
初始化:
npm init -y
安装微信模块:
npm install jweixin-module --save
H5的话 要引入js
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript" charset="utf-8"></script>
2.在uniapp的common下新建一个wxApi.js文件
const wx = require('jweixin-module');
const wexinHide = (data) => {
let [appId, timestamp, nonceStr, signature] = [data.appId, data.timestamp, data.nonceStr, data.signature];
wx.config({
debug: false,
appId,
timestamp,
nonceStr,
signature,
jsApiList: ["hideOptionMenu"]
});
wx.ready(function(){
wx.hideOptionMenu();
});
wx.error(function(res){
console.log("信息验证失败",res);
});
}
export default {
wexinHide,
}
3.在main.js里导入挂载一下(一定要用条件编译,否则在打包APP或在手机基座运行时会报 ‘jweixin’ of undefined,造成手机白屏)
// #ifdef H5
//导入 //(一定要用条件编译,否则在打包APP或在手机基座运行时会报 ‘jweixin’ of undefined,造成手机白屏)
import wxApi from './common/wxApi.js'
//挂载
Vue.prototype.$wxHide = wxApi.wexinHide
// #endif
4.在页面上调用隐藏右上角功能 index.vue
onLoad(param) {
const that = this;
let url = that.$http.baseUrl2+window.location.pathname;
console.log("当前页面完整路径",url);
that.$http.get('api/user/signature',{
url:url}).then(res=>{
console.log("隐藏验证",res);
let data1 = res.data;
if (res.status_code == 200) {
that.$wxHide(data1)
} else {
that.$tool.toast(res.message)
}
})
}