学完这几个核心点，你也能开发小程序

核心点

1. 如何传参
2. 如何操作数据
3. 如何跳转页面、返回
4. 如何定义函数
5. 如何发送请求并获取数据
6. 如何绑定事件
7. 如何渲染数据列表
8. 如何进行条件渲染

1.如何传参

父向子

//触发点击事件  点击跳转传参
wx.navigateTo({
    1.父向子传参  将参数携带在 url
    url: '../addTask/addTask/:id',
})

2.子组件接收参数
//生命周期函数
onLoad(options) {
    //options 接收的就是父组件传递的参数
	console.log(options)
}

子向父传参

1.通过事件绑定和触发事件
父组件：
wx.navigateTo({
    url: '../addTask/addTask',
    events: {
        //监听事件
        reveiveVal(val) {
            //val 就是子组件向父组件传递的参数
            console.log(val)
        }
    }
})

子组件：
addTask() {
    const eventChannel = this.getOpenerEventChannel();
    //触发事件
    eventChannel.emit('reveiveVal', this.data.inpVal);
    wx.navigateBack()
},

函数传参

1.小程序是不允许函数携带参数的
所以我们传递参数是通过自定义属性 data-n="参数"

2.接收参数
该参数会被保存在事件对象 e 上
通过 e.currentTarget.dataset 获取数据

使用本地存储

//不需要转换  存进去啥就是啥
wx.setStorageSync('变量名',数据) //存储
wx.getStorageSync('变量名') //获取

全局数据

1.在 app.json 里面定义 globalData 属性
形如：
globalData:{
    baseImgUrl:'图片公共路径'
}

2.使用
const app = getApp()
app.globalData.baseImgUrl  //获取

2.如何操作数据

.js 文件中定义

1.定义数据
Page({
  data: {
    //这里的数据可以直接在页面中使用
    inpVal: ''  //定义数据
  },
})

2.修改数据
//进行数据替换
this.setData({
    inpVal:'新的数据'
})

3.获取数据
this.data.inpVal

3.如何跳转页面(最常用)

1.跳转目标页面
wx.navigateTo({
    url: '../addTask/addTask',
})
2.跳回上一个页面
wx.navigateBack({})

4.如何定义函数

.js中定义

Page({
    data:{},
    //定义函数和 data 数据定义同级别
    addTask() {}, 
    inputValue(e) {},
})

5.如何发送请求并获取数据

wx.request({
  url: '请求地址',
  method: '请求方法',
  data: '请求体携带的数据',
  header: '请求头携带的参数'
  success: function(res) {
    // 请求成功，处理返回的数据
    console.log(res.data);
  },
  fail: function(err) {
    // 请求失败，处理错误信息
    console.error(err);
  }
});

6.如何绑定事件（常用）

bindtap：点击事件
bindinput：文本框的输入事件
bindchange：状态改变时触发

7.如何渲染列表

wx:for="{{数据列表}}" wx:key="{{唯一标识}}"
//直接在当前 Dom 结构中使用 item index（默认）
item:每一项  修改名字   wx:for-item="subItem"
index：下标			wx:for-index="subIndex"
示例：
<div wx:for="{{dataList}}" wx:key='{{item.id}}'>
    <div>{{item.name}}----{{index}}</div>
//多层数据
	<div wx:for="{{item.subList}}" wx:for-		item="subItem">
    	<div>{{subItem.name}}</div>
	</div>
</div>

8.如何进行条件渲染

wx:if="{{goodsList.length > 0}}"
//我认为都用 wx:if 即可
//当数据列表的长度 > 0 的时候展示