webstorm+小程序相配合来开发小程序

前言:

        webstorm可以安装的一个小程序插件: wechat-miniprogram-plugin ,来实现小程序语法的高亮,并识别 rpx 这种小程序专有单位,还可以实现跟开发者工具中一些类似的操作功能。

注意事项:

1、小程序的根目录下的project.config.json文件中必须存在下面的才会被插件检测为小程序项目

"compileType": "miniprogram"

2、高亮不成功的话,看看你是否 点我 把wxml和html连接起来,wxss和css连接起来,如果是的话,需要去除,去除方法看最下面的!!!

1、安装插件

英文版:file -> settings -> plugins

汉化版:文件 -> 设置 -> 插件

搜索:   wechat mini program support     然后   install / 安装 ,安装好了就是下面图的样子

 2、在webstorm中的具体使用

gitee上的api

1)创建 新页面或者新组件  ,跟小程序开发者工具一样,可以创建相关所有文件,并有默认内容

右键容器,上面是组件,下面是页面

 wxml 、wxss  打开是空的

js打开默认

Component({  properties: {},  data: {},  methods: {  }});

json打开默认

{  "component": true,  "usingComponents": {  }}

2) 代码语法提示

1、wxml内部:输入一个b,可以看到常用的事件都有了

 wxml中增加一个事件  abc ,然后鼠标放到abc上  ,Alt+回车  点击创建方法,可以看到js中自动生成了方法

<view>  <view class="aaa" bind:tap="abc"></view></view>

 

 2、在class名中间放你的鼠标,然后右键,创建,wxss文件中有了,这里的rpx是认识的,不会再报错了

 

 

 3)查看小程序原生的一些标签信息

 在标签上面,使用   ctrl + q

 !!!如果你的高亮不显示,并且安装以后 rpx  继续有报错,而且之前webstorm 整过高亮效果,看我下面的操作:

 1、找到文件类型

 英文版:file -> settings -> editor -> file types

 汉化版:文件 -> 设置 -> 编辑器 -> 文件类型

wxml的  :图1是中文,图2是英文

 wxss  :图1是中文,图2是英文



来源:春哥技术博客,欢迎分享,转载请注明出处。(欢迎加春哥团队客服微信号:taike668)

本文地址:https://www.cgtblog.com/cgymlt/10638.html
上一篇:基于微信小程序校园选修课抢座系统设      下一篇:【移动端应用开发】 以 uniapp 打包成