记录一下uni-app中常用的使用方法或是操作步骤,方便后期速查使用.
     1.设置对象属性
     2.组件中数据变化监听方法
     3.微信开发者工具中全局搜索与局部搜索
     4.Page对象与Componet对象组成
     5.tabbar页面切换方法
     6.组件中自定义函数的参数传递
     7.mobx全局数据共享创建store对象实例
     8.()=>含义

1.设置对象属性

    不论是page对象还是componet对象,设置data中节点值的方式:

this.setData({
节点名:节点值
})

2.组件中数据变化监听方法

Component({
observers:{
'监听的数据字段名':function(自定义数据字段变化后的参数名){
// 打印监听字段变化之后的值
console.log(自定义数据字段变化后的参数名)}}
})

3.微信开发者工具中全局搜索与局部搜索

    局部搜索,直接在打开的页面中Ctrl+f即为从当前打开页面搜索.
    全局搜索:点击搜索按钮,点击打开新的搜索编辑器,输入搜索内容,可以显示命中关键字的文件以及具体位置,ctrl+鼠标点击可以进入文件内部.搜索步骤参考下图:

4.Page对象与Componet对象组成

    page对象常用参数:

Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

    其余参数说明参考官方文档:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
    component对象常用参数:

Component({/*** 组件的数据列表*/data: {},/*** 组件的属性列表*/properties: {},/*** 组件的方法列表*/methods: {}}
})

    其余参数说明参考官方链接:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
    注意方法或是函数在两个对象中定义位置,page对象中方法定义与data节点同级,component对象中方法定义在methods节点中.

5.tabbar页面切换方法

 wx.switchTab({url: 'url'})

     一般用于方法函数中调用

6.组件中自定义函数的参数传递

参数传递:组件标签中添加内容如下:

data-属性名='{{属性值}}'

js中回调事件event中参数获取:

event.target.dataset.属性名

    注意:自定义属性不支持驼峰,js中获取的时候注意去驼峰.示例:

{5}}'>数字加5

但是实际解析的时候就不再是驼峰了

js中获取:

 addNum:function(event){this.setData({num:this.data.num+event.target.dataset.numinterval})}

7.mobx全局数据共享创建store对象实例

    创建前提是项目中导入mobx-miniprogram、mobx-miniprogram-bindings.
    详细操作参考:uni-app入门:全局数据共享方案之mobx
    store/store.js中创建store对象(observable用于创建store对象):

import {observable,action} from 'mobx-miniprogram'
// observable方法用于创建store对象(按照page对象添加),action方法用于定义共享的方法
// 创建store对象并导出的格式:export const store=observable({})
export const store=observable({
// 字段共享格式:字段名:字段值num:2,
// 方法共享格式:方法名:action(function函数)即action(function(){})updateNum:action(function(step){this.num+=step;})
})

    page对象中绑定store对象(createStoreBindings方法用于绑定storeBindings)

// 导入创建store绑定方法
import {createStoreBindings} from 'mobx-miniprogram-bindings'
// 导入store实例对象
import {store} from '../../store/store'Page({// 页面加载设置store绑定成员信息onLoad:function(){this.storeBindings=createStoreBindings(this,{store,fields:['num1','num2','sum12'], // 共享字段actions:['updateNum1']          // 共享方法})},// 页面卸载时清理处理onUnload:function(){this.storeBingds=this.destroyStoreBindings()},// 按钮点击时触发的方法addNum(e){// 执行修改num1方法并按照指定步长step进行相加this.updateNum1(e.target.dataset.step)}
})

    component中绑定store对象(指定behavior:storeBindingsBehavior,设置storeBindings)

// 导入behavior对象:storeBindingsBehavior
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
// 导入自定义store对象实例
import {store} from '../store/store'
Component({// 设置behavior数组behaviors:[storeBindingsBehavior],// 映射参数绑定,storeBindings属性,按照page对象格式添加,fields actions为子节点对象,key-value形式添加内容.key为组件信息,value为store信息storeBindings:{store,fields:{ // 组件字段:store字段num:()=>store.num   //方式一//num:(store)=>store.num  // 方式二//  num:'num'             .// 方式三},// 映射方法绑定actions:{   // 组件方法:store方法updateNum:'updateNum'}}})

8.()=>含义

    =>为es6语法用作函数简写,参考如下示例:

// 无参数
var f = () => 5;
// 等同于
var f = function () { return 5 };
===========================================
// 一个参数
var f = a = > b//等同于
var f = function(a){return b;  
}
====================================================
//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {return num1 + num2;
};