小程序当中的文件类型，组织结构，配置，知识点等

分手后的思念是犯贱 2021-09-16 10:55 531阅读 0赞

![标题图][1240]

## 小程序的文件类型 ##

在微信小程序中有四种文件类型，主要分样式，骨架，业务，配置，样式为`wxss`，这里的`wxss`与页面的`css`相类似，骨架为`wxml`，这里的`wxml`于页面的`html`相类似，业务逻辑都是以`js`为结尾，配置文件为`json`结尾。

以`.json`为后缀的文件为`json`配置文件，以`.wxml`为后缀的文件为`wxml`模板文件，以`.wxss`为后缀的文件为`wxss`的样式文件，以`.js`为后缀的文件为`js`脚本逻辑文件。

小程序文件结构拥有`app.js`，`app.json`，`app.wxss`，`Page->wxml`，`wxss`，`js`，`json`。

`json`的配置，在项目中有

app.json
    project.config.json
    logs.json

`app.json`为项目小程序的全局配置，可以配置所有页面的路径，界面表现，网络超时时间，底部`tab`等。

// 简书作者：达叔小生
    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      }
    }

工具配置 `project.config.json`  
页面配置 `page.json`  
`WXML` 模板

网页是由`HTML + CSS + JS`组合的，`html`来描述页面结构的，`css`是用来描述页面样式的，`js`是用来使页面和用户交互的。

这里的`wxml`就和页面中的`html`一样哦！

`wxml`与`html`有点不一样哦

就是标签不一样，`html`用的是`div, p, span`，`wxml`用的是`view, button, text`，还有很多。还有`wx:if` 和 `{ {}}` 表达式，在网页是用`js`操作`dom`的，在学页面的时候为了很好的开发，就有了`mvvm`的模式，需要我们学习`react`，`vue`等，都是把渲染和逻辑分开的，在`wxml`中，就是微信小程序，通过`<text>{ {msg}}</text>`，然后在`js`中，`this.setData({ msg: "Hello World" })`，就可以通过语法把一个变量绑定在界面上。在微信小程序中，我们时时刻刻都要用的数据绑定，微信小程序还有`if/else, for`等控制能力，规定开头要用`wx:`来表达。

> 全局配置`app.json`

pages页面路径列表
    window默认窗口表现
    tabBar底部 tab 栏的表现
    networkTimeout网络超时时间
    debug是否开启 debug 模式

`pages:`

{
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ]
    }

`window:`

navigationBarBackgroundColor导航栏背景颜色
    navigationBarTextStyle导航栏标题颜色
    navigationBarTitleText导航栏标题文字内容
    navigationStyle导航栏样式
    backgroundColor窗口的背景色
    backgroundTextStyle下拉 loading 的样式

`tabBar`

color tab 上的文字默认颜色
    selectedColor tab 上的文字选中时的颜色
    backgroundColor tab 的背景色
    list 最少2个、最多5个 tab
    position tabBar的位置
    pagePath 页面路径
    text tab 上按钮文字

`networkTimeout`

request 
    connectSocket
    uploadFile
    downloadFile

`WXML`

// 数据绑定
    <view> {
       {message}} </view>
    Page({
      data: {
        message: 'Hello!'
      }
    })

// 列表渲染
    <view wx:for="{
       {array}}"> {
       {item}} </view>
    Page({
      data: {
        array: [1, 2, 3, 4, 5]
      }
    })

// 模板
    <template name="Name">
     <view>
     
     </view>
    </template>
    <template is="Name" data=""></template>

引用提供两种文件引用方式`import`和`include`

`import`

<template name="itemDemo">
      <text>{
       {text}}</text>
    </template>

`include`拷贝到 `include` 位置

//
    
    <include src="headerDemo.wxml"/>
    <view> body </view>
    <include src="footerDemo.wxml"/>
    //
    
    <view> header </view>
    //
    
    <view> footer </view>

小程序的启动

App({
      onLaunch: function () {
        // 小程序启动后 触发
      }
    })

运行机制

冷启动和热启动

`getApp(Object)`用来获取消小程序`app`实例的。

程序与页面

Page({
      data: {
        ...
      },
      onLoad: function () {
        // 页面渲染后 执行
      }
    })

`Page(Object)`

data 页面的初始数据

*  加载
 *  显示
 *  页面初次渲染完成
 *  页面隐藏
 *  页面卸载

尺寸单位

`rpx`：为可以根据屏幕宽度自动适应。规定屏幕宽为`750rpx`。

样式导入：使用`@import`语句

/** add.wxss **/
    .b-p {
      padding:5px;
    }
    /** app.wxss **/
    @import "add.wxss";
    .a-p {
      padding:15px;
    }

事件详解

touchstart 手指触摸，动作开始
    touchmove 手指触摸后，移动
    touchcancel 手指触摸，动作被打断
    touchend 手指触摸，动作结束
    tap 手指触摸后，马上离开

发布前的准备：用户身份，预览，上传代码，小程序的版本，上线，提交审核

在`pages`字段里是用来放置所有页面路径的，只要添加就可以自动生成哦，`window`字段里是放置所有页面的配置，如顶部的背景颜色，文字颜色等。

> 往后余生，唯独有你  
> 简书作者：达叔小生  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： [https://www.jianshu.com/u/c785ece603d1][https_www.jianshu.com_u_c785ece603d1]

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

[1240]: /images/20210724/147db0c292184136a2397eca0631fb57.png
[https_www.jianshu.com_u_c785ece603d1]: https://www.jianshu.com/u/c785ece603d1