web前端学习（三）：微信小程序基于H5规范，开发Android应用程序

前言：

1. 微信小程序开发框架的目标是通过尽可能简单，高效的方式让开发者可以在微信中开发具有原生APP体验的服务。
2. 整个小程序框架系统分为两部分，逻辑层，视图层，小程序提供了自己的视图层描述语言， WXML和 Wxss ,以及基于javascript的逻辑层框架， 并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

优点：

1. 微信用户量大，开发门槛低，推广成本低，跨平台，无需安装。

2. 微信小程序开发门槛低，可以实现消息通知，线下扫码，公众号关联等七大功能

3. 同类型的小程序： 支付宝小程序，qq小程序。

微信小程序APP(ID): xxxxx

1.配置环境

1.应用配置

1.项目结构

|----|---index /首页
        |---index.js /首页逻辑文件
        |---index.json //首页配置文件
        |---index.wxml /首页视图文件
        |---index.Wxss //首页样式文件
|----|----1ogs“日志页面
        |---logs.js
        |---1ogs.json
        |---logs.wxml
        |---logs.wxss
|---utils /1工具文件夹
    |--util.js
|---app.js    //全局入口文件
|---app.json //全局配置文件
|---app.NXss  //全局样式文件
|---project.config.json //项目配置文件
|---sitemap.json //索引配置文件

2.app.json应用配置项

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。完整配置项说明请参考小程序全局配置

以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/index",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。 当 position 为 top 时，不显示 icon。

2.页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。完整配置项说明请参考小程序页面配置

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",      // 页面导航标题
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
  "enablePullDownRefresh":true,           // 上拉刷新，开启后onPullDownRefresh才有效
  "backgroundTextStyle": "dark",          // 上拉刷新的等待图标
  "usingComponents": {                    // 引入组件
       ...
   }
}

2.小程序生命周期

1.应用级生命周期

属性	类型	默认值	必填	说明	最低版本
1.onLaunch	function		否	生命周期回调——监听小程序初始化。
2.onShow	function		否	生命周期回调——监听小程序启动或切前台。
3.onHide	function		否	生命周期回调——监听小程序切后台。
onError	function		否	错误监听函数。
onPageNotFound	function		否	页面不存在监听函数。	1.9.90
onUnhandledRejection	function		否	未处理的 Promise 拒绝事件监听函数。	2.10.0
onThemeChange	function		否	监听系统主题变化	2.11.0
其他	any		否	开发者可以添加任意的函数或数据变量到 Object 参数中，用 this 可以访问

// app.js
App({
   /*  1.监听小程序的初始化  */
   // 获取用户信息
   onLaunch(){
      console.log("onLaunch")
   },

   /* 2.监听小程序启动或者切换前台   */
   // 对页面的数据和效果进行重置
   onShow(){
     console.log("onShow")
   },
   /* 3.监听小程序切后台 */
   // 清除定时器
   onHide(){
      console.log("onHide")
   },
 
 
   
   /* 错误监听函数  */
   // 收集错误，通过异步请求发送服务器
   onError(e){
      console.log(e)
   }, 
   /*
    * 页面不存在监听函数
    * 启动时的入口文件不存在时才触发
    * 一般多用于扫码进入页面时的处理
    */
   onPageNotFound(){
     // 当页面不存在的时候，进行重定向，跳转到存在的页面
     console.log("onPageNotFound")
     wx.navigateTo({
       url: '/pages/page3/page3',
     })
   }

  
})

app.js中有一个 globalData， 可以用于放置全局变量或者常量。

在其它js文件中使用以下代码，获取数据。

const app = getApp();
const baseUrl = app.globalData.baseUrl;

2.页面级生命周期

注意：前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

属性	类型	说明
data	Object	页面的初始数据
1.onLoad（mounted）	function	生命周期回调—监听页面加载
2.onReady	function	生命周期回调—监听页面初次渲染完成
3.onShow	function	生命周期回调—监听页面显示
4.onHide	function	生命周期回调—监听页面隐藏
5.onUnload（unmounted）	function	生命周期回调—监听页面卸载
6.onPullDownRefresh	function	监听用户下拉动作
7.onReachBottom	function	页面上拉触底事件的处理函数
8.onTabItemTap	function	当前是 tab 页时，点击 tab 时触发
onShareAppMessage	function	用户点击右上角转发
onShareTimeline	function	用户点击右上角转发到朋友圈
onAddToFavorites	function	用户点击右上角收藏
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onSaveExitState	function	页面销毁前保留状态回调
其他	any	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问。这部分属性会在页面实例创建时进行一次深拷贝。

Page({

  /*  页面的初始数据 */
  data: {

  },
  
  /* 1.生命周期函数--监听页面加载 */
  // 发送异步请求，初始化页面数据
  // 一个页面只会调用一次。
  // 接收页面参数 可以获取wx.navigateTo和wx.redirectTo及中的 query。
  onLoad: function (options) {
      console.log("onLoad")
  },

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

  /* 3.生命周期函数--监听页面显示 */
  // 每次打开页面都会调用一次。**tabBar切换无效
  onShow: function () { 
    console.log("onShow")
  },

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

  /* 5.生命周期函数--监听页面卸载 */
  // 当redirectTo或navigateBack的时候调用。 （navigateTo无效）
  onUnload: function () { 
    console.log("onUnload")
  },



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

  /* 2.页面上拉触底事件的处理函数 */
  // 上拉加载数据
  onReachBottom: function () { 
    console.log("onReachBottom")
  },
  
   /* 3.切换tab页 */
   // 当前是 tab 页时，点击 tab 时触发
  onTabItemTap: function () { 
    console.log("onReachBottom")
  },
 


})

3.组件生命周期

​ 组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

• 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
• 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
• 在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

1.组件的生命周期

生命周期	参数	描述	最低版本
1.created	无	在组件实例刚刚被创建时执行	1.6.3
2.attached (mounted)	无	在组件实例进入页面节点树时执行	1.6.3
3.ready	无	在组件在视图层布局完成后执行	1.6.3
4.moved（update）	无	在组件实例被移动到节点树另一个位置时执行	1.6.3
5.detached (unmounted)	无	在组件实例被从页面节点树移除时执行	1.6.3
error	Object Error	每当组件方法抛出错误时执行	2.4.1

代码示例：

Component({
  // 自小程序基础库版本 [2.2.3](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) 起，组件的的生命周期也可以在 `lifetimes` 字段内进行声明（这是推荐的方式，其优先级最高）。
  lifetimes: {
    created: function() {
      // 在组件实例进入创建节点树时执行
    },
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    ready: function() {
      // 在组件实例进入创建节点树时执行
    },
    moved: function() {
      // 在组件实例进入创建节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },  
})

2.组件所在页面的生命周期

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：

生命周期	参数	描述	最低版本
1.show	无	组件所在的页面被展示时执行	2.2.3
2.hide	无	组件所在的页面被隐藏时执行	2.2.3
resize	Object Size	组件所在的页面尺寸变化时执行	2.4.0

代码示例：

Component({
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

3.wxml的使用

1."{{ }}"数据绑定

注意： 在标签中使用变量，必需使用双括号和引号共同作用，才能进行数据的绑定。

使用方式 和vue类似，都可以在双括号内使用变量，进行数据绑定。

双括号内可以进行三元运算、和算术运算， 组成新的数据， 但唯一不允许构造成对象使用

1.数据绑定

{{obj.age}}

{{ [msg,num] }}

2.表单数据的双向绑定

// vant组件中使用model进行绑定

  

2.wx:for列表循环

使用方法也与vue相同, 但是需要添加wx的专属属性绑定和数据绑定

 
 {{item}}

  
 

                // wx:key 关键区分字段
    索引：{{index}}
    姓名：{{item.name}}

 
 
 
    对象的key:{{key}}     
    对象的value:{{value}} 
  

3.wx:if条件渲染

小程序是wx:elif，vue是v-else-if

• wx:if是惰性的，hidden是活动的。
• hidden就类似于v-show，它始终会被渲染，只是简单的控制显示与隐藏
• wx:if是惰性的，如果在初始渲染条件为false，则不会有任何变化。如果条件为真，则才会开始局部渲染。
• 也可以用 wx:elif 和 wx:else 来添加一个 else 块：

 
<view wx:if="{{num == 1}}">{{ [msg,num] }}view>

 
<view wx:if="{{length > 5}}"> 1 view>
<view wx:elif="{{length > 2}}"> 2 view>
<view wx:else> 3 view>

4.wx模板和引用

1.创建模板

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 模块。

• 方法一：组件内定义模板
• 方法二：组件外定义模板，使用import导入 wxml文件。 （使用方法比组件更简单）