WeTouch 开发文档

WeTouch 开发文档

代码构成

打开 pages/index.ui,代码如下:

<template>
  <ui-page>
      <ui-view class="sliderContent" ui:if="{{isShow}}">
        <ui-slider></ui-slider>      
      </ui-view>
      <ui-view class="buttonContent">
        <ui-button type="primary" bindtap="sliderShow">创建滑动条控件</ui-button>
        <ui-button type="primary" bindtap="navHandle">{{ buttonText }}</ui-button>
      </ui-view>
  </ui-page>
</template>

<script>
export default {
  config: {
    "navigationBarTitleText": "首页",
    "statusBarColor": "black",
    "backgroundColor": "#F4F4F4"
  },
  data () {
    return {
      buttonText: '界面跳转',
      isShow:false
    }
  },
  methods: {
    sliderShow() {
      this.isShow=true
    },
    navHandle () {
      ui.navigateTo({
        url: '/pages/detail'
      })
    }
  },
  mounted() {
    setTimeout(() => { //首屏页面需要在mounted中延时才能调用框架api,其他页面不需要延时
      //关闭app启动图
      ui.closeSplashscreen()

      //其他页面状态栏颜色通过page页面的config设置,但首屏页面第一次进入时是不生效的
      //所以如果希望第一次进入首屏是白色状态栏颜色,在这里修改
      // ui.setStatusBarStyle({
      //    style:'light'
      //  })
    }, 1000);
  }
}

</script>

<style lang="less">
.content{
  .mix-flex-center();
}
.sliderContent{
  padding:50px 50px 0px 50px;
}
.buttonContent{
  padding:50px;
}
</style>

文件分为4个部分:

1、UI 界面组件

从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。

同样道理,在WeTouch中也有同样的角色,其中第一段template部分充当的就是类似 HTML 的角色。

和 HTML 非常相似,有标签、属性等等构成。但是也有很多不一样的地方,我们来一一阐述一下:

  1. 标签名字有点不一样

    往往写 HTML 的时候,经常会用到的标签是 div, p, span,开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件,例如日历、弹窗等等。换个思路,既然大家都需要这些组件,为什么我们不能把这些常用的组件包装起来,大大提高我们的开发效率。 从上边的例子可以看到,WeTouch的 .ui 文件用的标签是 ui-view, ui-button, ui-slider等等,这些标签就是WeTouch给开发者包装好的基本能力,我们还提供了地图、视频、音频等等组件能力 更多详细的组件讲述参考下个章节:WeTouch能力

  2. 多了一些 {{ }} 这样的表达式

    在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS 会记录一些状态到 JS 变量里边,同时通过 DOM API 操控 DOM 的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue,WeTouch底层基于Vue构建),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。

  3. 通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在WeTouch里边,这些控制能力都用 ui: 开头的属性来表达。 更详细内容可以参考文档的“框架>>逻辑层和视图层”

2、config页面配置

除了全局的app.ui中的config配置,每个页面都有自己的config。

例如如果你应用风格是蓝色调,那么你可以在 app.ui的config 里边声明顶部颜色是蓝色即可。实际情况可能不是这样,可能每个页面都有不一样的色调来区分不同功能模块,因此我们为每个页面提供了config,让开发者可以独立定义每个页面的一些属性。详见文档的“框架>>配置>>page配置”;

3、JS 交互逻辑

一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在WeTouch里,我们就通过编写 JS 脚本文件来处理用户的操作。基本逻辑结构如下:

export default {
 config: {
     //页面配置
  },
  data () {
    return {
      //定义常量
    }
  },
  methods: {
    //定义方法
  },
  mounted () {
    //初始化函数
  }
}

在data ()中定义变量,在methods中定义方法。在方法中通过this.变量名来使用,也可以使用this.方法名来使用某个方法。

mounted()是初始化函数。

WeTouch提供了丰富的 API,利用这些 API 可以很方便的调起App提供的能力,例如扫描二维码、拍照等。更多 API 可以参考文档的API栏目。

注意示例中this的用法,当使用了定时器或者在某个方法的回调函数中使用变量或方法时,this的作用域已经消失了,将无法通过this.xxx获取。这时应该这在之前将this存起来。例如

var that=this
setTimeout(function(){
  that.isShow = true
},2000)

或者使用es6的语法(箭头函数)

setTimeout(() => {
  this.isShow = true
}, 2000);

4、LESS 样式

Less在 CSS 的语法基础之上引入了很多新的特性,并不是WeTouch独有的,你可以在网上找到关于Less的很多教程。

为了更适合开发移动应用,WeTouch中的Less除了具有Less原本的所有功能外,还扩充了其他功能:

  1. 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。我们提供了新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给WeTouch底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。

  2. 提供了全局的样式和局部样式。app.ui中的样式是全局样式,会作用于工程的所有页面,每个页面文件中的样式是局部样式,仅对当前页面生效。

    详细内容可以参考文档的“框架>>样式>>Less文件”