标签的改动
  • div 改成 view
  • span、font 改成 text
  • a 改成 navigator
  • img 改成 image
  • input 还在，但type属性改成了confirmtype
  • form、button、checkbox、radio、label、textarea、canvas、video这些还在。
  • select 改成 picker
  • iframe 改成 web-view
  • ul、li没有了，都用view替代

  • audio 不再推荐使用。音频api文档 https://uniapp.dcloud.io/component/audio.html

    路由配置、跳转

    uni的路由全部是在pages.json中配置的

    1. "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    2.   {
    3.       "path": "pages/home/index", //文件目录地址
    4.       "style": {
    5.           "navigationBarTitleText": "首页"
    6.       }
    7.   }....
    1. uni.navigateTo({ //路由跳转
    2.   url: '/pages/home/index'
    3. });

    关于适配

  • 蓝湖切到web平台 宽度375

  • 项目里直接用px就行

    下拉刷新、上拉加载

  • 配置enablePullDownRefresh、onReachBottomDistance

  • 官网 https://uniapp.dcloud.io/tutorial/page.html#lifecycle
  • 同时pages.json中对应路由里也可以配置触发距离
    1. {
    2.   "path": "pages/messageNotification/index",
    3.   "style": {
    4.       "navigationBarTitleText": "消息通知",
    5.       "enablePullDownRefresh": true,//开启下拉刷新
    6.       "onReachBottomDistance": 150 //距离
    7.   }
    8. },
    然后在页面methods中定义这两个方法即可
    1. onPullDownRefresh(){
    2.   console.log('下拉刷新')
    3. uni.stopPullDownRefresh() //数据处理完成后记得关闭loading
    4. },
    5. onReachBottom() {
    6.   console.log('上拉加载')
    7. },
    动态修改页面title
    1. uni.setNavigationBarTitle({
    2.   title: 'xx'
    3. });
    关于兼容微信小程序 :style 使用变量问题
    加上[ ]就行
    1. :style="cellStyle" //无效
    2. :style="[cellStyle]"
    关于子组件onLoad不触发
    onLoad改成mounted
    globalData、iphonex及以上机型
    在app.vue文件中定义
    1. globalData: {
    2.   isIPhoneX: false //是否为iphonex及以上机型
    3. },
    4. onLaunch: function() {
    5.   console.log('App Launch')
    6.   let _this = this;
    7.   uni.getSystemInfo({
    8.       success: res => {
    9.           // console.log('res',res)
    10.           if (res.safeArea.top > 20) { //x及以上的异形屏top为44，非异形屏为20
    11.               _this.globalData.isIPhoneX = true
    12.           }
    13.       },
    14.       fail(err) {
    15.           console.error(err);
    16.       }
    17.   })
    18. }
    获取
    1. getApp().globalData
    跨域处理
    manifest.json找到h5
    1. "h5" : {
    2. "devServer" : {
    3.   "disableHostCheck" : true,
    4.   "proxy" : {
    5.     "/lsm-service" : {
    6.       "target" : "http://...",
    7.       "secure" : false,
    8.       "changeOrigin" : true
    9.     },
    10.     "/lsm-yhzx" : {
    11.       "target" : "http://...",
    12.       "secure" : false,
    13.       "changeOrigin" : true
    14.     }
    15.   }
    16. }
    17. },