初识wepy，开始使用wepy

wepy 小程序的框架，语法和vue很像。

app.wpy 小程序入口 页面配置注册

<style lang="less">
</style>

<script>
import wepy from 'wepy'

export default class extends wepy.app {
  config = {
    pages: [
      'pages/index'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    }
  }

  onLaunch() {
    console.log('on launch')
  }
}
</script>

index.wpy

<style lang="less">
</style>
<template>
  <view class="container">
    Hello world
  </view>
</template>

<script>
  import wepy from 'wepy'

  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: 'test'
    }
    onLoad() {
      console.log('onLoad')
    }
  }
</script>

快速使用:

npm install @wepy/cli -g 
wepy init  test_wepy 
npm install 
npm run dev 

运行之后，项目就会生成一个dist目录

image.png

用vscode 打开项目，用微信开发者打开项目中的dist文件夹即可，微信开发者工具中不能识别wpy，再dist文件夹中，会把wpy 文件分拆成wxml、js 、wxss、json 文件

image.png
image.png

这样就可以使用了。具体api看官网即可

注意

1.Wepy中的methods的使用

• methods中只能声明bind，catch事件，不能自定义方法
• 自定义的方法和methods平级

methods={
//bind绑定的跳转页面事件
  goto(){

  }
},
getRecommendData(){

}

.wepyignore文件种写npm run dev 编译到dist文件种过滤得文件

image.png