前言

最近想做小程序，于是有了这边文章，主要是记录遇到一些坑

一、数据篇

1.1、获取数据、赋值数据

// 获取
this.data.datalist

// 赋值数据
this.setData({
    datalist: list
  })

1.2、wx.navigateTo()多个参数传参方法

参数传递
1.数据需要转义为字符串才能通过参数传递 JSON.stringify()
2.多个参数传递，前面要加 & 符号
参数接收
接收时使用 JSON.parse() 方法将数据转换为 JavaScript 对象

let dataList = JSON.stringify(this.data.dataLists)
wx.navigateTo({
   url: '../details/details?dataList=' + dataList + '&violations=' + this.data.violations,
});

onLoad: function (options) {
  let list = JSON.parse(options.dataList)
  this.setData({
    datalist: list,
    violations: options.violations,  
  })
}

1.3、bindtap事件传递参数的方法

<view bindtap="goTo" data-index={{item.index}}>点击事件传参</view>

goTo (e) {
    // 传递的参数
    const index= e.currentTarget.dataset['index'];
}

二、父子传值，调用函数

• 父页面

<block wx:for="{{commentList}}" wx:for-item="commentItem" wx:key="{{index}}">
        <comment id = 'children' commentItem='{{commentItem}}' bind:twoLevelCommentBtn='twoLevelCommentBtnClick' binddemoTextChange="handleDemoTextChange"></comment>
    </block>
    <text>{{text}}</text>
    <button bindtap="handParentChird">父调子</button>

Page({
    data: {
        commentList: [
            '../../utils/img/index.jpeg',
            '../../utils/img/index2.jpeg',
            '../../utils/img/index.jpeg'
        ],
        text: ''
    },
    onLoad: function (options) {　　
    },
    // 子传父
    handleDemoTextChange(e){
        let text=e.detail.text;
        // 修改父级变量，子组件也会响应式的发生变化
        this.setData({
            text
        })
    },
    // 父调子
    handParentChird() {
        // 打印出来的就是children 组件的实例了
        this.selectComponent('#children').childrenFn()
    }
});

• 子页面

<view>
    dsdsd
    <image class='comment-comment' src='{{commentItem}}'
           data-author-name="111111">
    </image>
    <button bindtap="textChange">子调父</button>
</view>

Component({
    properties: {
        commentItem: {
            type: String,
            value: ''
        }
    },
    data: {},
    // 组件的方法列表
    methods: {
        // 父调子
        childrenFn(){
            console.log('我是子组件的方法')
        },
        // 子组件调用父页面、组件函数
        textChange() {
            /**
             点击事件触发的时候
             触发父组件中的自定义事件，同时传递数据给  父组件
             this.triggerEvent("父组件事件名称",传递的参数);
             */
            let text = "子组件修改父级的text" + this.data.commentItem
            // 触发 父组件的事件  自定义
            this.triggerEvent("demoTextChange", {text});
        }
    }
});

2.1、父传子值

<!--父页面-->
<comment id = 'children' commentItem='{{commentItem}}'></comment>

// 子js接收
    properties: {
        commentItem: {
            type: String,
            value: ''
        }
    },

2.2、父调用子函数

// 父组件
handParentChird() {
        // 打印出来的就是children 组件的实例了
        this.selectComponent('#children').childrenFn()
}
// 子组件
childrenFn(){
        console.log('我是子组件的方法')
},

2.3、子传父值、子调用父函数

   // 父函数
    handleDemoTextChange(e){
        let text=e.detail.text;
        // 修改父级变量，子组件也会响应式的发生变化
        this.setData({
            text
        })
    },
    // 子函数，第二个参数是参数
    textChange() {
        /**
         点击事件触发的时候
         触发父组件中的自定义事件，同时传递数据给  父组件
         this.triggerEvent("父组件事件名称",传递的参数);
         */
        let text = "子组件修改父级的text" + this.data.commentItem
        // 触发 父组件的事件  自定义
        this.triggerEvent("demoTextChange", {text});
    }