手把手小程序开发【2-WePY之Hello World】】
手把手小程序开发【2-WePY之Hello World】】
名人之声
我并不同意你的观点，但是我誓死捍卫你说话的权利
——伏尔泰
上一节，由于篇幅冗长，小程序之Hello World也就没来得及尝试一番，这节我们就来实践下吧。
1
wepy 目录结构
安装完wepy项目后，我们还没有说过，wepy在项目创建成功之后，项目中一些文件夹或者文件的主要作用，如下，就是wepy项目创建后完整的目录结构：
目录主要结构说明如下：
- dist:编译后的小程序文件
- src/pages: 用于存放页面文件
- src/components: 用于存放页面所使用的组件文件
- src/mixins: 用于存放项目所使用的一些公关方法文件
2
wepy 之 HelloWorld
在开始之前，记得开启自动编译哦。
如下我是在PHPStom编辑器自带命令行中开启：
wepy build --watch1、创建页面路径
在app.wpy文件中，在config中增加一个新的页面：在编译以后，如下的代码会生成在dist中的app.json文件中。
config = {
pages: [
'pages/index',
'pages/helloworld'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
2、页面模板
更新页面路径之后，由于项目会自动编译的，我们查看小程序会有如下报错：
所以我们在项目中pages文件夹中创建页面文件helloworld.wpy。
所有的页面文件在创建是都可以使用以下模板：
<style lang="less">
//页面所使用的样式，以及引入的样式文件
</style>
<template>
<view>
//页面的结构、节点元素
</view>
</template>
<script>
//页面的逻辑代码部分
import wepy from 'wepy'
export default class HelloWorld extends wepy.page{
components = {}
mixins = []
data = {}
methods = {}
events = {}
onLoad (){
}
}
</script>
从上面的模板可以知道，项目编译时，模板文件会分成3个文件：样式部分会生成后缀为.wxss的样式文件；页面结构部分会生成后缀.wxml文件；逻辑部分会生成后缀为.js的JavaScript文件。
3、创建页面文件helloworld.wpy
helloworld.wpy完整代码如下：
<style lang="less">
</style>
<template>
<view>
<text>{{text}}</text>
</view>
</template>
<script>
import wepy from 'wepy'
export default class HelloWorld extends wepy.page{
components = {}
mixins = []
data = {
text:"Hello World"
}
methods = {}
events = {}
onLoad (){
}
}
</script>4、小程序编译
接下来，我们用微信开发者工具中的编译功能来查看该页面，单机“普通编译”菜单项，在下拉菜单选择“添加编译模式”，如下：
在“启动页面”中，添加 pages/helloworld页面为编译的路径，点击“确定”按钮，小程序会自动重启编译。
此时页面效果如下：
这样我们就通过WePY这种方式就可以完成小程序的开发。
这节就到这里，下一节我们讲讲小程序的前端组件，就像我们学习web开发是，也是要先学HTML 和 CSS，同样道理。