微信小程序开发微信小程序微信小程序开发者

小程序教学二(文件介绍)

2018-05-21  本文已影响17人  遛遛食

首先介绍一下小程序的文件结构


文件基本结构

在小程序开发中文件的后缀一般为

微信的后缀 对应HTML的后缀 一般写什么内容
.wxml .html 写网页的内容
.wxss .css文件 写网页中的样式文件
.js .js文件 写业务逻辑代码
.json .json文件 写配置文件,页面的样式,标题

在小程序开发中必须存在的根文件为

文件名 作用
app.js 项目的入口文件,可以监听到项目的生命周期
app.json 项目的配置文件,设置项目的样式和加载的其它子文件
app.wxss 存放公共的样式,就是全局的.css文件
project.config.json 项目的配置信息文件

project.config.json

project.config.json

我们可以在这个文件夹里面直接修改项目的配置信息
例如项目的appid,在project.config.json文件夹中找到appid字段,然后修改后面的值,然后重新打开即可。
再例如项目的名称,在project.config.json文件夹中找到projectname字段,然后修改后面的值,然后重新打开即可。

app.js

在app.js文件中,代码必须都写在APP({ })里面,且必须要有 APP({ })
例如有公共的函数方法,建议写在这个文件中

app.wxss

这个文件存在的就是全局的css样式,
例如定义所有的class="font15" 那么可以在这个文件夹中.font15{font-size: 15px}

app.json

这个文件存放1.小程序的样式2.所有预加载的文件

注意:因为这是个json文件,所以不能再里面添加注释

app.json
pages:存放预加载的页面路径
window:存放小程序的样式
window

此外还有的
tabBar:多个页面切换 注意:小程序系统的tabbar只能在首页设置,不能再二级页面设置

 "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }
tabBar
networkTimeout:设置网络的请求超时时间
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }

每个页面

在小程序中,最好每个页面就创建一个文件夹,每个文件夹中都有与文件夹名字一样的.js、.json、.wxml、.wxss文件


每个页面的文件结构

在每个页面的.js文件夹中,代码必须都写在Page({ })里面,且必须要有 Page({ })

持续更新中...

上一篇 下一篇

猜你喜欢

热点阅读