原生微信小程序 ​

// 注册页面
Page({
	// 响应式数据来源
	data: {
		name: 'Weixin'
	},
	// 事件
	changeName: function(e){
		// 修改数据，通知视图层改变数据
		this.setData({
			name: 'MINA'
		})
	}
})

// page构建页面实例
Page({
	data:{
		array: [1,2,3,4],
		view: 'APP',
	},
	handleSwitch(event){
		this.setData({
			view: "MINA"
		})
	}
})

Page({
	data:{
		color: "red"
	}
})

// 页面级组件的js  - 来自某音乐案例
// 涉及 
// -云函数 
// - 路由及路由参数option 
// - 组件生命周期 
// - storage异步读取 
// - 跳转页面

// // 云函数初始化
// wx.cloud.init({
//   env: 'cloud1-0g174gz063995863',
//   traceUser: true,
// })

// pages/musicList/musicList.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
		listId: '',
		musicDetail: {},
		selectedId: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
		// console.log(options); 路由传递过来的参数
		// console.log(options.id);
		this.setData({
			listId: options.id
		})
		// 根据id，获取歌曲的细节。
		// 调用云函数
		wx.cloud.callFunction({
			// 要调用的云函数名称
			name: 'getMusicDetail',
			// 传递给云函数的event参数
			data: {
				id: options.id
			}
		}).then(res => {
			// console.log(res.result);
			this.setData({
				musicDetail: res.result
			})
		})
  },
	onSelected(e){
		wx.setStorageSync('musicDetail', this.data.musicDetail)
		this.setData({
			selectedId: e.currentTarget.dataset.id
		})
		// 跳转页面到歌曲播放页
		// 传递id和index
		let url = '/pages/player/player?id='+this.data.selectedId + '&index=' + e.currentTarget.dataset.index
		wx.navigateTo({
			url: url,
		})
	},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {}
})

// 只显示相关的dataList和handDel
handAdd(e){
	const data = this.data;
	const dataList = this.data.dataList;
	dataList.push(e.detail);
	this.setData({
		...data,
		dataList
	})
},

// components/xmain/xmain.js
/*
涉及内容
- 触发提交父组件事件 和 传递数据给父组件
this.triggerEvent('xx',data)
- 接收父组件传递过来的数据
properties
*/
Component({
  /**
   * 组件的属性列表
   */
  properties: {
		dataList:{
			type: Array,
			value: []
		},
  },

  /**
   * 组件的初始数据
   */
  data: {
		editVal: ''
  },

  /**
   * 组件的方法列表
   */
  methods: {
		handDel(e){
			// 触发父级的删除
			this.triggerEvent('handDel',e.currentTarget.dataset.id)
			wx.showToast({
				title: '删除成功',
			})
		},
		handEdit(e){
			let item = e.currentTarget.dataset.item
			if(item.disabled){
				// 编辑态回显
				this.setData({
					editVal: e.currentTarget.dataset.item.val
				})
				this.triggerEvent('handUpdate',[e.currentTarget.dataset.id,this.data.editVal])
				return;
			}
			// 更新态
			this.triggerEvent('handUpdate',[e.currentTarget.dataset.id,e.currentTarget.dataset.val])
			wx.showToast({
				title: '更新成功',
			})
			// let [id,val] = e.currentTarget.dataset;
			// 编辑态回显，确认态更新，触发父级的更新
		},
		handleVal(e){
			// console.log(e)
			// console.log(e.detail.value);
			this.setData({
				editVal: e.detail.value
			})
		}
  }
})