weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件
2023-09-11 14:15:30 时间
1.安装 路由模块 及 状态管理模块
npm install vue-router --save npm install vuex --save
2.自定义 TabBar 组件
src / components / TabBar.vue
TabBar.vue
<!-- 底部选项卡 --> <template> <div class="wrapper"> <div class="bar-item" @click="tabTo('home')"> <text class="bar-ic iconfont" :style="testCS"></text> <text class="bar-txt">首页</text> </div> <div class="bar-item" @click="tabTo('topic')"> <text class="bar-ic iconfont"></text> <text class="bar-txt">专题</text> </div> <div class="bar-item act" @click="tabTo('class')"> <text class="bar-ic iconfont"></text> <text class="bar-txt">分类</text> </div> <div class="bar-item" @click="tabTo('shop')"> <text class="bar-ic iconfont"></text> <text class="bar-txt">购物车</text> </div> <div class="bar-item" @click="tabTo('my')"> <text class="bar-ic iconfont"></text> <text class="bar-txt">个人</text> </div> </div> </template> <script> var modal = weex.requireModule('modal'); export default { computed:{ testCS:function () { return this.pIndexKey == 'home'?'color:#b4282d;':'' } }, data () { return { pIndexKey:'home' } }, mounted(){ }, methods: { tabTo(_key){ if(this.pIndexKey == _key) return; this.pIndexKey = _key; this.$emit('tabTo',{ status : 'tabTo', data : { key : _key } }) } } } </script> <style scoped> .iconfont { font-family:iconfont; } .wrapper{ position: fixed; bottom: 0; left: 0;right: 0; height: 90px; flex-wrap: nowrap; flex-direction: row; justify-content: space-around; border-top-width: 1px; border-top-color: #d9d9d9; background-color: #fafafa; } .bar-item{ flex: 1; } .bar-txt,.bar-ic{ color:#666; text-align: center; } .bar-active{ color:#b4282d; } .bar-ic{ padding-top: 14px; font-size: 38px; } .bar-txt{ font-size: 22px; padding-top: 2px; } </style>
3.自定义 工具类
src / utils / util.js
util.js
/** * 工具类 */ let utilFunc = { initIconFont () { let domModule = weex.requireModule('dom'); domModule.addRule('fontFace', { 'fontFamily': "iconfont", 'src': "url('http://at.alicdn.com/t/font_404010_jgmnakd1zizr529.ttf')" }); }, setBundleUrl(url, jsFile) { const bundleUrl = url; let host = ''; let path = ''; let nativeBase; const isAndroidAssets = bundleUrl.indexOf('your_current_IP') >= 0 || bundleUrl.indexOf('file://assets/') >= 0; const isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0; if (isAndroidAssets) { nativeBase = 'file://assets/dist'; } else if (isiOSAssets) { // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/ // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/ nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1); } else { const matches = /\/\/([^\/]+?)\//.exec(bundleUrl); const matchFirstPath = /\/\/[^\/]+\/([^\s]+)\//.exec(bundleUrl); if (matches && matches.length >= 2) { host = matches[1]; } if (matchFirstPath && matchFirstPath.length >= 2) { path = matchFirstPath[1]; } nativeBase = 'http://' + host + '/'; } const h5Base = './index.html?page='; // in Native let base = nativeBase; if (typeof navigator !== 'undefined' && (navigator.appCodeName === 'Mozilla' || navigator.product === 'Gecko')) { // check if in weexpack project if (path === 'web' || path === 'dist') { base = h5Base + '/dist/'; } else { base = h5Base + ''; } } else { base = nativeBase + (!!path? path+'/':''); } const newUrl = base + jsFile; return newUrl; }, getUrlSearch(url,name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = url.slice(url.indexOf('?')+1).match(reg); if (r != null) { try { return decodeURIComponent(r[2]); } catch (_e) { return null; } } return null; } }; export default utilFunc;
4.其他页面
src / pages / Home / Home.vue
例如:Home.vue
<!-- 首页 --> <template> <div> <text>首页</text> </div> </template> <script> export default { name: 'Home', data: () => ({ // }), created () { // }, methods: { // } }; </script> <style scoped> </style>
5.配置 路由
src / router / index.js
index.js
/** * 配置路由 */ import Router from 'vue-router' // 首页 import Home from '../pages/Home/Home.vue' // 专题 import Topic from '../pages/Topic/Topic.vue' // 分类 import Class from '../pages/Class/Class.vue' // 购物车 import Shop from '../pages/Shop/Shop.vue' // 个人 import My from '../pages/My/My.vue' Vue.use(Router) export default new Router({ // mode: 'abstract', routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home }, { path: '/topic', component: Topic }, { path: '/class', component: Class }, { path: '/shop', component: Shop }, { path: '/my', component: My } ] })
6.主页面 引入 工具类 及 TabBar 组件
src / App.vue
App.vue
<!-- 主页面 --> <template> <div class="app-wrapper"> <router-view class="r-box"></router-view> <tab-bar @tabTo="onTabTo"></tab-bar> </div> </template> <script> var modal = weex.requireModule('modal'); import util from './utils/util.js'; import tabBar from './components/TabBar.vue'; export default { data () { return { // } }, components: { 'tab-bar': tabBar }, created () { util.initIconFont(); }, methods: { onTabTo(_result){ let _key = _result.data.key || ''; this.$router && this.$router.push('/'+_key) } } } </script> <style> body{ margin: 0; padding: 0; background-color: #f4f4f4; color:#333; } </style> <style scoped> .app-wrapper{ background-color: #f4f4f4; } .r-box{ position: absolute; top:0; left: 0; right: 0; bottom: 0; } </style>
7.定义 入口文件 entry.js
src / entry.js
/** * 入口文件 */ import App from './App.vue' import router from './router' // 创建应用程序实例 new Vue(Vue.util.extend({ el: '#root', router }, App)); router.push('/');
8.在 webpack.config.js 中配置 入口文件
/***************** 配置入口文件 start *****************/ const entry = {index: pathTo.resolve('src', 'entry.js')}; const weexEntry = {index: pathTo.resolve('src', 'entry.js')}; /****************** 配置入口文件 end ******************/
9.项目 结构
10.效果图
注:#root 报错
如果你使用的是 entry.js 作为入口文件,就需要删除 webpack.conf.js 文件中的 getEntryFileContent 和 walk 方法。
相关文章
- 一次难忘的项目经历
- 关于Linux开源项目基础组件make编译流程
- 2015级C++第2周实践项目
- react 项目实战(六)提取布局组件
- 122分布式电商项目 - 终章
- uniapp - 超详细实现播放 svg / svga 格式动画组件插件,用于直播间赠送礼物特效动画或项目动画特效较多的应用(新手小白保姆级教程,提供插件+详细运行示例+使用文档+注意事项+格式说明)
- flume+kafka+SparkStreaming+mysql+ssm+高德地图热力图项目
- 霸道!阿里最新版Spring Cloud Alibaba项目文档,竟将重要组件弃用
- 基于Python和命令行人脸识别项目(系列四)
- Android组件化开发——从零开始教你分析项目需求并实现
- Android Studio软件技术基础 —Android项目描述---1-类的概念-android studio 组件属性-+标志-Android Studio 连接真机不识别其他途径
- 【为项目添加日志】logging的四大组件:Logger、Handler、Filter和Formatter
- Vue-修改Vue项目运行端口号(CLI2)
- 机器学习项目失败的9个原因
- 【转】spring官方为什么放弃spring social项目及替代方案
- 优雅的在React项目中使用Redux
- spring注解之@PostConstruct在项目启动时执行指定方法
- 微软免费软件项目DreamSpark更名为Microsoft Imagine
- 昱辉阳光为日本光伏项目供应10.4MW光伏组件
- 晋能科技高效多晶组件助力吕梁多个扶贫项目顺利并网
- 删除delphi组件TStringlist中的重复项目
- 本地运行ASP.NET 网站组件CYQ.IIS发布--网站项目展示必备工具
- ABP asp.net core 项目发布 IIS部署