一直想用uni来做个项目，这次公司有新项目，我决定用uni来写，虽然自己学的还不是很熟。感觉只有在项目中才能更好的学习，所以记下在项目中遇到的一些要点。

第一步：新建项目我就不写了，当项目建好后会生成很多文件，我就拿几个常用的来说下，先看下图片：

1. components 文件是存放组件的地方，组件都是根据项目需求自己对代码进行抽离。
2. icon 文件 不是项目自动生成的，是自己建立的，用于引用图标库
3. pages 文件是存放页面的，和微信小程序里面的一样
4. static  文件是存放项目中的图片
5. manifest.json 是配置文件，主要配置APP、 H5 、各类小程序、
6. pages.json 是配置页面底部导航栏和页面。个人感觉这个配置挺好的，比小程序要好点。
7. uni.scss  是存放公共的样式。

以上是项目基本的目录及用处，大家也应该看到了，uni的页面都是vue文件，其实uni框架就是用vue的，但是uni有很多地方和小程序很相似。

---

uni中页面调整路径的写法，必须要加上 ` `这两个符号， 小程序则不需要` `这两个符号

:url="`/pages/sort/${item.url}`"

uni中动态追加 class的写法，同样也加上` `这两个符号

:class="`${item.icon}`" 

uni中设置头部导航栏样式，可以单独设置某个页面的头部导航栏，需要在pages.json文件中修改

{
		"path": "pages/travels/index",
		"style": {
				"navigationBarTitleText": "游记",
				"navigationStyle":"custom",  //可以去掉小程序端的顶部导航
				"app-plus":{
						"titleNView":false   // 去掉APP、H5的顶部导航
				}
		}
}
//此段主要是设置页面中顶部导航关闭方法

{
	"path": "pages/personal/index",
	"style": {
		"navigationBarTitleText": "",//个人主页
		"navigationStyle":"custom", 
		"app-plus":{
			"titleNView":{
				"type":"transparent",
				"backgroundColor":"rgba(0,0,0,0.1)",
				"titleColor": "#FFFFFF",
				"titleOverflow":"ellipsis"
			}
            或者
            //"titleNView":{//透明渐变导航栏 App-nvue 2.4.4+ 支持 
                    "type": "transparent"
                }  
		}
	}
}
//此段主要是设置顶部导航栏半透明及渐变透明

onReady: function() {
	 uni.setNavigationBarTitle({
	 	title: '爱生活的小美女主页'
	 }),
	 //success:res =>{},
	 // fail:() =>{},
	//complete:() => {}
	console.log("页面首次渲染完毕时执行");
}
//此段主要是动态修改导航栏标题

写到这里了，大家发现uni和小程序的写法很相似。大家也可以看下官方给提供的文档：https://uniapp.dcloud.io/api/ui/navigationbar?id=setnavigationbartitle

以上都是一些基本的文件配置和语法事项，接下来我们看下页面中常用的模块。如果项目中模块是通用的，尽量做成组件，方便后续维护和减少代码量。页面的数据都是采用临时的接口。我使用的是fastmock在线接口https://www.fastmock.site/#/

这里大家自己注册个账号，创建接口就行。

这是常见的scroll-view左右滚动的效果。

<view class="local">
	<!-- 模块标题 -->
	<view class="titleBlock">
		<text class="iconfont  icon-retuijianyinqing"></text>
		{{ localTitle }}
		<view class="More" @click="localMoreUrl()">{{localMore}}</view>
	</view>
    <!-- scroll-view左右滚动 -->
	<scroll-view class="localScroll" scroll-x="true" scroll-left="0" >
		<navigator class="localBlock" v-for="(item , index) in localList" :key="index" :url="`/pages/common/${item.localUrl}`">
			<image :src="item.localImg" :mode="item.mode" class="localImg">
			<view class="localName">
				{{item.cityName}}
				<text>{{item.EnglishName}}</text>
			</view>
		</navigator>
	</scroll-view>
</view>

export default {
	data() {
		return {
			localTitle:'目的地',
			localMore:'更多',
			localList:[],
			
		}
	},
	onLoad() {
		this.localData();	
	},
	methods: {
		//目的地 数据
		localData(){
			   uni.request({
				url:'https://www.fastmock.site/mock/接口id/list/api/localData',  
				method: 'POST',
				dataType: 'JSON',
				data:{
					text:'uni.request'
				},
				header: {
				    'content-type': 'application/x-www-form-urlencoded'
				}, 
				success: (res) => {
					// 将请求到的数据存放放到localList中
					this.localList = eval(res.data);
				}
			}); 
		}, 
		//更多目的地
		localMoreUrl(e){
			uni.navigateTo({
				url:"/pages/more/index",
			});
		},
	}
}

以上代码就是scroll-view左右滚动效果加更多的效果，大家可以在本地尝试下。uniapp语法和小程序语法很相似，只有上述写的url和动态class有点区别，其他都很类似。

最后给大家看下首页的实际效果，后续会把页面封装组件写出来，写的不好，欢迎大家指正点评。