wepy体验 之 环境搭建

wepy是由微信官方研发的一个类vue小程序框架,语法基本与vue相同。它有什么优点,大家可以到它的官网看微信是怎么吹的。

至于缺点,相信只有使用过它的朋友们才有发言权,作者也是wepy小白。在社区看到的讨论,主要有三个缺点:

  1. 畸形的循环限制(当然wepy官方也给出了相应的方案,但仍然让大家无法接受)
  2. 类vue,而不是单纯的vue,让强迫症的朋友们很难受,当然一定程度上也增加了学习成本。这大概也是为什么不少人投身美团的mpvue的原因之一
  3. 执行效率问题,看到一些人反馈wepy生成的项目出现卡顿甚至触发了系统的内存警告导致小程序被强制关闭

stpe 0: 安装npm

在使用wepy之前,首先要有npmnpm是Nodejs下的包管理器,大家可以直接到Node.js官网下载。
(成功安装完Node.js后就可以拥有npm,具体步骤本文不进行赘述)

step 1: 安装wepy

拥有npm之后,使用下面的命令安装wepy

npm install wepy-cli -g

安装成功后,在命令行下确认:

PS E:\prj\tmp> wepy --version
1.7.3

看到版本号证明已经安装成功了。

step 2: 创建项目模板

安装完成之后,就可以使用wepy来创建项目了。1.7.0之前的版本创建的方式如下:

wepy new myproject

1.7.0之后的版本的创建方式如下:

wepy init <template_name> [project_name]

其中 template_name是必选的,project_name是可选的,可以在后面进行初始化配置的时候设置。
我们使用标准模板

wepy init standard project_name

只需要把project_name替换成你自己的项目名称即可。这里我们创建的是一个标准的wepy项目模板,更多创建方式及模板的获取方式,参见wepy-cli的文档

如果想要使用其它模板,可以通过wepy list查看其它模板,再根据需要进行选择。

PS E:\prj\tmp\my_prj> wepy list

  Available official templates:

     e.g., wepy init empty myproject

  +--------------------+------------------------------------------------------------+
  |        Name        |                        Description                         |
  +--------------------+------------------------------------------------------------+
  |       empty        |  空模板                                                    |
  +--------------------+------------------------------------------------------------+
  |      standard      |  模认模板,开启了promise、Async Function等                 |
  +--------------------+------------------------------------------------------------+

  Available github projects:

     e.g., wepy init wepyjs/wepy-wechat-demo myproject

  +------------------------------+--------+------------------------------------------------------------+-------------------------+
  |          Repository          | Stars  |                        Description                         |      Last Updated       |
  +------------------------------+--------+------------------------------------------------------------+-------------------------+
  |   wepyjs/wepy-wechat-demo    |  415   |  wepy仿微信聊天界面                                        |      2 months ago       |
  +------------------------------+--------+------------------------------------------------------------+-------------------------+
  |    wepyjs/wepy-weui-demo     |  321   |  WeUI 在 WePY                                              |       1 year ago        |
  |                              |        |  中的使用示例,同一份代码可以运行在小程序上和Web上         |                         |
  +------------------------------+--------+------------------------------------------------------------+-------------------------+
  |    brucx/wepy-zanui-demo     |  215   |  基于zanui-weapp移植的一套wepy界面框架                     |      8 months ago       |
  +------------------------------+--------+------------------------------------------------------------+-------------------------+

这里我创建了一个,名为 my_prj的项目

PS E:\prj\tmp> wepy init standard my_prj
? Project name my_pry
? AppId touristappid
? Project description A WePY project
? Author 1lin24 <1lin24@****.com>
? Use ESLint to lint your code? Yes
? Use Redux in your project? Yes
? Use web transform feature in your project? Yes

   wepy-cli · Generated "my_prj".

看到wepy-cli · Generated "my_prj".说明你已经成功了。

但在运行命令的时候,会出现好几个问号开头的交互式命令,让用户对基本进行基本配置。

这里我们只需要一路按Enter就可以了,这些配置可以在项目内对应的配置文件里面进行修改。

我们简单说一下每个配置的作用:

  • ? Project name my_pry 项目名称(显示在微信小程序开发工具上面的)
  • ? AppId touristappid 我们是demo,直接使用 游客id 即可,正式的项目需要输入微信小程序对应的appid,
  • ? Project description A WePY project 这里你可以输入关于项目的简介
  • ? Author 1lin24 <1lin24@****.com> 这里写的是项目的信息
  • ? Use ESLint to lint your code? Yes 是否将ESLit加入到项目中,ESLit是一个代码格式化检查工具,用于规范代码的书写
  • ? Use Redux in your project? Yes 是否将Redux加入到项目中,Redux是一个系统状态管理工具
  • ? Use web transform feature in your project? Yes这个我就不知道,谁知道评论指点一下,谢谢了

step 4: 安装依赖包

创建好项目模板之后,会在当前目录下生成一个与项目名称一致的文件夹

PS E:\prj\tmp> ls


    目录: E:\prj\tmp


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----         2019/1/7     11:30                my_prj
-a----         2019/1/7     11:07             27 package-lock.json

进入到文件夹内:

cd my_prj

查看目录结构

PS E:\prj\tmp\my_prj> ls


    目录: E:\prj\tmp\my_prj


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----         2019/1/7     11:51                node_modules
d-----         2019/1/7     11:30                src
-a----         2019/1/7     11:30            147 .editorconfig
-a----         2019/1/7     11:30              7 .eslintignore
-a----         2019/1/7     11:30            719 .eslintrc.js
-a----         2019/1/7     11:30             28 .gitignore
-a----         2019/1/7     11:30             26 .prettierrc
-a----         2019/1/7     11:30           1714 .wepycache
-a----         2019/1/7     11:30             46 .wepyignore
-a----         2019/1/7     11:51         104394 package-lock.json
-a----         2019/1/7     11:30           1520 package.json
-a----         2019/1/7     11:30            254 project.config.json
-a----         2019/1/7     11:30           1400 wepy.config.js

这里面有两个比较重要的:

  1. src 这个文件是我们使用wepy开发项目的源码文件,日后大量的工作都会在这个目录里面
  2. package.json这个是项目依赖包的信息

安装项目相关的依赖

npm install

这个命令的作用是读取项目根目录下的package.json文件,安装这个文件里面的依赖包。后续如果需要更多的依赖,你最好使用
npm install package_name --save 进行安装,这样在安装依赖后,会把依赖对应的信息加入到package.json中,方便项目协作。

stpe 4: 编译

现在我们假设已经完成一阶段的开发工作,那么怎么把wepy项目的代码转换成微信小程序开发工具可以跑起来的代码呢?

使用下面的命令

wepy build

运行后,你大概率会看到以下信息:


image.png

如此完美,一个错误都没有报,舒服。

这时候我们发现项目目录下多了一个dist文件:

PS E:\prj\tmp\my_prj> ls


    目录: E:\prj\tmp\my_prj


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----         2019/1/7     11:59                dist
d-----         2019/1/7     11:51                node_modules
d-----         2019/1/7     11:30                src
-a----         2019/1/7     11:30            147 .editorconfig
-a----         2019/1/7     11:30              7 .eslintignore
-a----         2019/1/7     11:30            719 .eslintrc.js
-a----         2019/1/7     11:30             28 .gitignore
-a----         2019/1/7     11:30             26 .prettierrc
-a----         2019/1/7     11:59           6631 .wepycache
-a----         2019/1/7     11:30             46 .wepyignore
-a----         2019/1/7     11:51         104394 package-lock.json
-a----         2019/1/7     11:30           1520 package.json
-a----         2019/1/7     11:30            254 project.config.json
-a----         2019/1/7     11:30           1400 wepy.config.js

这个文件就是我们编译的产物,接下来我们要使用微信小程序开发工具来运行这个目录下面的内容。

step 5: 运行

打开微信小程序开发工具

image.png

选择项目的dist文件夹为项目目录,填写好AppId项目名称,点击确定。安静地等待几秒。

发现出现如下错误


意料之内的错误.png

是因为babel编辑器不支付ES5, 应该将微信开发工具的ES5选项关闭。具体操作如下:
微信开发工具 -> 设置 -> 项目设置 -> 不钩选 ES6转ES5

step 6: 实时编译

成功运行之后,我们发现在调试过程中都要重新运行wepy build,wepy给出的解决方案是,使用wepy build --watch 这个命令会监测源码文件的变动,当源文件发生变动之后会自动重新进行编译。

更多wepy知识,详见官方文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,110评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,443评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,474评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,881评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,902评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,698评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,418评论 3 419
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,332评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,796评论 1 316
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,968评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,110评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,792评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,455评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,003评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,130评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,348评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,047评论 2 355

推荐阅读更多精彩内容