微信小程序初识

1.组件或页面在json文件中引入    

useComponent:{
       "组件名":"组件路径"
}

2.页面的js文件实例用page() 。

页面方法无需放入methods，与data平级即可。
3.组件js实例用component() 。

组件方法需放入methods
4.behavior等于vue的mixins

5.observer等于vue的watch

observers:{
     'numA' : function( newVal,oldVal ){
        console.log(newVal)
    }
}

微信小程序页面路由直接在小程序中的app.json中配置

6.点击方法传参通过bindtap    data-参数名=参数值(与vue事件传参不同，本质是通过自定义属性实现的参数传递) 

参数获取    e.currentTarget.dataset.参数名
7.路由跳转 navigator标签（跳转至非一级页面，一级页面需使用switchTab）
属性：
url：要跳转的路径（可以使用相对路径，也可以使用绝对路径）
open-type：跳转方式。默认值为 navigate ，不能跳转至tabBar页面。当值为 switchTab 时，可跳转至tabBar页面。当值navigateBack 时，点击可返回原页面。 注：小程序跳转时严格区分tabBar页面与非tabBar页面。

声明式导航

//页面跳转
<navigator open-type="switchTab" />

//组件跳转
<navigator open-type="navigate" />

//返回   delta返回的级数
<navigator open-type="navigateBack"  delta="1" />

编程式导航    （若要传递参数直接在url后拼接）

//一级页面跳转：
wx.switchTab({
       url: "/index"   // url:路径
})
//组件跳转：
wx.navigateTo({
       url: "/page/index/index"   //url:路径 
})
//后退跳转：
wx.navigateBack({
       url:"/page/index/index"   // url:路径
})

跳转传参
声明式导航

<navigator url="/pages/index/index?name=zs&age=20"  
open-type="switchTab">
    跳转到xx页面
</navigator>
//编程式导航
wx.navigateTo({
    url: "/pages/index/index?name=zs&age=20"
})

跳转参数在生命周期函数中获取

onload:function(options){
       cosole.log(options.name)
}

小程序样式隔离

在components实例中添加stylesolution选项。isolated启用样式隔离，外部无法改变内部，内部也无法更改外部，shared两方都可以相互影响。

全局变量的定义与使用

在app.js中定义   

This.globalData.变量名 =  'xxx'

组件中使用

const app = getApp()          app.变量名

获取当前组件实例(微信小程序中页面以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。不要尝试修改页面栈，会导致路由以及页面状态错误。不要在 App.onLaunch 的时候调用 getCurrentPages()，此时page 还没有生成。)

const pages = getCurrentPages()

获取前一页组件实例

const prePage = pages[pages.length-2]

9.微信小程序data  同vue

data(){
     num:0,
     obj:{ name: '猪猪侠' }
}

this.setData({ num:this.num + 1  })  //修改data      

this.setData({ [`obj.name`]: '卡卡西'  })  //修改data中的某个属性


//或者
this.setData({
   obj: {
      name: "张三",
   }
})

properties等于vue的props   必须注明类型，默认值为value(组件中属性同名时properties优先级高于data)

properties {
      num: {
           type: Number,
           value:1
     }
 }

<component count={{data}}> //父传子   

子传父   this.triggerEvent('事件名称'，{参数})     父组件在触发事件中接受参数e，传过来的数据在e.detail中

this.selectorComponent(id或者class选择器)获取组件实例

小程序的for循环    

wx:for="{{arr}}"
wx:key="主键"
wx:for-index="设置的index名"  
wx:for-item ="设置的item名"

计算属性

小程序的计算属性  微信小程序没有computed计算属性(官网有实现computed功能的拓展)

原生的实现方法：新建一个wxs文件 编写需要的数据处理函数导入页面使用

生命周期

小程序的生命周期

onload   组件加载时触发（仅一次）

onReady  页面初次渲染完成（仅一次）

onShow   组件展示时触发（每次进入都触发）

组件的生命周期

lifetimes:{

  created(){

        //组件创建时

  },

  atteched(){

    //dom渲染完成时

  } 

}

微信小程序的坑点

1.使用weapp的toast组件时，必须在该页面的根组件注册toast组件，否则会报错找不到toast节点