webstorm搭建wepy框架开发微信小程序经验

笔者不太习惯使用微信提供的微信小程序开发工具，所以找了一些教程及资料，希望通过webstorm开发微信小程序。在环境配置过程中碰到也解决了一些问题，下面记录一下经验，以防以后忘记。

1.下载webstorm及node.js

这部分内容参照官网的配置过程配置即可。

2.安装wepy框架

运行命令npm install wepy-cli -g可以全局安装wepy。

3.生成基于wepy框架的demo项目

运行命令wepy new myproject 生成demo（其中myproject为要创建的demo项目的名称，可自定义，本文以myproject为例）

1.7.0之后的版本使用wepy init standard myproject初始化项目，使用wepy list查看项目模板（推荐通过wepy init standard myproject新建项目）

4.安装demo项目的依赖并运行

运行命令cd myproject切换到项目目录；
运行命令npm install安装依赖；
运行命令wepy build --watch开启实时编译；
此时项目目录中会生成dist文件夹，此文件夹即为编译出来的微信小程序项目。

5.通过微信小程序开发工具查看项目效果

打开微信小程序开发工具，依次点击项目->新建项目->选择项目目录（即dist文件夹）->设置appID及项目名称，此时就可看到demo效果。

6.设置微信小程序中的项目信息

找到微信小程序的“项目模块”，关闭ES6转ES5、上传代码时样式自动补全、上传代码时自动压缩混淆，由于是开发阶段，为了方便调试要勾选不校验合法域名...。

7.在webstorm中为.wpy文件添加高亮

用webstorm打开myproject，打开webstorm的settings，找到plugins，搜索vue.js并安装。

打开settings，找到editor，找到file types，找到Vue.js Template，在Registered Patterns添加*.wpy。

8.使webstorm支持webpack的相对路径

执行wepy init standard demo后会生成wepy.config.js文件，其类似于webpack的配置文件，可以使用一些plugins和compilers，具体功能详见wepy框架。这里要提的是，通常我们会在这个文件中设置路径的别名，以简化资源引用。
如将/src/components路径的别名设置为@，则引用/src/components/custom_screen可以简写为@/custom_screen。
wepy.config.js文件的设置方式为添加：

alias: {
      '@': path.join(__dirname, 'src/components')
    },

这样使用会导致一个问题：webstorm不能识别如import custom_screen from '@/custom_screen'这样的语句，我们不能方便的通过F3快捷键找到custom_screen对应的js文件。
这个问题的解决方法是：打开settings，找到language & frameworks，找到JavaScript，找到webpack，选择wepy.config.js。

9.webstorm不支持微信特有的单位rpx

webstorm不支持rpx单位，如果直接编码padding-bottom: 10rpx;会飘红，此时可以通过padding-bottom: unit(10,rpx);迂回解决。如果要批量修改rpx单位，可以使用正则替换，将( \d{1,3})rpx（匹配空格+1-3个数字+rpx）替换为unit($1,rpx)。

注意：如果坚持使用rpx单位，要谨防webstorm代码格式化时破坏数据，如padding-bottom: 10rpx;格式化后会变为padding-bottom: 10 rpx;，在数值与单位间多了一个空格，从而导致微信小程序编译失败。

10.待解决问题

目前笔者还没解决.wpy文件中wxml部分微信特有渲染语法的飘红问题，如wx:if、wx:for；以及微信小程序原生组件属性的提示问题。如果有人可以帮忙解决，不胜感激。