快应用开发教程未发现手机设备LESS

1 安装NODEJS

https://doc.quickapp.cn/tutorial/overview/use-command.html

选择10.0版本以上的

https://nodejs.org/en/

2 下载IDE

https://www.quickapp.cn/docCenter/post/97

https://statres.quickapp.cn/quickapp/ide/quickapp-ide.exe

4 手机通过USB数据线连接电脑

设置-》开发者-》USB调试开启

打开IDE，会自动安装手机调试应用（大概会安装3-5个吧）【未发现手机设备】

3 下载相关组件

打开IDE，底部调试栏的‘终端’标签，如安装LESS插件

npm install less less-loader --save-dev

 

INDEX.UX

<template>
  <!-- template里只能有一个根节点 -->
  <div class="demo-page">
    <text class="title">欢迎打开{{title}}</text>
    <!-- 点击跳转详情页 -->
    <input class="btn" type="button" value="跳转到详情页111" onclick="routeDetail" />

    <input class="txt" type="text" value="{{helloworld}}" />

  </div>
</template>

<script>
import router from '@system.router';
import fetch from '@system.fetch';

export default {
  // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
  private: {
    title: '示例页面',
    helloworld:'helloworld',
    lcList: []
  },
onInit () {
  this.$page.setTitleBar({ text: '生命周期' })
  this.lcList.push('onInit')
  console.info('触发：onInit')
  console.info('执行：获取ViewModel的lcList属性：'+this.lcList)  

var aa      = '1'
var thisObj = this;

  fetch.fetch({
      url: 'https://www.baidu.com',
      success: function (response) {
        console.log('1111111111111111111111')
        console.log(this)
        console.log(aa)
        thisObj.helloworld = 'fetch修改了TITLE'
      },
      fail: function (err, code) {
        console.log('failfailfailfailfail::'+code)
        console.log(err)
      }
  })

  this.$page.setTitleBar({ text: thisObj.helloworld})

},


  routeDetail () {
    // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
    router.push ({
      uri: '/DemoDetail'
    })
  }




}



</script>

<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 40px;
    text-align: center;
  }

  .btn {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }

   .txt {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border:1px solid #000000;
  }
</style>

 

 

detail.ux

<template>
  <div class="tutorial-page">
    <!-- 灵活使用tabs组件 -->
    <div class="flexible-tabs">
      <!-- 自定义tab-bar组件 -->
      <div class="flexible-tabbar">
        <image src="./img/user.png" onclick="routePage('personal')"></image>
        <text class="{{currentIndex === 0 ? 'active' : ''}}" onclick="clickTabBar(0)">one</text>
        <text class="{{currentIndex === 1 ?  'active' : ''}}" onclick="clickTabBar(1)">two</text>
        <text class="{{currentIndex === 2 ? 'active' : ''}}" onclick="clickTabBar(2)">three</text>
        <image src="./img/search.png" onclick="routePage('search')"></image>
      </div>
      <!-- 监听change事件，触发时动态修改tabs的index属性 -->
      <tabs onchange="changeTabactive" index="{{currentIndex}}">
        <tab-content class="flexible-tab-content"> 
          <div class="tab-content-section">
            <input type="number" class="inputdefault" value="123" />
          </div>
          <div class="tab-content-section">
            <input type="text" class="inputdefault" value="test" />
          </div>
          <div class="tab-content-section">
            <input type="date" class="inputdefault" placeholder="请输入日期" />
          </div>
        </tab-content>
      </tabs>
    </div>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex: 1;
    .flexible-tabs {
      flex: 1;
      flex-direction: column;
      .flexible-tabbar {
        height: 100px;
        padding: 0 30px;
        background-color: #f1f1f1;
        align-items: center;
        text {
          flex-grow: 1;
          height: 100px;
          margin: 0 30px;
          text-align: center;
          border: 0px solid #f1f1f1;
          border-bottom-width: 5px;
        }
        image {
          height: 50px;
          width: 50px;
          resize-mode: contain;
        }
        .active {
          color: #0faeff;
          border-bottom-color: #0faeff;
        }
      }
      .flexible-tab-content {
        flex: 1;
        .tab-content-section {
          flex: 1;
          background-color: #ffffff;
          justify-content: center;         
        }
      }
    }
  }
  
          .inputdefault{
    width: 550px;
    height: 86px;
    margin-top: 75px;
    background-color: #fcfcfc;
    border:1px solid#0faeff;
    font-size: 30px;
          } 
</style>

<script>
  import router from '@system.router'

  export default {
    private: {
      currentIndex: 0
    },
    onInit () {
      this.$page.setTitleBar({ text: 'tabs仅包含tab-content' })
    },
    changeTabactive (evt) {
      this.currentIndex = evt.index
    },
    clickTabBar (index) {
      this.currentIndex = index
    },
    routePage (param) {
      router.push({
        uri: 'ComponentTabs/complex/' + param
      })
    }
  }
</script>