手把手小程序开发【2-WePY之Hello World】】

发布时间：2019-09-29 06:40:49 来源：网友自行发布(如侵权请联系本站立刻删除）浏览：【大】【中】【小】

点击上方蓝字关注Lemon黄名人之声我并不同意你的观点，但是我誓死捍卫你说话的权利——伏尔泰上一节，由于篇幅冗长，小程序之Hello World也就没来得及尝试一番，这节我们就来实践下吧。1wepy

点击上方蓝字关注Lemon黄

名人之声

我并不同意你的观点，但是我誓死捍卫你说话的权利

——伏尔泰

上一节，由于篇幅冗长，小程序之Hello World也就没来得及尝试一番，这节我们就来实践下吧。

wepy 目录结构

安装完wepy项目后，我们还没有说过，wepy在项目创建成功之后，项目中一些文件夹或者文件的主要作用，如下，就是wepy项目创建后完整的目录结构：

目录主要结构说明如下：

dist:编译后的小程序文件
src/pages: 用于存放页面文件
src/components: 用于存放页面所使用的组件文件
src/mixins:用于存放项目所使用的一些公关方法文件

wepy 之HelloWorld

在开始之前，记得开启自动编译哦。

如下我是在PHPStom编辑器自带命令行中开启：

wepy build --watch

1、创建页面路径

在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完整代码如下：

<stylelang="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>