uView组件库使用

  1. 安装配置uview
    文档](https://www.uviewui.com/components/npmSetting.html))
  2. 在页面组件中，直接调用uview组件 
    1. <u-divider border-color="#ff5500">热门活动</u-divider>

uniapp的跨端效果演示

公司使用uniapp开发项目的时候，会优先对标考虑某个平台，我们在开发阶段，优先测试该平台

多测试兼容性较差的平台（微信小程序）

  1. web端
    • 在manifest.json中配置资源路径，相当于配置vue项目的publicPath
    • 将打包文件，部署至Nginx服务器
  2. 小程序端
  3. App端

自定义组件封装

跟Vue中封装组件一样，引入、挂载、使用的方式，也一样

数据请求方式

方法1：使用uni.request

  1. uni.request({
  2.     url:'https://woniu.h5project.cn/1.1/classes/Job',
  3.     method:'GET',
  4.     header:{
  5.         "X-LC-Id": "自己的id",
  6.         "X-LC-Key": "自己的key",
  7.         "Content-Type": "application/json"
  8.     },
  9.     success: (res) => {
  10.         console.log(res);
  11.     }
  12. })

方法2：自行封装uni.request

  1. // promise的三种状态： pendding处理中  resolve成功   reject失败
  3. import {BASE_URL,ID,KEY} from '../config/index.js'
  5. function http({url,method="GET",data={}}){
  6.   return new Promise((resolve,reject)=>{
  7.     uni.request({
  8.       url:BASE_URL+url,
  9.       method,
  10.       data,
  11.       header:{
  12.         'X-LC-Id': ID, //此处必须使用自己的ID
  13.         'X-LC-Key': KEY,  //此处必须使用自己的Key
  14.         'Content-Type': 'application/json'
  15.       },
  16.       success:(res)=>{
  17.         resolve(res)   //交给then
  18.       },
  19.       fail:(err)=>{
  20.         reject(err)  //交给catch
  21.       }
  22.     })
  23.   })
  24. }
  26. function get(url,data){
  27.   return http({url,method:'GET',data})
  28. }
  30. function post(url,data){
  31.   return http({url,method:'POST',data})
  32. }
  34. function del(url,data){
  35.   return http({url,method:'DELETE',data})
  36. }
  38. export {
  39.   http,
  40.   get,
  41.   post,
  42.   del
  43. }

方法3：使用uView提供的方法

文档](https://www.uviewui.com/js/http.html))

axios不兼容小程序

  1. 在utils中封装了一个http.intercepter.js
  2. 在main.js中引入并使用http.intercepter.js
  3. 在组件中，使用uview提供的方法，请求数据 
    1. this.$u.get('/1.1/classes/Jobs').then(res=>{
    2. console.log(res);
    3. })