初学wepy框架
重项目搭建到开发的流程,配合小程序开发工具完成项目的整体开发
这是一个基于vue的小程序的开发框架,我们不能直接在小程序开发框架中去编写我们的代码,因为它解析不了wpy。建议大家用VS code去编辑代码,然后在小程序开发工具中去预览就好了
项目搭建
WePY的安装或更新都通过npm进行。 https://tencent.github.io/wepy/document.html#/ 进入这个链接可以看到如何去搭建项目
这里我给大家介绍一下每个文件的具体作用 在这里我建议大家用VScode这个软件来开发
① dist 用来运行代码的,这个文件我们可以不用去动它。
② node_modules 只是node的一个模块,项目的依赖。这个我们在开发的时候也开源不用去动它
③ src 我们几乎全部的操作都在这里完成,我们写的代码都是放在这里面,开发文件名的后缀都是.wpy。
需要安装的插件可以去百度搜一下,大家需要什么插件我就不清楚了
配置好后在编辑区输入w就会出现这些,我们一般都是用component这个的
选好后就会出现一个完整的结构,这里我们需要注意的是 要把component换成page,把scss换成less,具体为什么,自己去体会
④ components 为组件目录 如图
自己写的组件或者去别人写的组件都是这样子用,在components里面写好,回到src文件里面首先是在JS部分去引入,然后在components里面来设定一下组件名,最后就可以跟下面的图一样去用了(:listt.sync)这个是用来传数据的,如果你的组件是单纯的CSS就可以不用这个
⑤ app.js 和 package.json就不多说了,可以直接看文档
切换页面在app.js中的config里面去完成就可以了
第一次写,有很多东西都没有写全,如果有遇到什么不懂的可以直接评论。
|
请发表评论