uniapp 电商APP App.vue main.js store等文件的处理方案

蔚落 2021-07-25 17:17 701阅读 0赞

# 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

发表评论取消回复

表情：

评论列表（有 0 条评论，701人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 电商app 退出app功能实现

几乎所有的app都是有底部tab栏的，在tab页面中如果点击手机上的返回按键，都要退出app。这个退出app是app退出到后台运行，而不是退出当前账号。 ![在这里插入图片描

矫情吗；*/ 2021年07月26日 01:04/ 0 赞/ 687 阅读

相关 uniapp 电商app签到功能实现

签到功能目前公司所做的电商app要做一个签到送津贴的页面。接口还在开发中，页面已经搭完了。页面展示如下： ![在这里插入图片描述][watermark_type_

╰半橙微兮°/ 2021年07月26日 00:36/ 0 赞/ 1167 阅读

相关 uniapp 电商app vuex的处理方案及注意事项

vuex：组件间数据通信在电商app中，会有各种各样的广告，为了能够保证各个组件都能够调用广告信息，最简单的处理方式就是通过vuex； vuex的官方说法 Vue

拼搏现实的明天。/ 2021年07月25日 22:34/ 0 赞/ 620 阅读

相关 uniapp 电商app 手机充值页面

电商app支持手机充值现在很多的电商app都是支持手机充值的，我们公司也实现了这个功能。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

旧城等待，/ 2021年07月25日 19:51/ 0 赞/ 904 阅读

相关 uniapp 电商app 步骤条功能的使用

步骤条功能原型图如下图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

柔情只为你懂/ 2021年07月25日 17:33/ 0 赞/ 961 阅读

相关 uniapp 电商APP App.vue main.js store等文件的处理方案

App.vue <script> import { appOnLaunch,appOnShow,appOnHide} from '@/static/js

蔚落/ 2021年07月25日 17:17/ 0 赞/ 702 阅读

相关 uniapp 电商app 瀑布流布局实现

瀑布流布局 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

た入场券/ 2021年07月25日 17:04/ 0 赞/ 1373 阅读

相关 uniapp 电商app支付倒计时处理

电商app支付倒计时所有电商app支付页面都是有倒计时的，一来可以促进消费，二来可以减少恶意减库存的问题发生。因为创建订单的时候，除了预售的商品外，实际销售的商品

喜欢ヅ旅行/ 2021年07月25日 16:40/ 0 赞/ 708 阅读

相关 uniapp电商app pages.json文件

pages.json { "pages":[ { "path":"componets/zaiui-common/view/ho

心已赠人/ 2021年07月25日 16:28/ 0 赞/ 631 阅读

相关 uniapp 电商app 下载页面功能实现

下载页面 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2021年07月25日 14:42/ 0 赞/ 914 阅读