WePY框架开发规范-自定义默认首页

1.WePY创建home首页

在src -> pages目录下,创建home.wpy页面,并创建页面的基本代码结构,示例代码如下:

<style lang="less">
@color: #4D926F;
  .num {
  color: @color;
  }
</style>
<template>
  <div class="container">
    <div class="num" @tap="num++">
      {{num}}
    </div>
    <custom-component></custom-component>
    <vendor-component></vendor-component>
    <div>{{text}}</div>
    <input v-model="text"/>
  </div>
</template>
<config>
{
  usingComponents: {
  }
}
</config>

<script>
  import wepy from '@wepy/core';

  wepy.page({
    data: {
      num: 0,
      text: 'Hello xinbiancheng.cn',
    },
  });
</script>

2.WePY设置默认首页

如果要把刚创建的home.wpy设置为默认首页,需要打开src -> app.wpy入口文件,将home.wpy的页面
路径,注册到config -> pages数组中,并调整为数组的第一项即可, 示例代码如下:

<config>
{
    pages: [
      'pages/home', //放在数组的第1个位置就是默认首页。
      'pages/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
}
</config>

3. WePY创建.wpy页面的注意事项

在创建.wpy页面的时候,要注意以下事项:
①每个页面的script标签中,必须导入wepy模块,并创建继承自wepy.page的页面类;否则会报错。
②每个页面的路径,必须记录到app.wpy的config -> pages数组中。
③页面路径记录完毕之后,必须再回到页面文件中,摁下Ctrl + S快捷键重新编译生成页面,否则会报错。

4. eslint 格式化代码注意事项:

eslint 格式化时如何自动去掉分号;

首先找到 .prettierrc 文件 

{
"singleQuote": true,
"semi": false //Eslint 格式化时可以自动去掉分号;
}