1.1 小程序框架组成介绍

1.1.1 新建页面

新建页面的步骤：

在pages目录上，单击右键选择“新建文件夹”，例如：创建cart文件夹
在cart文件夹上，右键选择“新建page”生成页面的框架（由四个文件构成）
在app.json文件中的对应目录，会自动生成放置在pages 字段中。你只需要手动的调整某些页面显示的先后顺序。如果不需要调整。默认即可。

2.1.2 设置页面顶部

在app.json文件中的windows字段中设置：

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },

属性	类型	默认值	描述
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTitleText	string		导航栏标题文字内容
navigationBarTextStyle	string	white	导航栏标题颜色，仅支持 `black` / `white`

小程序配置/页面配置/配置项详细说明，参见，小程序官网：

页面配置 | 微信开放文档

2.1.3 设置tabBar底部导航

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

在app.json文件中的tabBar字段中设置：

 "tabBar": {
        "backgroundColor": "#181E2C",
        "color" : "#fff",
        "selectedColor" : "#de3120",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text" : "点餐",
                "iconPath" : "/images/footer_btn_1.png",
                "selectedIconPath" : "/images/footer_btn_1_active.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text" : "购物车",
                "iconPath" : "/images/footer_btn_2.png",
                "selectedIconPath" : "/images/footer_btn_2_active.png"
            },
            {
                "pagePath": "pages/user/user",
                "text" : "我的",
                "iconPath" : "/images/footer_btn_3.png",
                "selectedIconPath" : "/images/footer_btn_3_active.png"
            }
        ]

    },

预览：

框架--页面配置--全局配置文档--tabBar，参加，小程序官网：

全局配置 | 微信开放文档

1.2 小程序生命周期和页面生命周期讲解

小程序的生命周期函数:

小程序的生命周期函数是在app.js里面调用的，App(Object)函数用来注册一个小程序。

接受一个 Object 参数，指定其小程序的生命周期回调

一般有onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。

小程序启动时，先执行onLaunch>onshow，然后再执行页面onload>onshow>onready

2.2.1 小程序生命周期

onLaunch监听小程序初始化
onShow 监听小程序显示
onHide 监听小程序隐藏

// app.js
App({
  // 监听小程序初始化
  onLaunch() {
    console.log('onLaunch 监听小程序初始化')
  },
  onShow(){
    console.log('onShow 监听小程序显示')
    //你可以在生命周期函数中，去做一些 你想做的事情，例如：输出当前系统年份
    let date = new Date()
    console.log(date.getFullYear())
  },
  onHide(){
    console.log('onHide 监听小程序隐藏')
  },

  globalData: {
    userInfo: null
  }
})

查看“调试器”--“console控制台"，预览：

从上演示，我们可以知道小程序的生命周期函数的调用顺序为：onLaunch>onShow>onHide

2.2.2 页面生命周期

每个页面的生命周期，设置在对应页面的xxx.js文件中。如果我们在pages中的index文件夹中的index.js中设置当前这个首页的页面生命周期：

在这个页面中，写如下生命周期函数即可。

onload
onshow
onready
onhide
onunload

其中index.js文件中：

2.2.2.1 data的作用

data的作用：页面的初始数据

data里的数据可以渲染在页面上

2.2.2.2 页面生命周期函数的作用

页面生命周期函数的具体使用：

/**
   * 生命周期函数--监听页面加载
   */
onLoad: function (options) {
console.log('onLoad监听页面加载')
},

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady: function () {
console.log('onReady监听页面初次渲染完成')
},

/**
   * 生命周期函数--监听页面显示
   */
onShow: function () {
console.log('onShow监听页面显示')
},

/**
   * 生命周期函数--监听页面隐藏
   */
onHide: function () {
console.log('onHide监听页面隐藏')
},

2.3 小程序自适应尺寸单位rpx和样式

2.3.1 rpx单位

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx 。注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿（设计稿）的标准。建议：设计稿使用设备宽度750px比较容易计算750px的话，1rpx=1px，这样的话，设计图上量出来的尺寸是多少px就是多少rpx，至于在不同的设备上实际上要换算成多少个rem就交给小程序自己换算。

2.3.2 小程序的样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

(1) 页面中导入外联样式表

common.wxss 外联样式表

/** common.wxss **/
.red{
color: red;
}

index.wxss 页面样式表

@import '../../common.wxss';
/**index.wxss**/
.userinfo{
  font-size: 30px;
  text-align: center;
  width: 30%;
  padding: 16px;
}

（2）导入公共样式也是一样的方法

2.3.3 小程序的全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

2.3.4 小程序内联样式

小程序框架组件上支持使用 style、class 属性来控制组件的样式。

style：style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

class：静态的样式统一写到 class 中。用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，多个样式类名之间用空格分隔。

2.3.5 小程序支持的css选择器

微信小程序目前支持的选择器有：

选择器	样例	样例描述
.class	.intro	选择所有拥有 class="intro" 的组件
#id	#firstname	选择拥有 id="firstname" 的组件
element	view	选择所有 view 组件
element, element	view checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容
::before	view::before	在 view 组件前边插入内容

小程序框架介绍、生命周期、尺寸