31选7开奖结果查询 www.vk1c.com.cn 31选7开奖结果查询 > 上网技巧 > 电脑小技巧 > 初识微信小程序开发框架WePy

初识微信小程序开发框架WePy

时间:2018-06-13 14:12 作者:QQ地带 我要评论

基于组件化的小程框架,据说完美解决组件隔离,组件嵌套,组件通信等问题,集合了样式编译器:Less/Sass/Styus,模板编译器:wx-ml/Pug,代码编译器:Babel/Typescript,可以看作一个模板解析引擎,将项目 src 目录中的 wpy 拆解为小程序代码发布在 dist 目录。 写代码只需要在src的wpy文件中,一个 wpy 可以包含小程序的四种文件内容,目录结构就简化了 wepy 编译项目时会对 wpy 进行拆解编译。通过 polyfill 让小程序完美支持 Promise,解决回调烦恼,异步代码不再需要嵌套N层了。ES2015支持, 可使用 Generator Fu-nction / Class / Async Function 等特性,大大提升开发效率。项目依赖管理通过 Node 自带的 NPM 实现,因此先要确保安装 Node 和 npm,然后安装 WePY CLI 并建立 demo 工程:
 
npm install -g wepy-cli
wepy init standard my-project   
WePy 使用:
 
init [options] <template-name> [project-name]  generate a new project from a template
build [options]                                build your project
list [options]                                 list available official templates
upgrade [options]                              upgrade to the latest version
 
Options:
 
-c --clone  use git clone
--offline   use cached template
-h, --help  output usage information    
 
Example:
 
    # create a new project with an official template
    $ wepy init standard my-project
 
    # create a new project straight from a github template
    $ wepy init username/repo my-project
 
Usage: build [options] build your project
 
  Options:
 
    -f, --file <file>      待编译wpy文件
    -s, --source <source>  源码目录
    -t, --target <target>  生成代码目录
    -o, --output <type>    编译类型:web,weapp。默认为weapp
    -p, --platform <type>  编译平台:browser, wechat,qq。默认为browser
    -w, --watch            监听文件改动
    --no-cache             对于引用到的文件,即使无改动也会再次编译
    -h, --help             output usage information
 
Usage: upgrade [options]  upgrade to the latest version
 
  Options:
 
    --cli   upgrade wepy-cli
    --wepy  upgrade wepy
    -h, --help  output usage information
建立工程后,进入工程目录,编译工程生成小程序代码文件:
 
wepy new myproject
# 1.7.0之后的版本使用 wepy init standard myproject 初始化项目,使用 wepy list 查看项目模板
切换至项目目录
cd myproject
安装依赖
npm  install
开启实时编译
wepy build --watch
watch and auto compiles
如果缺少依赖项,则会提示错误:
 
[Error] ReferenceError: Unknown plugin "transform-class-properties" specified in "base"
安装手动安装依赖插件 //babeljs.io/docs/plugins/:
 
npm install --save-dev babel-plugin-transform-class-properties
npm install --save wepy-com-toast
 
WePY项目的目录结构
├── 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目录生成小程序页面文件)
|   |   └── other.wpy      other页面(经build后,会在dist目录下的pages目录生成小程序页面文件)
|   └── app.wpy            小程序配置项(经build后,会在dist目录下生成app.js、app.json和app.wxss文件)
└── package.json           项目的package配置

标签: 微信
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告

507| 515| 222| 157| 841| 479| 234| 92| 566| 189|