一、实战

• HBuilderX：在微信小程序中运行页面，需要设置->安全 开启微信小程序服务端口，HBuilder工具->设置->配置程序路径

- 返回数据格式
- id 新闻id 如： 72980
- title 标题
- created_at 创建时间
- author_avatar 图标

https://unidemo.dcloud.net.cn/api/news/36kr/ + id  ( id 为新闻id，上个页面传过来的）　　

onLoad: function() {
      快捷写法 -> ureq
}

onLoad:function(){
      uni.request({
            url: 'https://unidemo.dcloud.net.cn/api/news',
            method: 'GET',
            data: {},
            success: res => {
                 console.log(res)
            },
            fail: () => {},
            complete: () => {}
      });
}

//  ①   
//  ②   @tap="openinfo"       //监听单击事件
//       快捷写法 : me -> 选择 Vue methods方法代码块
//       unav -> 选择 uni.navigateTo({ 代码块 })
methods: {
     openinfo() {
         uni.navigateTo({
               url: '../info/info'
         });
      }
},

//  index.vue 列表页
:data-newsid="item.post_id"
methods: {
    openinfo(e) {	
        var newsid = e.currentTarget.dataset.newsid;
        //console.log(newsid)
        uni.navigateTo({
              url: '../info/info?newsid='+newsid
        });
    }
},
// info.vue 详情页
// onLoad生命周期：页面加载成功，获取传递的参数，保存在onLoad方法的 e.变量名称 中
onLoad: function(e){
    console.log(e) //{newsid: "5219628" }
}　　

uni.showLoading({
      title: "加载中...."
})　　

uni.hideLoading()　　

"pages": [ 
      // pages数组中第一项表示应用启动页，参考：
      // https://uniapp.dcloud.io/collocation/pages
     {
         "path": "pages/index/index",
         "style": {
               "navigationBarTitleText": "uni-app"
          }
      } ,
      //在使用HBuilderX新建info页面文件夹时，自动创建
     { 
         "path" : "pages/info/info",
         "style" : {}
      }
],

"condition": {       //模式配置，仅开发期间生效
      "current": 0,    //当前激活的模式（list 的索引项）
      "list": [{
             "name": "test", //模式名称
             "path": "pages/info/info", //启动页面，必选
             "query": "newsid=5158607" //启动参数，在页面的onLoad函数里可得到
      }]
}

二、白话uni-app —— html、vue、小程序的区别

• 网络模型：c/s ，前后端分离，通过ajax获取json数据

• 文件类型：.vue文件

• 文件内代码架构：template、script、style是并列的一级节点

• 外部文件引用方式：es6写法，import引入外部的js模块或css

• 组件/标签变化：以前是html标签，现在是小程序组件

1. div 改成 view
2. span、font 改成 text
3. a 改成 navigator
4. img 改成 image
5. input 还在，但type属性改成了confirmtype
6. form、button、checkbox、radio、label、textarea、canvas、video 这些还在。
7. select 改成 picker
8. iframe 改成 web-view
9. ul、li没有了，都用view替代
10. audio 不再推荐使用，改成api方式

https://uniapp.dcloud.io/api/media/background-audio-manager?id=getbackgroundaudiomanager

1. scroll-view 可区域滚动视图容器
2. swiper 可滑动区域视图容器
3. icon 图标
4. rich-text 富文本（不可执行js，但可渲染各种文字格式和图片）
5. progress 进度条
6. slider 滑块指示器
7. switch 开关选择器
8. camera 相机
9. live-player 直播
10. map 地图

• cover-view 可覆盖原生组件的视图容器。

• uni-app的非h5端的video、map、canvas、textarea是原生组件，层级高于其他组件。

• 如需覆盖原生组件，比如在map上加个遮罩，则需要使用cover-view组件

• js变化：

1. 运行环境从浏览器变成v8引擎。浏览器专用的window、document、navigator、location对象，包括cookie等存储，只有在浏览器中才有，app和小程序都不支持。但app和小程序支持web-view组件，里面可以加载标准HTML，这种页面仍然支持浏览器专用对象window、document、navigator、location。
2. 数据绑定模式变化从DOM操作变成Vue的MVVM模式
3. 注意： ① 小程序的数据绑定参考了vue，但自己修改了一些。在uni-app中只支持标准的vue，不支持小程序的数据绑定语法。②小程序里的setData在uni-app里并不存在，因为vue是自动双向数据绑定的。直接通过赋值方式修改数据，如果数据绑定到界面上，界面会自动更新渲染

• Api变化

1. alert、confirm 改成 uni.showmodel
2. ajax 改成 uni.request
3. cookie、session 没有了，local.storage 改成 uni.storage

• uni-app的js api还有很多，但基本就是小程序的api，把wx.xxx改为uni.xxx即可

• CSS变化：

1. 不支持*选择器、元素选择器里body改为page
2. 默认单位 upx、默认布局 flex布局
3. 注意背景图和字体文件尽量不要大于40k。会影响性能。

• 如果非要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。

• 在小程序里，其实小于40k的文件在css里也无法引用，uni-app编译器在编译时自动做了处理，把小于40k的文件编译为base64方式。

• 工程结构和页面管理：

1. 每个可显示的页面，都必须在 pages.json 中注册。pages.json类似与小程序的app.json，是配置文件。
2. 与Vue相比：没有Vue的路由，路由都在pages.json中管理。

• 与小程序相比： 原来app.json被一拆为二。

1. 页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json。
2. 原来的app.js和app.wxss被合并到了app.vue中

• uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。一般在/pages/xx的目录下。
• 页面提供了原生的导航栏和底部tabbar，但必须在pages.json中配置。

三、基于Promise封装uni-app的request方法，实现类似axios形式的请求

• 拦截器只能自己封装，uni-app仅提供网络请求的方法和中断连接的方法；

• 方法二【使用unifly代替uni-request】：unifly支持uni-request所有功能，而且更具有模块化思想。（uni-request不再维护，但历史版本仍然可以使用）

• 基于fly.js：是一个类似于axios的工具，可以设置拦截等需求

注：以上内容来自UniApp官网推荐教程