提交 87eea1a1 作者: 毛细亚

更新

上级 18175022
---
description:
globs:
alwaysApply: false
---
# 项目结构说明
本项目为基于 Vue.js 的前端应用,主要目录结构如下:
- [src/](mdc:src):主源码目录,包括:
- [main.js](mdc:src/main.js):应用入口文件。
- [App.vue](mdc:src/App.vue):根组件,负责全局认证逻辑。
- [router/](mdc:src/router):路由配置,主文件为 [index.js](mdc:src/router/index.js)。
- [store/](mdc:src/store):Vuex 状态管理,主文件为 [index.js](mdc:src/store/index.js)。
- [api/](mdc:src/api):接口请求封装,示例:[user.js](mdc:src/api/user.js)。
- [utils/](mdc:src/utils):工具函数和请求封装,如 [request.js](mdc:src/utils/request.js)。
- [mixins/](mdc:src/mixins):Vue 混入逻辑,如 [externalUserId.js](mdc:src/mixins/externalUserId.js)。
- [views/](mdc:src/views):页面组件,如 [HomeView.vue](mdc:src/views/HomeView.vue)、[AboutView.vue](mdc:src/views/AboutView.vue)。
- [styles/](mdc:src/styles):全局和局部样式文件。
- [components/](mdc:src/components):可复用组件(当前为空)。
- [assets/](mdc:src/assets):静态资源(如图片等)。
- @docs: 文档内容
- [public/](mdc:public):静态资源目录,供打包时复制到最终输出。
- [package.json](mdc:package.json):项目依赖和脚本配置。
- [README.md](mdc:README.md):项目说明文档。
如需详细了解某一目录或文件,可参考上述路径。
# 技术库
- 前端框架 vue 2.6
- 脚手架 用 vue-cli 5.0.0 创建
- 路由 使用 vue-router 3.5.1 管理路由
- 状态管理 使用 vuex 3.6.2 管理状态
- 使用 element-ui 2.15.6 作为 UI 库
- axios 请求 api
# 开发规范
- 组件命名规范
- Props类型声明 Props 尽量用规范的写法 并且声明默认值
- 响应式最佳实践
- 生命周期规范
- 事件处理规范
- 样式作用域
- 使用 try/catch 块处理异步操作
- 使用组件化的概念 尽量按照功能切分成多个组件 一个组件的代码不要太多
工程化要求:
- ESLint + Prettier
- 性能优化
- 代码分割
- 懒加载实现
# UI 规范
因为 企业微信侧边栏 宽度有限 所以尽量使用 自适应的样式来进行开发
---
description:
globs:
alwaysApply: false
---
......@@ -17,6 +17,7 @@
"moment": "^2.29.1",
"sass": "^1.89.0",
"sass-loader": "^16.0.5",
"vconsole": "^3.15.1",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
......
......@@ -35,6 +35,9 @@ importers:
sass-loader:
specifier: ^16.0.5
version: 16.0.5(sass@1.89.0)(webpack@5.99.8)
vconsole:
specifier: ^3.15.1
version: 3.15.1
vue:
specifier: ^2.6.14
version: 2.7.16
......@@ -1728,6 +1731,10 @@ packages:
resolution: {integrity: sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==}
engines: {node: '>= 0.6'}
copy-text-to-clipboard@3.2.0:
resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
engines: {node: '>=12'}
copy-to@2.0.1:
resolution: {integrity: sha512-3DdaFaU/Zf1AnpLiFDeNCD4TOWe3Zl2RZaTzUvWiIk5ERzcCodOE20Vqq4fzCbNoHURFHT4/us/Lfq+S2zyY4w==}
......@@ -3321,6 +3328,9 @@ packages:
resolution: {integrity: sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==}
hasBin: true
mutation-observer@1.0.3:
resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
mz@2.7.0:
resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
......@@ -4737,6 +4747,9 @@ packages:
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
engines: {node: '>= 0.8'}
vconsole@3.15.1:
resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
vue-hot-reload-api@2.3.4:
resolution: {integrity: sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==}
......@@ -7100,6 +7113,8 @@ snapshots:
cookie@0.7.1: {}
copy-text-to-clipboard@3.2.0: {}
copy-to@2.0.1: {}
copy-webpack-plugin@9.1.0(webpack@5.99.8):
......@@ -8959,6 +8974,8 @@ snapshots:
dns-packet: 5.6.1
thunky: 1.1.0
mutation-observer@1.0.3: {}
mz@2.7.0:
dependencies:
any-promise: 1.3.0
......@@ -10508,6 +10525,13 @@ snapshots:
vary@1.1.2: {}
vconsole@3.15.1:
dependencies:
'@babel/runtime': 7.27.1
copy-text-to-clipboard: 3.2.0
core-js: 3.42.0
mutation-observer: 1.0.3
vue-hot-reload-api@2.3.4: {}
vue-loader@15.11.1(@vue/compiler-sfc@3.5.14)(css-loader@6.11.0(webpack@5.99.8))(lodash@4.17.21)(vue-template-compiler@2.7.16)(webpack@5.99.8):
......
......@@ -6,14 +6,13 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<script src="./js/jweixin-1.2.0.js"></script>
<script src="./js/jwxwork-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
......@@ -12,7 +12,6 @@ export default {
},
created() {
this.handleAuthCode();
},
provide() {
return {
......@@ -42,18 +41,19 @@ export default {
let paramsObj = Object.fromEntries(
params.split('&').map(param => param.split('='))
)
console.log(paramsObj, 'paramsObj')
const { code, corp_id } = paramsObj;
const userid = sessio.getItem('userid');
if (userid) {
const userid = sessionStorage.getItem('userid');
if (!userid || userid === '') {
this.getWxUserInfo(code, corp_id);
} else {
getWxUserInfo(code, corp_id);
this.resolveAuth();
console.log('userid 存在')
}
} else {
Authorize(to);
this.Authorize();
}
} else {
Authorize(to);
this.Authorize();
}
},
getWxUserInfo(authCode) {
......@@ -61,17 +61,18 @@ export default {
if (res.status_code === 1) {
let { userid } = res.data || {};
if (userid) {
localStorage.setItem('userid', userid);
sessionStorage.setItem('userid', userid);
sessionStorage.setItem('userInfo', JSON.stringify(res.data));
// 解析 Promise
this.resolveAuth();
} else {
Authorize(to)
this.Authorize()
}
} else {
Authorize(to)
this.Authorize()
}
}).catch(() => {
Authorize(to)
this.Authorize()
})
}
},
......
# 企业微信客户端侧边栏应用开发
基于企业微信客户端 开发侧边栏功能 企业微信的文档 [企业微信文档]([链接地址](https://developer.work.weixin.qq.com/document/path/94352) )
......@@ -4,7 +4,8 @@ import router from './router'
import store from './store'
// import '@/styles/index.scss' // global css
Vue.config.productionTip = false
import VConsole from 'vconsole';
new VConsole();
new Vue({
router,
store,
......
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
Vue.use(Vuex)
export default new Vuex.Store({
......@@ -13,5 +13,6 @@ export default new Vuex.Store({
actions: {
},
modules: {
user
}
})
const state = {
}
const mutations = {
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
\ No newline at end of file
......@@ -14,10 +14,81 @@ export default {
this.getAuthUser();
});
},
data() {
return {
}
},
methods: {
getAuthUser() {
console.log('getAuthUser')
this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
console.log(this.userInfo,'12313')
this.companyConfigInit()
},
//企业验证配置
companyConfigInit(data) {
let that = this;
let { time, noncestr, corp_signature,corp_id } = this.userInfo || {};
// eslint-disable-next-line
wx.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: corp_id, // 必填,企业微信的corpID
timestamp: time, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: corp_signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ["getContext", "getCurExternalContact", "invoke"] //你要调用的sdk接口必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
// eslint-disable-next-line
wx.ready(function () {
console.log('config成功了')
that.appAgentConfig();
});
// eslint-disable-next-line
wx.error(function (res) {
console.log('config失败了', res)
});
},
//应用验证配置
appAgentConfig(data) {
let that = this;
let { time, noncestr, corp_signature,corp_id } = this.userInfo || {};
wx.agentConfig({
corpid:corp_id,
agentid: 1000013,
timestamp: time,
nonceStr: noncestr,
signature: corp_signature,
jsApiList: ["getContext", "getCurExternalContact", "invoke"],
success: function () {
// eslint-disable-next-line
wx.invoke('getCurExternalContact', {
}, function (res) {
// alert('invoke成功了')
// alert(JSON.stringify(res),'invokeData数据')
console.log('invoke成功了', res)
if (res.err_msg == "getCurExternalContact:ok") {
localStorage.setItem('externalUserId', res.userId);
// this.$store.dispatch("common/setExternalUserId", res.userId);
that.externalUserId = res.userId; //返回当前外部联系人userId
// alert(that.externalUserId);
} else {
//错误处理
}
//查看相关接口是否可以调用
// that.checkJsApi();
});
},
fail: function (res) {
console.log('invoke失败了', res)
// alert('invoke失败了', res)
if (res.errMsg.indexOf("function not exist") > -1) {
alert("版本过低请升级");
}
}
});
},
}
}
</script>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论