wepy框架搭建小程序

我们都知道,小程序对组件化开发并不友好,腾讯自己的 团队就搞出了一个wepy框架。我们先看下wepy的介绍;

既然说自己是最受欢迎的小程序 框架,我们就来安装使用一下吧;

步骤 :

1:npm install wepy-cli -d(推荐cnpm。淘宝镜像比较快)

2. wepy new myproject(你会发现这句代码会实现不了你项目的 创建)。因为已经改成了:

     wpey init standard myproject;

3.cd myproject进去项目文件夹

4.cnpm install 安装  依赖

5.wepy build --watch开启实时编译;

然后 就可以看下代码结构 了。

├── dist                   小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
├── node_modules           
├── src                    代码编写的目录(该目录为使用WePY后的开发目录)
|   ├── components         WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
|   |   ├── com_a.wpy      可复用的WePY组件a
|   |   └── com_b.wpy      可复用的WePY组件b
|   ├── pages              WePY页面目录(属于完整页面)
|   |   ├── index.wpy      index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
|   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件)
|   └── app.wpy            小程序配置项(全局数据、样式、声明钩子等;经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json           项目的package配置

可能你看不到components文件,最近应该是改了。

用微信开发者工具,打开项目,就可以看到运行的初始结果了。在微信开发者工具中是无法修改wpy文件的

由于vscode并没有支持wpy文件的代码高亮显示,你需要先在扩展中下载一个vuter-wepy的插件,显示代码高亮,有利于开发。

我们可以清楚的看到:在index.wpy中有:style ;template;script三个标签。是不是和vue的开发风格很像;

<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>

然而,我们在微信开发者工具中看到的目录结构是这样的:

我们不难发现:我们在template中写的结构,对应了index.wxml里面的内容;在style里面写的内容对应到了index.wxss里面;

script里面的内容对应了index.json和index.js。嗯,就这样

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值