搜索
首页微信小程序小程序开发如何配置小程序开发项目结构?(教程)

如何配置小程序开发项目结构?(教程)

开发小程序,首先利用开发者工具创建一个demo,下载编辑器对项目结构进行配置。找到创建的 demo 文件夹,把项目导入到你的编辑器,使用的是Sublime Text编辑器。

1.png

这个时候需要根据自己的项目需求结构进行更改了,项目根目录下面是首页渲染的几个 tabBar 页面,以及 app 的一些配置文件,如名片盒项目的 tabBar 是 3 个切换菜单

如何配置小程序开发项目结构?(教程)

我们先找到 app.json 文件打开配置好这几个菜单,配置好 tabBar,这个直接把配置文件改成你自己设计的即可。

3.png

App.json 里面有几个配置项:

Pages:这个是编写的js文件,后缀.js这里不需要使用,配置好正确路径即可正常调用(若调用不到,在重启微信开发者工具会直接报 page 错误)。

networkTimeout:暂时没发现用处,建议看文档。根据实际项目需求进行添加与更改。

tabBar:底部的几项配置。

text:可以去掉,全部去掉会发现底部 tabar 高度会减少很多。 

Window:配置顶部的一些样式,文档介绍比较详细。

iconPath和selectedIconPath:底部菜单按钮图片与得到切换点击高亮。

4.jpeg

Json 文件配置好后,根据项目进行文件创建。

Demo:存放的是假数据,这一期的开发工具支持 require,假数据使用的是 .js 文件形式

里面的数据结构 json 一致,把 data 暴露出去即可

4.png

5.png

然后取数据 require 进来即可,这一点使用很方便;

Servise:服务交付层(与后台联调真实数据时使用);

Wxss:一些公共的 css 文件;

Images:图片路径;

Page:除 tabar 以外的页面;

看到这里大家发现每个页面都被连带好三个不同的后缀。分别页面,css,js 目前只能依照这样,是微信应用号的一个规范吧。

如何配置小程序开发项目结构?(教程)

Wxss 文件是引入你写的样式文件,也可以直接在里面写样式。

7.png

最后Js 文件需全部配置到 pages 里面才能生效。

8.png

推荐:《小程序开发教程

以上是如何配置小程序开发项目结构?(教程)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:即速资讯。如有侵权,请联系admin@php.cn删除

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。