uniapp 电商APP App.vue main.js store等文件的处理方案
App.vue<script>import {appOnLaunch,appOnShow,appOnHide} from '@/static/js/applife.js'export default {onLaunch: function() {appOnLaunch()},onShow: function() {appOnShow()},onHide: function() {app
·
App.vue
<script>
import {appOnLaunch,appOnShow,appOnHide} from '@/static/js/applife.js'
export default {
onLaunch: function() {
appOnLaunch()
},
onShow: function() {
appOnShow()
},
onHide: function() {
appOnHide()
}
};
</script>
<style lang="scss">
/* H5端引用。玄学问题,我这边在这里引入的css,在APP上无效。前面加/也一样。原因未知...
可自行测试在APP上是否有效,如果有效,可在vue里删除css引入的代码。 */
/* #ifndef APP-PLUS */
@import "./static/colorui/main.css";
@import "./static/colorui/icon.css";
@import "./static/zaiui/style/app.scss";
/* #endif */
@import "./static/css/app.css";
@import "./static/font/good/icon.css";
/* 项目css */
</style>
//app.vue中存放的是应用的声明周期函数,最好是只使用以上三个生命周期函数,而且在使用过程中,最好是封装到另一个js文件中,在app.vue中只实现引用即可。
//以下为引用的文件
/* app生命周期处理 */
import {requestSysConfig} from "@/static/api/config.js"
import store from '@/store/index.js'
import {requestGoodsCateByID} from "@/static/api/goodsCate.js"
import {doLoginFromCache} from '@/static/api/login.js'
import {requestDicts} from "@/static/api/dicts.js"
/* 启动app时执行 */
export function appOnLaunch(){
console.log('启动app');
/* 加载系统配置 */
requestSysConfig().then(res =>{
store.commit('SET_SYS_CONFIG', res)
});
// 加载字典
requestDicts().then(res=>{
store.commit('SET_DICTS',res);
});
/* 加载用户登录信息 */
doLoginFromCache(store.state.loginFrom.launch);
}
/* 进入/激活app时执行,每次进入到app都会执行 */
export function appOnShow(){
console.log('appOnShow');
}
/* 隐藏app时执行,每次离开app都会执行此方法 */
export function appOnHide(){
console.log(appOnHide)
}
main.js
import Vue from 'vue'
import App from './App'
import Request from '@/static/common/luch-request/index.js'
import store from '@/store/index.js'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
store
})
app.$mount()
store文件夹
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import actions from './actions.js'
import mutations from './mutations.js'
import state from './states.js'
// import Router,{RouterMount} from 'uni-simple-router';
// Vue.use(Router)
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
state,
modules,
getters,
actions,
mutations
})
export default store
更多推荐
已为社区贡献3条内容
所有评论(0)