微信小程序开发基础篇之工具介绍(二)
来源:互联网 发布:淘宝充值红包退款 编辑:程序博客网 时间:2024/05/16 11:21
上一篇文章描述了从下载到打开的详细说明,接下来,该详细介绍一下,页面和逻辑代码方面的知识了,要不然感觉没有多少干货,很虚。
下面这张图是程序代码目录图:
我们可以看到上图主要的右边区域如下具体所示:
主要有一个Pages文件夹、utils文件夹、app.js、app.json、还有一个app.wxss文件夹
打开pages你会看到默认的两个文件夹index和logs:如下:
index和logs是两个不同的功能,也就是说我们在编写小程序的时候,不同的功能,我们在pages下面建立不同的文件夹,顺便多说一句,在建立文件夹的时候,我们最好能起一个容易识别的名字,达到识名知意的效果。打开其中的一个文件夹,我们就会看到如下的几个文件:
如上所示:我们可以看到三个文件,分别是js,wxml,wxss文件,这三个文件有这不同的功能,js文件一般是这个功能的逻辑代码,配置文件等,wxml文件相当于我们开发网页的时候html页面的代码,换言之,就是我们的布局代码,wxss文件相当于我们的css文件,就是是我们页面更加美化,调整一下页边距,背景,图片大小等。
下面来看一下详细的代码页面:稍微有点网页开发基础的伙伴基本都能看懂这个代码:
wxml界面:很熟悉吧,和HTML很像。
wxss界面:
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
Pages(开发者自行创建)目录是你的页面目录,但不是一定需要叫Pages
Utils (开发者自行创建)在本例中是工具类库目录,不是一定需要存在
在开发过程中最好遵循以上目录结构,特别Pages,没个页面独立一个文件夹,因为每个页面有自己独立的样式或者Js。未来方便管理。 但是,如果有公共样式的存在,请写在app.wxss
- 微信小程序开发基础篇之工具介绍(二)
- 微信小程序开发详解(二)---开发工具使用简介
- 微信小程序系列--1、开发工具介绍
- 小程序开发系列之基础部分-开发工具
- 微信小程序之开发者工具介绍(三)
- 微信小程序开发基础篇之安装(一)
- 微信小程序开发基础篇(三)之框架
- 网络安全工具开发函数库介绍之二——libpcap
- 网络安全工具开发函数库介绍之二——libpcap
- kotlin开发工具介绍(二)
- Android开发的基础常识二之程序解读
- Android App开发从零开始之基础篇—四大组件(二)—使程序后台运行的Service
- Transform介绍(Unity3D开发之二)
- Onvif开发之基础介绍篇
- Onvif开发之基础介绍篇
- Onvif开发之基础介绍篇
- Onvif开发之基础介绍篇
- oracle程序开发基础二
- Java通过JNI调用C语言
- 136----current 获取指针当前单元
- HRTF学习笔记
- 一、系统准备工作
- 【C语言】LeetCode 234. Palindrome Linked List
- 微信小程序开发基础篇之工具介绍(二)
- HDU 1568 犀利的fibonacci数列(log 科学记数法)
- arcgis中脚本工具调用公用的python脚本
- strip后调试符号单独保存文件
- SqlServer--bat批处理执行sql语句2-sqlcmd
- Nginx流媒体支持配置
- Github安装到上传项目
- maven国内镜像源
- 鼠标滚动事件:回到顶部按钮