我们都知道,小程序对组件化开发并不友好,腾讯自己的 团队就搞出了一个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。嗯,就这样