wepy2 开发小程序之Helloworld

近期在做一个项目，开发小程序的网上店铺；
之前用原生的小程序开发确实有不方便的地方，经过调研之后，还是找个开发框架吧，其实就3个

wepy 腾讯官方出品，社区也不是很活跃；
mpvue 美团出品，好像不维护了，社区反馈不好；
uni-app 最近很火，一次开发，到处运行；

选型过程其实很痛苦，uni-app其实挺好，开发一个程序，可以打包成各种版本，包括原生APP，真是强大；但是一想项目需求，真正需要那么多支持么？答案是No，支持这么多的版本，感觉总会比较浪费；还是回归小程序开发吧；
最终选型wepy+vant-weapp（有赞团队的小程序UI），祝我好运！！

网上找了很多wepy的教程，包括官方的，大部分都是基于wepy1.X的;
现在官方版本在2.X,还看1.X的demo感觉真别扭；
对于初学者来说，总是感觉有跳跃的地方；
所以，自己写个helloworld吧；

废话说了不少，进入正题吧

安装wepy cli工具

$ npm install @wepy/cli -g # 全局安装 WePY CLI 工具

什么是CLI，简单理解：一个工具，帮我们编译，打包项目等；wepy命令就是这里的

WePY 提供了一个为 WePY 量身定制的 cli 工具 @wepy/cli, 可以对 WePY 项目进行初始化和编译等等
参考官方说明
使用 standard 模板初始化项目到 myfolder 目录下

init

$ wepy init ${template-name} myfolder
会询问几个配置项，一路回车就好

使用 templates-name 模板初始化项目到 myfolder 目录下
templates-name 可以有wepy-templates,我们用empty $ wepy init empty wepy-mall

empty模板在哪？
wepy-templates 2.0.x 分支的 empty目录里啊！！！

生成的结果为

init目录结构

npm install

$ cd wepy-mall
$ npm install 或者 cnpm install #根据当前目录种的package.json 安装相关的包到该目录的node_modules中，这是nodejs中npm的功能

编译$ wepy build
把wepy开发的代码wpy文件编译成小程序认识的文件，如下图

编译过程

使用 wepy build 命令可以对项目进行打包编译，打包编译时依赖于项目根目录的 wepy.config.js 编译配置文件，开发者可以通过修改 wepy.config.js 来实现自己的个性化编译需求。wepy.config.js详解，参考官方文档-https://wepyjs.github.io/wepy-docs/1.x/#/?id=wepyconfigjs%e9%85%8d%e7%bd%ae%e6%96%87%e4%bb%b6%e8%af%b4%e6%98%8e
编译时，可以通过 -l 或者 --log 参数来指定输出的日志级别, 其中，可用的日志级别有：silly, verbose, info, warn, error, silent, trace。只有日志级别为 trace 时才可以看到错误堆栈。如：
wepy build -l trace
官方文档是让运行npm run dev,其实一样，我们打开cli init 生成的package.json，可以看到scripts项中dev项是wepy build --watch,表示自动监听这个目录，代码有变化就自动编译；我喜欢手动编译。看你需要选择--watch参数；

{
  "name": "wepy-mall",
  "version": "0.0.1",
  "description": "A WePY project",
  "main": "dist/app.js",
  "scripts": {
    "dev": "wepy build --watch",
    "build": "cross-env NODE_ENV=production wepy build --no-cache",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "fengjian <ifengjian@qq.com>",
  "license": "MIT",
  "dependencies": {
    "@wepy/core": "^2.0.0-alpha.16"
  },
  "devDependencies": {
    "@wepy/compiler-babel": "^2.0.5",
    "@wepy/compiler-less": "^2.0.0",
    "less": "^3.8.1",
    "babel-eslint": "^7.2.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-export-extensions": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.3"
  }
}

编译完成之后，我们打开工程目录，发现

编译之后目录结构

多了weapp目录，我们打开可以看到里边是熟悉的js/json/wxml/wxss。这就是编译之后生成的原生小程序了；我们用微信开发者工具打开weapp目录；

helloworld

Helloworld终于现身