白店小二的小程序知识

最新推荐文章于 2025-05-26 16:38:55 发布

白店小二

最新推荐文章于 2025-05-26 16:38:55 发布

阅读量255

点赞数 3

文章标签：小程序

本文链接：https://blog.youkuaiyun.com/liyangyang1998/article/details/107635180

版权

本文介绍了小程序的基础知识，包括默认宽度、事件绑定、循环与条件判断的使用，以及数据管理与页面跳转的方法。此外，还讲解了消息提示框的实现以及自定义父子组件间的数据传递技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、小程序默认宽750rpx。
2、绑定事件

<view class="container">
  <button data-chuancan="只有这样才能传参，不能在事件后用括号传参" bindtap="dding"></button>
</view>`

3、循环和条件的写法

 <view wx:if="{{tof}}">
  必须要用双花括号包裹参数，不然就会识别成字符串
  </view>

循环当前项变量默认为item，修改默认方法如下，下标默认index，修改放法一致。

 <view wx:for="{{looplist}}" wx:for-item="itm">
  {{itm}}
  </view>

4、data
页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。
修改data中的数据

  data: {
    tof: true,
    looplist:[
      "haha",
      {
        name:"xiaoming",
        age:18
      },
      "cry"
    ]
  },
   onLoad: function () {
   this.setData({
     tof:false
   })
  }

5、页面跳转及传参
A页面跳B页面
A

gourl(){
    wx.navigateTo({
      url: '../list/list',
      success:function(res){
        res.eventChannel.emit('goprop',{
          news: "哈哈，我跳转到了"
        })
      }
    })
  },

  onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('goprop', function(data) {
      console.log(data,"goprop")
    })
  },

6、消息提示框

	wx.showToast({
        title:"哈哈，这是一个提示消息"
    })

7、自定义父子组件传参
子传父
子
子组件可通过triggerEvent，在第一个参数里给父组件提供一个绑定事件的事件名，同时在第二个参数写入需要传递的参数

<text bindtap="hi">点击出现 {{hi}}</text>

	properties: {
    	hi:{
      		type:String
    	}
  	},
 	methods: {
    	hi:function(){
      		this.triggerEvent("hi",{ "hihi": "hihi"})
    	}
  	}

父
父组件通过触发“绑定子组件定义的事件名hi的事件”bindhi，然后在回调函数bindhello中，通过事件对象e的e.detail可得到子组件传的参数

<my-hi bindhi="bindhello" hi="{{hello}}"></my-hi>

	data: {
    	hello:""
  	},
  	methods: {
    	bindhello:function(e){
      		console.log(e.detail,"子组件传回的数据")
      		this.setData({
        		hello: e.detail.hihi
      		})
    	}
  	}

父传子
父组件在调用子组件时，自定义一个属性，通过给属性赋值传参，然后子组件在properties里接收参数

<my-hi bindhi="bindhello" hi="{{hello}}"></my-hi>

	properties: {
    	hi:{
     	 type:String
    	}
  	},