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

Posted 2021-01-08 程序员哆啦A梦

小程序的文件类型

在微信小程序中有四种文件类型，主要分样式，骨架，业务，配置，样式为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

<!-- itemDemo.wxml -->
<template name="itemDemo">
  <text>{{text}}</text>
</template>

<import src="itemDemo.wxml"/>
<template is="itemDemo" data="{{text: 'itemDemo'}}"/>

include拷贝到 include 位置

//
<!-- indexDemo.wxml -->
<include src="headerDemo.wxml"/>
<view> body </view>
<include src="footerDemo.wxml"/>
//
<!-- headerDemo.wxml -->
<view> header </view>
//
<!-- footerDemo.wxml -->
<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

结语

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