uView组件库使用

  1. 安装配置uview
    [文档](
  2. )
  3. 在页面组件中，直接调用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/Jobs',
  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. let mode = 'dev'  //通过开发模式变量,动态切换baseUrl
  4. let baseUrl = ''  //预先定义基础域名
  5. if(mode=='dev'){
  6.   baseUrl='https://woniu.h5project.cn' //必须换成自己的LeanCloud域名
  7. }else{
  8.   baseUrl = 'http://vip.com'
  9. }
  11. function fetchData({url,method='get',data={}}={}){
  12.   return new Promise((resolve,reject)=>{
  13.     uni.showLoading({
  14.       title: '拼命加载中...',
  15.     })
  16.     // 方法1
  17.     uni.request({
  18.       url: baseUrl+url,
  19.       method,
  20.       data,
  21.       header:{
  22.         "X-LC-Id": "自己的id",
  23.         "X-LC-Key": "自己的key",
  24.         "Content-Type": "application/json"
  25.       },
  26.       success:(res)=>{
  27.         uni.hideLoading()
  28.         resolve(res)  //成功后，将数据交付给then 
  29.       },
  30.       fail:(err)=>{
  31.         reject(err) //失败后，将数据交付给catch
  32.       }
  33.     })
  34.   })
  35. }
  37. function get(url,data){  //基于fetchData二次封装get
  38.   return fetchData({url,method:'get',data})
  39. }
  41. function post(url,data){
  42.   return fetchData({url,method:'post',data})
  43. }
  45. function del(url,data){ //
  46.   return fetchData({url,method:'delete',data})
  47. }
  49. module.exports = {
  50.   fetchData,
  51.   get,
  52.   post,
  53.   del
  54. }

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

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. })