1.node的安装

推荐左边的安装方式，因为右边的最新版本在有些电脑上运行不稳定。

下载到本地一直继续就好。

安装好后就可以直接在命令行运行查看结果

2.快速入门

WePY是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，无极，异步功能的引入都是为了能让开发小程序项目变得更加简单，高效。

同时WePY也是一款成长中的框架，大量吸收借鉴了一些优化前端工具以及框架的设计理念和思想。如果WePY有不足地方，或者你有更好的想法，欢迎提交发行或者PR。

安装(更新)wepy命令行工具。

npm install wepy-cli -g

在开发目录生成开发DEMO。

wepy new demo

切换至项目目录。

cd demo

打开目录

窗口

dir

项目目录结构

├── dist 微信开发者工具指定的目录

├── node_modules

├── src 代码编写的目录

| ├── components 组件文件夹(非完整页面)

| | ├── com_a.wpy 可复用组件 a

| | └── com_b.wpy 可复用组件 b

| ├── pages 页面文件夹(完整页面)

| | ├── index.wpy 页面 index

| | └── page.wpy 页面 page

| └── app.wpy 小程序配置项(全局样式配置、声明钩子等)

└── package.json package 配置

开发使用说明

使用微信开发者工具新建项目，开发本地选择dist目录。

微信开发者工具- >项目 - >关闭ES6转ES5。

本地项目根目录运行wepy build --watch，开启实时编译。

代码高亮

VScode下代码高亮

先下载

配置展示进入设置

在settings.js文件下添加如下代码

"files.associations": {

"*.vue": "vue",

"*.wpy": "vue",

"*.wxml": "html",

"*.wxss": "css"

},

"emmet.syntaxProfiles": {

"vue-html": "html",

"vue": "html"

}

后就保存在可以中页面看待.wpy后缀代码高亮

Sublime下载码高亮

文件后缀为.wpy，可共用vue高亮，但需要手动安装。

打开Sublime-> Preferences-> Browse Packages ..进入用户包文件夹。

在此文件夹下打开cmd，运行git clone git@github.com：vuejs / VUE -句法- highlight.git，无GIT用户可以直接下载拉链包解压至当前文件夹。

关闭.wpy文件重新打开即可高亮。

WebStorm下代码高亮

打开首选项，搜索插件，搜索Vue.js插件并安装。

打开首选项，搜索文件类型，找到Vue.js模板，在注册模式添加* .wpy，即可高亮。

Atom下代码高亮

在Atom里先安装vue的语法高亮 - language-vue，如果装过了就忽略这一步。

打开Atom - >配置菜单。在core键下添加：

customFileTypes:

"text.html.vue": [

"wpy"

]

3，代码规范

变量与方法使用尽量使用驼峰式命名，避免使用$开头。

入口，页面，组件的命名后缀为.wpy。外链的文件可以是其它后缀。

使用ES6语法开发。框架在ES6下开发，因此也需要使用ES6开发小程序，ES6中有大量的语法糖可以让我们的代码更加简洁高效。

甚至可以直接使用异步/等待等新特性进行开发。

事件绑定语法使用优化语法代替：原bindtap =“click”替换为@ tap =“click”，原catchtap =“click”替换为@ tap.stop =“click”。更多@符用法

事件传参使用优化后语法代替：原bindtap =“click”data-index = {{index}}替换为@ tap =“click({{index}})”。

自定义组件命名应避开微信原生组件以及功能标签。不可以使用输入，按钮，查看，重复等命名自定义组件。

4.优点

支持组件化开发。

支持加载外部NPM包。

单文件模式，使得目录结构更加清晰。

默认使用巴别编译，支持ES6 / 7的一些新特性。

针对原生API进行优化。

5.wpy文件说明

一个.wpy文件分为三个部分：

1.样式对应原有wxss。2.

模板对应原有wxml。3.

代码对应原有js。

其中入口文件app.wpy不需要模板，所以编译时会被忽略。这三个标签都支持郎和SRC属性，郎决定了其代码编译过程，SRC决定是否外联代码，存在SRC属性且有效时，忽略内联代码，示例如下：

标签对应lang值如下表所示：

标签郎默认值郎支持值

样式

CSS

CSS，少，上海社会科学院，手写笔

模板

wxml

wxml，XML，哈巴狗(原玉)

脚本

巴布尔

巴布尔，打字稿

演示

index.wpy

display:flex;

flex-direction:column;

align-items:center;

}

.userinfo-avatar {

width:80rpx;

height:80rpx;

border-radius:50%;

}

.userinfo-nickname {

color:#aaa;

}

{{ userInfo.nickName }}

{{ datas }}'111'

登录

用户信息

测试数据绑定

{{normalTitle}}

{{setTimeoutTitle}}

{{mixin}}

{{mynum}}

{{now}}

+

其它测试

第三方组件

组件通信

混合TAP事件

测试并发网络请求

返回结果:

{{netrst}}