前期学习小程序需要注意的几个点

1、js中获取data中的属性值

在小程序中，在写逻辑时获取data中的数据根我们Vue中类似，不同的是Vue中是this.属性名，而我们小程序需要使用this.data.属性名来获取。若：

Page({
  data: { list: '数据' },
  add() {
    console.log(this.data.list);
  }
})

2、js修改data中的属性值

在小程序中，写逻辑时我们经常需要修改data中属性的值，但我们用修改完后发现数据改变了，但页面没有改变，所以我们在改变data中属性的值时需要使用this.setData()方法。

Page({
  data: { list: '数据',arr:[] },
  btn(){
    this.setData({
      list:'修改后的数据'
    })
    // 这是我们改变简单数据类型的方法。如果想要改变复杂数据类型
    // 如数组 添加的话可以使用
    let arr = this.data.arr;  // 首先获取一下数据
    arr.push("你要添加的数据");
    this.setData({
      arr:arr // 重新赋值就可以了
    })
    // 添加的时候我们还有一种更简单的方法，我们可以使用ES6的展开运算符
    this.setData({
      arr:[...this.data.arr,"要添加的数据"] // 先展开这个数组，然后在结尾添加一条数据
    })
  }
})

3、传参的问题

在页面渲染出数据后，有些数据我们会给他一个事件，但是我们事件无法传参。所以这时我们可以使用自定义属性，data-index=“这里绑定我们要获取的数据”;自定义属性可以定义多个

wxml代码

<block wx:for="{{list}}" wx:key="*this">
  <view data-index="{{index}}" bindtap="del">
  </view>
</block>

js代码

del(e) {
   console.log(e.currentTarget.dataset); //dataset 是一个对象，其中包含了当前节点所有绑定的自定义属性的值
    });

4、input的双向数据绑定

在Vue中我们可以使用v-model来进行双向数据绑定，在小程序中也有一个类似功能的，wx:model。对于低版本的开发者工具可能不支持，那么我们也可以这样写。
具体实现大概就是：给输入框一个input事件，每当他的value发生改变时，就会触发这个input事件，我们在js中使用input的事件对象获取到当前输入框的value值，在赋值给一个变量。然后我们把这个变量绑定给输入框的value
wxml

<input type="text" bindinput="change" value="{{value}}" /> // bindinput 相当于我们的input事件

js

Page({
  data: { value:'' }, 
  change(e) {
    console.log(e); 
    this.setData({
      value: e.detail.value // 这里可以获取到输入框的value值
    })
  },
})

5、声明周期函数

在我们小程序中，分为2种声明周期函数，
1、全局的生命周期函数
2、页面级别的生命周期函数
全局的生命周期函数我们常用的有:写在根目录下的app.js文件内

App({
	onLaunch: function (options) {}, 			     // 小程序第一次加载时触发
	onShow: function () {},							 // 小程序显示触发 如：我们小程序被加入后台。再次切回来触发
	onHide: function () {},							 // 小程序被加入后台触发
})

页面的生命周期函数如我们常用的有:写在当前页面的js内

Page({
  onLoad: function (options) {				// 页面首次加载时触发
  },
  onReady: function () {					// 页面第一次渲染完成触发
  },
  onShow: function () {						// 当前页面显示时触发
  },
  onHide: function () {						// 当前页面隐藏时触发
  },
})

6、小程序父传子

首先写好子组件：在根目录下创建一个components文件夹，然后右击这个新建的文件夹，选择新建component，就会自动wxml、wxss、js、json这4个后缀名的文件，然后我们在打开js文件，可以看到一个properties对象的一个对象，这个对象里面就写父组件需要传过来的数据。

 properties: {
   	value:{			// 我接收一个value数据
		type:String,		// type 属性可以规定传过来的必须是什么类型
		value:'默认值'   // value 可以设置一个默认值，如果没有传入就使用这个默认值
		// 一般我们就会用到这2个属性
	}
  },

然后在我们父组件中json文件里

{
  "usingComponents": {
    "my-swiper":"/componnets/swiper/swiper", 	
    // key 自定义名字		value  我们子组件的路径
  },
}

使用

  <my-swiper value="{{swiper}}"></my-swiper>
  // 直接作为标签使用就可以，父传子就是在子组件的标签上定义一个自定义属性。
  // 这个自定义属性名必须根我们子组件接收的名字一样 值就是我们传的数据

7、路由跳转

路由跳转我们常用的一般有2种方式。
7-1、js跳转页面
navigateTo （有返回键，不可以跳转到tabBar页面）

//保留当前页面，跳转到应用内的某个页面
wx.navigateTo({
  url: '/pages/detail/detail' // 路由地址
})

switchTab （没有返回键，只能跳转到tabBar页面，不可以携带参数）

wx.switchTab({  
      url: `/pages/detail/detail`, // 路由地址
    })

reLaunch (跳转任意页面， 没有返回， 有 首页 按钮)

wx.reLaunch({
      url: '/pages/detail/detail'  // 路由地址
})

redirectTo ( 只可以跳转tabBar 页面， 没有返回，但有首页按钮)

   wx.redirectTo({
       url: `/pages/detail/detail`, // 路由地址
    })

navigateBack (应用在目标页面， delta值为1 ，表示跳转上一页，2表示跳两级)

  wx.navigateBack({
       delta:1 // 返回上 n 个页面
    })

7-2、navigator组件实现

<navigator url = "/pages/details/details">跳转到新页面</navigator>

<navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>

<navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>

8、路由传参

我们很多时候需要用到路由传参。
我们就使用navigateTo举一个例子。

wx.navigateTo({
  url: '/pages/detail/detail?id=1'
  // 我们跳转页面的时候可以在路由地址后面拼接上 ?id=1&msg=参数
})

我们在另一个页面接收

onLoad:function(options){
	// 这个options 参数中是我们传过来的数据
	// 当然，我们在其他钩子函数中，也可以使用this.options 来读取到我们的参数
}

注意：我们传递参数只能传入字符串的形式，如果我们传入复杂数据类型，需要先转换为字符串。

JSON.stringify()// 转为字符串
JSON.parse()    // 转换为原有的类型

如有不s解之处，请留言评论
如有更好的方法，请提出。
持续更新中…