uniapp（一）

1.uni-app和vue的关系

• 使用vueJS开发
• 在发布到H5时，支持所有vue语法
• 发布到App和小程序时，实现部分Vue语法

2.uni-app和小程序

• 组件标签靠近小程序规范
• 接口能力（JS API）靠近微信小程序开发
• 完整的小程序生命周期

3.微信小程序开发官网（mp.weixin.qq.com)

• 小程序开发文档

• 开发者工具下载（点击上图中的，查看详情）

• 登录注册微信小程序（自行注册），登陆后查看appId

4.微信开发者工具创建项目（注意填写AppID)

5.微信小程序结构

6. 微信小程序，页面启动顺序（可以根据app.json中所写的，进行调整）

7.page页面中结构

8. 基本语法

//wxml 部分：  类似vue语法
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

//js 部分 this.setData 类似 react状态管理
Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

9.组件js内部结构

Component({
    lifetimes:{
        created() {
        console.log('created,组件实例刚刚被创建好时， created 生命周期被触发')
        },
        attached() {
        console.log('组件实力进入页面节点树时候进行执行');
        },
        detached() {
        console.log('在组件实例被从页面节点树移除时执行');
        }
    },
  properties: {

  },
  data: {

  },
  methods: {

  }
})

10.页面内部Js结构：  On show  要早于 on Ready出现

Page({
    onLoad: function (options) {
        // 页面创建时执行
    },
    onShow: function () {
        // 页面出现在前台时执行
    },
    onReady: function () {
        // 页面首次渲染完毕时执行
    },
    onHide: function () {
        // 页面从前台变为后台时执行
    },
    onUnload: function () {
        // 页面销毁时执行
    },
    onPullDownRefresh: function () {
        // 触发下拉刷新时执行
    },
    onReachBottom: function () {
        // 页面触底时执行
    },
    onShareAppMessage: function () {
        // 页面被用户分享时执行
    },
    onPageScroll: function () {
        // 页面滚动时执行
    },
    onResize: function () {
        // 页面尺寸变化时执行
    },
    data: {},
    bindViewTap() {
        wx.navigateTo({
            url: '../logs/logs'
        })
    }
})

11. app js内部结构

App({
  onLaunch() {
    console.log("on Lanuch")
  },
  onShow(){
      console.log("on show")
  },
  onHide(){
      console.log("on hide")
  },
  globalData: {
    userInfo: null
  }
})

12.生命周期执行顺序

后台------->切入前台

• 先执行app    show 
• 在执行component的 created,attached
• 在执行page的 onload ,onshow ,onready

前台------->切入后台(没有component的事情）

• 先执行page的 hide
• 再执行app 的hide