002_目录结构_微信小程序实战训练

002_目录结构_微信小程序实战训练

 

这一节是要学习一下小程序的目录结构

官网的开发文档真的写的挺详细的

 

☛小程序包含一个描述整体程序的app和多个描述各自页面的page。

• 主体部分：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

 

• 页面组成：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

 

☛允许上传的文件

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传。具体白名单列表如下：

1. wxs
2. png
3. jpg
4. jpeg
5. gif
6. svg
7. json
8. cer
9. mp3
10. aac
11. m4a
12. mp4
13. wav
14. ogg
15. silk

☛A:交互逻辑：一个页面仅仅只有界面是不够的，还需要与用户做交互：响应用户的点击、获取用户的位置等。小程序通过编写JS脚本文件来处理用户的操作。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

点击button按钮时，把界面上msg显示成“Hello world！”,就在button上声明一个属性：bindtap，

在JS文件里声明clickMe方法响应这次点击操作：

Page({
  clickMe() {
    this.setData({msg: 'Hello World'})
  }
})

☛B:JSON 配置：app.json是当前小程序的全局配置

包括页面路径、界面表现、网络超时时间、底部tab等。

☛C:WXSS样式：具有css大部分的特性，也有一些扩展和修改。

• 尺寸单位新增，rpx，可以免去换算的问题，小程序底层会进行转换，由于是浮点数运算，所以可能会有一点偏差
• 提供了全局样式和局部样式，
• 只支持wxss部分css选择器

☛D:工具配置：project.config.json：

在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

 

☛我的目录创建

 

开发文档：https://developers.weixin.qq.com/miniprogram/dev/index.html