笔者不太习惯使用微信提供的微信小程序开发工具,所以找了一些教程及资料,希望通过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
;以及微信小程序原生组件属性的提示问题。如果有人可以帮忙解决,不胜感激。