开发小程序用的IDE比较单一,像微信开发者工具或者IDEA的小程序插件,但是如果你熟悉VS Code,想用VS Code作为小程序开发工具,我们可以通过安装插件来达到我们的目的。
首先理解一下小程序的文件结构:根目录下有一个app.js、app.json、app.wxss和一个pages文件夹。pages下面的文件夹就是小程序的几个页面,简单了解一下这个结构后,我们就可以着手进行插件的安装和配置。
首先我们需要安装两个插件:Minapp和Minapp VS Code插件。
Minapp:提供一些小程序的基本命令和工具支持,比如启动工作区、打开小程序地址等等。
Minapp VS Code插件:帮助我们按照小程序的结构创建Vue文件或模板,提供基于Vue的开发方式
配置完这两个插件后,我们就可以开始写小程序了。
Vue文件的编写
在VS Code中打开项目,首先我们需要一个新的页面。选择小程序的pages文件夹,右键,选择New Folder,输入文件夹的名字后,右键再次选择New File,输入.vue文件的名字,则新的页面就创建好了。
例如,我们创建了一个叫做“my-page”的页面,则VS Code就会自动生成一个my-page.js、my-page.json、my-page.wxss,而.vue文件则需要我们手动编写。
在.vue文件中,我们可以使用template2minapp模板引擎编写我们的小程序页面,例如下面的代码示例:
```html
export default {
data() {
return {}
}
}
.container {
font-size: 28rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 30rpx;
}
.logo {
width: 200rpx;
height: 200rpx;
}
.text {
color: #333;
}
```
Vue文件引入
新建好的.vue文件需要在app.vue(或者其他页面)中引入,如下:
```html
import PageA from './pages/page-a.vue'
import PageB from './pages/page-b.vue'
import MyPage from './pages/my-page.vue'
export default {
components: {
PageA,
PageB,
MyPage
},
data() {
return {}
}
}
```
设置小程序导航栏
在my-page.json文件中,添加以下代码:
```json
{
"navigationBarTitleText": "我的页面"
}
```
其中navigationBarTitleText就是小程序中标题的内容,可以修改为自己需要的。
实际显示效果:
![](https://cdn.nlark.com/yuque/0/2021/png/282773/1621104323752-a49b6eb7-9c21-4e76-b638-8d8adf29736b.png)
至此,用Vue编写小程序开发流程就完成了。如果你是Vue高手,非常熟悉Vue的编码方式,这种方式对你会更适合。