前端
一点也不简单

uni-app开发经验总结

最近接手了个混合app音乐的项目,真是让人头疼。

在这种头疼的情况下,我选择了uni-app来进行开发,虽然可以用react-native,但从需求的 角度来看,小巧的uni-app似乎更适合本次开发。

uni-app的特点:跨平台,vue语法,这更好的方便我们进行开发了,大大降低了学习成本。

当然,给个特别提示:跨平台意味着我们可能要处理各个平台的兼容性问题。

1.导航栏能否满足需求问题

场景1:在实际项目中,倘若项目简单顶部导航就一个文字叙述,那么我们可以直接在page.json里设置

{
   //pages数组中第一项表示应用启动页,参考 
   https://uniapp.dcloud.io/collocation/pages
   "path": "pages/new/new",
   "style": {
	navigationBarTitleText": "最新",
	"enablePullDownRefresh": true
    }
}

场景2:稍微复杂一点点,中间文字叙述,两边有搜索框或者返回框之类的,或者输入框(只有app支持)

注意:在这里是中间文字叙述,左右有俩个小图标的形式(等会会讲到iconfont再这里面的使用方法),并且该形式只支持app,无法同事兼顾h5和微信端,所以通常都会成为场景3

{
	"path": "pages/rank/index",//排行
	"style": {
		"app-plus": {
		      "titleNView": {
		           "buttons": [{
		                 "text": "\ue790",
		                 "fontSrc": "/static/font/iconfont.ttf",
		                 "fontSize": "32upx",
		                 "float": "left"
		            },
		            {
		                  "text": "\ue611",
		                   "fontSrc": "/static/font/iconfont.ttf",
		                    "fontSize": "32upx"
		             }]
		       }
		  }
	}
}

场景3:需要一些花里胡哨的功能,这个时候原生的导航栏可能就无法满足需求了,这个时候我们需要自定义导航

注意:使用自定义导航的缺点是牺牲了性能,再页面刚加载的时候,原生组件基本是立马出现并且内容已经渲染完成了的,而自定义组件可能会因为网络的原因而还没有加载,就会出现空白部分(解决办法是用loading来遮盖)

步骤:

1.page.json里将需要用到自定义组件的页面设置为custom(表示禁用原生导航)

{
	"path": "pages/rank/rankDetail",//歌单详情
	"style" : {
		"enablePullDownRefresh": false,
		"navigationBarTitleText": "歌单详情",
		"navigationStyle":"custom"
	}
}

2.使用自定义组件,可以用ui组件,也可以自己写,这里我用了colorui组件里的cu-custom组件,注意引入了组件后,请记得引入css样式

//模板使用
<cu-custom :isBack="true" :alp="alp">
	<block slot="backText">歌单</block>
	<block slot="content"></block>
</cu-custom>
//我在main.js里全局注册了这个组件,当然,在使用的页面注册也是ok的
import cuCustom from './colorui/components/cu-custom.vue'//全局引入
Vue.component('cu-custom',cuCustom)

注意:我们要处理的多端问题,要设计到手机顶部的系统信息的高度,不同的手机是不一样的,不同的端也不一样,所以官方推荐我们用插件市场的NavBar,其实可以这么处理,在App.vue里这么处理:

<script>
	import Vue from 'vue'
	export default {
		onLaunch: function() {
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					Vue.prototype.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						Vue.prototype.CustomBar = e.statusBarHeight + 50;
					} else {
						Vue.prototype.CustomBar = e.statusBarHeight + 45;
					};
					// #endif
					
					// #ifdef MP-WEIXIN
					Vue.prototype.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					Vue.prototype.Custom = custom;
					Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					// #endif		
					
					// #ifdef MP-ALIPAY
					Vue.prototype.StatusBar = e.statusBarHeight;
					Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif
				}
			})
	
		}
	}
</script>

2.tabBar的处理

3.如何使用iconfont字体

该项目中,我在头部导航(navBar)那里使用了字体图标,但在navBar里是通过page.json里的button来配置的,直接用class显然不切实际,所以用了这么一种方法(当然先引入iconnfont.css):

1.在iconfont.css里找到对应content

.icon-zanting:before {
  content: "\e66f";
}

.icon-caidan:before {
  content: "\e790";
}

.icon-xiazai17:before {
  content: "\e611";
}

.icon-bofang1:before {
  content: "\e606";
}

.icon-49xiayishou:before {
  content: "\e612";
}

2.例如第二个\e790,在page.json里使用时,加个u,例如

		{
			"path": "pages/rank/index",//排行
			"style": {
				"app-plus": {
		            "titleNView": {
		                "buttons": [{
		                        "text": "\ue790",
		                        "fontSrc": "/static/font/iconfont.ttf",
		                        "fontSize": "32upx",
		                        "float": "left"
		                    },
		                    {
		                        "text": "\ue611",
		                        "fontSrc": "/static/font/iconfont.ttf",
		                        "fontSize": "32upx"
		                    }
		                ]
		            }
		        }
			}
		},
赞(3) 打赏
未经允许不得转载:专注前端开发和vps技术交流的博客-纸飞机 » uni-app开发经验总结

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

微信扫一扫打赏