微信小程序

一、小程序文件结构

1.目录结构

pages文件夹：存放【页面文件夹】，一个【页面文件夹】就是一个页面，存放着小程序页面文件。即pages中的每一个文件夹都存放着一个小程序页面的文件（js、wxml、json、wxss）

页面文件夹 一个【页面文件夹】中必须包含以下4个文件，为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

.json 后缀的 JSON 配置文件

.wxml 后缀的 WXML 模板文件

.wxss 后缀的 WXSS 样式文件

.js 后缀的 JS 脚本逻辑文件

utils文件夹 存放一些工具JS文件。

app.js 小程序最终打包、创建App实例的入口文件（相当于Vue中main.js），可以在这个文件中写一些全局变量、绑定生命周期回调函数、错误监听和页面不存在监听函数等。

app.json  小程序全局配置。

app.wxss 小程序公共样式表。

2.全局配置（app.json）

小程序根目录**下的 app.json 文件用来对微信小程序进行全局配置

pages  配置页面路径，只要新建一个页面就要在pages中添加页面路径

windows 用于设置小程序状态栏、导航条、标题、窗口背景色。

tab'bar 小程序需要tab栏可以切换页面通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

3.页面配置（*.json）

在页面对应的 .json 文件来对本页面的表现进行配置。页面中配置项在当前页面会覆盖 app.json 中相同的配置项

二、组件标签

1.<view>组件

<view>111</view>

是块级元素

2.<text>

是行内元素

<text>222</text>
<text>222</text>

3.<image>

照片 是行内块元素

src是图片路径，mode表示图片缩放方式

<image src="" mode="aspectFill"></image>

三、WXSS样式

1 选择器与属性

选择器和样式属性和css一模一样。

2 尺寸单位

        微信小程序主要使用rpx单位，而非px单位。rpx可以根据屏幕宽度进行自适应，规定默认屏幕宽为750rpx。

建议开发机型选择iPhone6设备选择模拟器，换算公式为1rpx = 0.5px = 1物理像素。

四、数据绑定

1.插值绑定

        使用【mustache语法】绑定对应 data 数据，数据是响应式的，同时可以做一些简单的表达式，例如三元表达式、判断表达式、简单运算

        形式{ {变量值}}

<!--wxml-->
<view>{
  {num}}</view>
// js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num:"你好",
  },

})

2.属性绑定

小程序中，仅使用【mustache语法】绑定所有需要在wxml中引用js中的变量，且在标签属性值中，可以写多个绑定，最终只是个拼接成字符串。

        形式：{ {变量值}}