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并安装。
我直接用命令--npm install vue
打开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)。
----我直接将webstrom的 Invalid CSS property value选项关掉,缺点是别的css写错了也不会报错了