uni-app初次学习使用

样式

按照我以前的习惯，都是用less编译css样式文件，然后再在index,html文件里面引入，但是我发现在编译uni-app移动端文件的时候发现，有点杀鸡用牛刀，因为移动端一个界面的内容本来就少，不像pc端那么复杂，所以可以直接写在文件里面的style里面
还有，建议不要使用第三方ui框架，因为会出现样式失效的问题。uni-app有官方的ui组件，走别人的路，让别人走投无路。

微信小程序端

里面好像要在最外层包裹一个page，不然的话使用类名选择器好像会失效

伪类选择器

尝试了一下伪类选择，没有成功，不知道是不是我语法错误还是不支持伪类。但是感觉伪类可能用处不大，因为移动端页面内容太少，而且还有官方原生的组件库支持，大部分问题都能解决。

官方的ui扩展组件

官方的应该是最靠谱的，我猜，而且在创建项目的时候会有官方的hello-uniapp案例，可以尝试去使用一下，效果很不错，而且ui库基本满足所有的需求。导入的话要有HBuilder账号和邮箱验证，才能导入使用。怪不得说Hbuilder对于uni-app做了增强适配。

跨端冲突

毕竟uni-app号称是多端编译，但是还是容易出现冲突。
uni-collapse在移动端可以使用，但是在网页端就出现了问题。

后来发现不是这个问题，之后编译了，手机端又出现问题了。这个热更新问题挺大的，最好的解决方法就是项目重新编译。

个人建议：热更新在H5端，H5端更新不容易出现无反应的现象，而且反应快。没问题了之后再在移动端使用，挤压页面模拟移动端，而且还有控制台，编译体验极佳。

后面尝试用easy mock去做后台的数据，然后发现postman里面不允许在文件夹里面放文件夹。
postman全局变量和局部变量的差别，好像是全局变量不能选择，但是局部变量可以进行切换，不能叠加。
如图

globals是必定生效的，但是局部变量只能选择一个。

然后我开开心心去用easy mock，好像接口没法调用，网上一搜，网站好像崩了。

不过没关系，有老哥给了个新的mock网址，fastmock。
试了一下，上手很快，初次使用直接用get方法，你敢get我就敢返回数据。



如图进行简单配置，就可以实现简单效果了。如果要进行进阶的配置的话，好像要用mock.js语法，就是可以返回自己想要的随机数据。

常用的mock.js语法
@name 常见英文名
@integer(n) 长度为n的数字
list|n 数组个数为n的

fastmock逻辑使用(注意，里面不能使用注释)

通过官方规定的参数function({req,mock})，req是请求源，我还没搞清楚如何使用，mock是官方给的参数，可以使用Mock.mock返回值

{
  "code": "0000",
  "data": {
      "list|3":[{
        "name": "@name",
        "age" : "@integer(20)"
      }]
  },
  "log" : function({req,Mock}){
            console.log("测试");
            return Mock.mock(
                    "测试" 
            );
        },
  "desc": "成功"
}

返回值

{
    "code": "0000",
    "data": {
        "list": [
            {
                "name": "David Walker",
                "age": 7272364228525030
            },
            {
                "name": "Ronald Brown",
                "age": 1224384746195975
            },
            {
                "name": "Patricia Robinson",
                "age": 1354861200707613
            }
        ]
    },
    "desc": "成功",
    "log": "测试"
}

返回值2

{
  "code": "0000",
  "data": {
      "list|3":[{
        "name": "@name",
        "age" : "@integer(20)"
      }]
  },
  "log" : function({req,Mock}){
            console.log("测试");
            return Mock.mock({
                "location" : "理塘",
                "description" : "世界最高城",
                "suprise" : "那不是顶针吗"
            }
                
            );
        },
  "desc": "成功"
}

{
    "code": "0000",
    "data": {
        "list": [
            {
                "name": "Thomas Hall",
                "age": 5789433717470513
            },
            {
                "name": "Michelle Perez",
                "age": 1527567500498913
            },
            {
                "name": "Michelle Hall",
                "age": 2397263775902197
            }
        ]
    },
    "desc": "成功",
    "log": {
        "location": "理塘",
        "description": "世界最高城",
        "suprise": "那不是顶针吗"
    }
}

累了，今天就到这里好了