小程序的目录结构/配置介绍/视图层wxml数据绑定/双线程模型/小程序的启动流程

安装好微信小程序开发软件，创建项目

小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	Javascript	Javascript
配置	无	JSON

通过以上比对得出，传统web是三层结构。而微信小程序是四层结构，多了一层。

小程序基本目录

 配置介绍

小程序包括两种配置：一种是全局配置app.json和页面自己的json文件

注意：配置文件中不能出现注释

全局配置app.json

app.json是小程序的全局配置文件，包括小程序的所有页面路径、界面表现、网络超时、页面样式等等。

字段的含义：

1.pages字段——用于描述当前小程序所有页面路径

当你添加了一个新的路径，会自动生成一个文件夹。数组第一项代表小程序的初始页面（首页）

2.window字段——用于设置小程序的状态栏、导航条、标题、背景颜色等等

3.tabBar字段——客户端底部或顶部有tab栏可以切换页面，可以通过tabBar配置显示切换的页面

注意：list里面最少写2个，最多5个

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

页面配置json

每一个小程序的页面也可以使用.json文件来对本页面的窗口进行配置。页面中配置项在当前页面会覆盖app.json的window中相同的配置项。

页面配置中只能设置app.json中window对应的配置项，以决定本页面的窗口表现，所以无需写window这个属性。直接写属性

官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

视图层wxml数据绑定

数据绑定

1.普通写法

test.js   (需要现在test.js data中设置一个变量传参)

Page({
    data:{
 message:''hello
}
})

test.wxml   (获取数值)注意需要使用{{}}

<text>pages/test/test.wxml</text>
<view>{{message}}</view>

 2.组件属性   （在变量前加item）

test.js

Page({
    data:{
    id:0,
}
})

test.wxml

<view id="item-{{id}}"></view>

3.bool类型

不要直接写checked="false",其计算结果是一个字符串,必须使用{{}}

<view checked="{{false}}"></view>

运算

1.三元运算

test.js

Page({
    data:{
    flag:true,
}
})

test.wxml

<view hidden="{{flag ? true:false}}">Hidden</view>   #获取flag的值，flag为true就隐藏

2.逻辑判断  wx:if

Page({
    data:{
    b:,
}
})

<view wx:if="{{b>3}}">hello</view>    #判断b>3就显示hello

3.算数运算

<view>{{a+b}}+{{c}}+b</view>

4.字符串运算

<view>{{'hello'+name}} </view>

Page({
    data:{
    name:'jason',
}
})

列表渲染

1.wx:for   类似于for循环

项的变量名默认为item     wx:for-item可以指定数组当前元素的变量名

下标变量名默认为index   wx:for-index可以指定数组当前下标的变量名

<view wx:for="{{list}}" wx:for-index="key" wx:for-item="value" wx:key="index">   #wx:key提高使用效率
<!-- {{index}}:{{item.name}} -->
{{key}}:{{value.name}}   #把index取别名key,把item取别名value
</view>

Page({
    data:{
    list:[{name:"egon",like:"骚"},{name:"jason",like:"读书"}]
}
})

条件渲染

wx:if

在框架中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块

<view wx:if="{{condition}}"> True </view>

hidden

<view hidden="{{condition}}"> True </view>

类似wx:if

频繁切换 用hidden

不常使用 用wx:if

双线程模型

上图为官方文档给出的双线程模型

小程序的宿主环境

微信客户端微信客户端提供双线程去执行wxml,wxss，js文件。

双线程模型

1.上述的渲染层上面运行这wxml文件已经wxss文件，渲染层使用是的webview线程进行渲染（一个程序会有多个页面，也就会有多个view线程进行运作）

2.js文件是运行在逻辑层，逻辑层的js是通过jscore进行运行的。

通过双线程界面的渲染过程是怎样的？

wxml与DOM树

其实我们wxml文件与我们html中的DOM树是一样的，这样我们就可以有js来模拟一个虚拟的DOM树。

如果我们的wxml文件中如果有变量：要与js逻辑层共同渲染页面成为一个真正的DOM树。

总结：就是将渲染层的wxml文件转成虚拟化DOM,然后结合js中真实数据形成真实的DOM树，然后再渲染出来。

界面渲染的整体流程

1在渲染层将wxml文件与wxss文件转化成js对象也就是虚拟DOM

2 在逻辑成将虚拟的DOM对象配合生成，真实的DOM树，在交给渲染层渲染

3 当数据变化是，逻辑层提供更新数据，js对象发生改变，用diff算法进行比较

4 将更新的内容，反馈到真实的DOM树中，更新页面

小程序的启动流程

在app生命周期中执行了什么？

注意点：

1.从后台进入前台时会触发onShow()

2.从前台进入后台会触发onHide()

执行App()函数也就是注册一个App

​ 1 在注册app的时候，可以判断小程序的进入场景

​ 2 我们可以在执行通过生命周期函数，做一些数据请求

​ 3 可以在app中设置一个全局对象，让所有页面都能使用

在每个页面js的什么周期中执行了什么？

Page({

  /**
   * 页面的初始数据
   */
  data: {
      name:"sb",
      like:"票",
      num:0,
      c:false,
      a:1,
      b:2,
      list:[{name:"egon",like:"骚"},{name:"jason",like:"淫十"}]
  },

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

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

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

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

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload")
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh")
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("onReachBottom")
  }

1 在生命周期函数中发送网络请求，从服务端获取数据

2 初始化一些数据，在data里面，以方便wxml引用

3 监听wxml的事件，绑定对应的事件函数

4 还有页面滚动，上拉，下拉等

页面的生命周期