uni-app 项目笔记(一)

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

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

image
image.gif

​​

  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}`"
image.gif

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

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

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

{
        "path": "pages/travels/index",
        "style": {
                "navigationBarTitleText": "游记",
                "navigationStyle":"custom",  //可以去掉小程序端的顶部导航
                "app-plus":{
                        "titleNView":false   // 去掉APP、H5的顶部导航
                }
        }
}
//此段主要是设置页面中顶部导航关闭方法
image.gif
{
    "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"
                }  
        }
    }
}
//此段主要是设置顶部导航栏半透明及渐变透明
image.gif

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

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

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

image
image.gif

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

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

image
image.gif


    
    
        
        {{ localTitle }}
        {{localMore}}
    
    
    
        
            
            
                {{item.cityName}}
                {{item.EnglishName}}
            
        
    

image.gif
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",
            });
        },
    }
}
image.gif

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

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

image
image.gif

你可能感兴趣的:(uni-app 项目笔记(一))