Uni-App简单快速入门文档

1、Vue的语法, 微信小程序的规范，用HbuildX开发效率会很高，因为有很多代码块，写script时候，比如说你要写一个methods，要选择Vue methods，有代码块。

2、使用HbuildX开发，用u开头有很多代码块，比如说urequest，就会出现uni.request代码块。或者ulist等。

3、新建页面：几种方式

1)、在pages下面新建文件夹，新建文件， 再去pages.json 中写上路由

2)、在pages下面，右键新建页面。会自动在pages.json中注册路由 《旭哥推荐》

4、页面跳转uni.navgaterTo, url写文件的路径

    // 同样有代码块，unav...
    uni.navigateTo({
        url: `../demo-info/demo-info?newsid=${newsId}`, // 看清楚
        success: res => {},
        fail: () => {},
        complete: () => {}
    });		

5、请求网络接口uni.request, 回调在success中，有点像jQuery

// ureq 同样有代码块
uni.request({
    url: 'https://unidemo.dcloud.net.cn/api/news',
    method: 'GET',
    data: {},
    success: res => {
        this.news = res.data;
        uni.hideLoading();
    },
    fail: () => {},
    complete: () => {}
});

6、生命周期: 主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted。具体的用到了去查官网很多

有很多生命周期，有像小程序的 + vue的 + uni-app自定义的。。

组件生命周期用vue的

beforeCreate	在实例初始化之后被调用。详见		
created	在实例创建完成后被立即调用。详见		
beforeMount	在挂载开始之前被调用。详见		
mounted	挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档		
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见	仅H5平台支持	
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见	仅H5平台支持	
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见		
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见	

页面生命周期，很像小程序的

onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例		
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面		
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发		
onHide	监听页面隐藏		
onUnload	监听页面卸载		
等等...

还有整个应用的生命周期

onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onError	当 uni-app 报错时触发
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯, nvue是weex的，写原生app的

7、路由传参：

// 父组件  ----------向demo-info页面传参了，用的query方式
uni.navigateTo({
    url: `../demo-info/demo-info?newsid=${newsId}`,
    success: res => {},
    fail: () => {},
    complete: () => {}
});

// 子组件接收  直接onLoad接收到
onLoad(data) {
    console.log(data);
    uni.request({
        url: `https://unidemo.dcloud.net.cn/api/news/36kr/${data.newsid}`,
        method: 'GET',
        data: {},
        success: res => {
            console.log(data);
            this.title = res.data.title;
            this.strings = res.data.content;
        },
        fail: () => {},
        complete: () => {}
    });
}

8、uniapp提供的组件，需要用啥直接去看文档，下面是个例子, rich-text 渲染h5标签使用的，div、p这一类标签

<rich-text :nodes="strings"></rich-text>

// nodes 有两种参数，一种是字符串，一种是数组

9、调试模式

1）、 开启debug，直接调试app，类似浏览器F12的调试界面

2）、 编译模式，类似小程序的设置编译模式， 比如说你需要调试mine界面，但是每次修改mine都会刷新到首页。。影响效率，添加编译模式直接启动就是mine

// 编译模式，在pages.json中添加
"condition": { //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式（list 的索引项）
    "list": [
        {
            "name": "test", //模式名称，这个随便填
            "path": "pages/demo-info/demo-info", //启动页面，必选
            "query": "newsid=5158607" //启动参数，在页面的onLoad函数里面得到。
        },
        {
            "name": "调试mine", //模式名称，这个随便填
            "path": "pages/mine/mine", //启动页面，必选
        }
    ]
}

11、uni-app提供的很多，比如 条件编译、对原生App的支持 引入了weex引擎，可以直接写nvue文件，（native vue）、等等以后我们写多端项目的时候我们再去研究

12、uni的一些小坑

1、 组件内引入图片要使用绝对路径。/static/...
2、 主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted。
3、 用tap事件代替click事件。
4、 阻止事件冒泡时要在外层加一层标签<view @tap.stop="stop"></view>，直接在需要使用的方法上加.stop无效。
5、 <picker>中最好写一个<view class="style">写样式，而不是在picker上加样式。
6、 <scroll-view>中写position: fixed，在ios下会有兼容性问题。
7、 出现遮罩后阻止页面滚动，可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=""。
8、 <swiper>一定要给高度才会生效，一般是动态获取里面的元素或列表高度再赋值给<swiper>。

然后我听我朋友说，写uni的。。。iso上和安卓之间也有很多坑，什么滑动不了啊什么的，又遇到在去研究