#微信小程序：微信小程序常见的配置&传值

程序员xiaolibao

已于 2024-03-24 21:10:55 修改

阅读量1.1k

点赞数 11

分类专栏： #微信小程序文章标签：微信小程序

于 2024-03-20 22:58:06 首次发布

前端xiaolibao

本文链接：https://blog.csdn.net/weixin_47075554/article/details/136891294

版权

#微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文概述了微信小程序的开发结构，包括app.js、app.json、样式文件和页面组件。重点介绍了页面生命周期函数如onLoad、onShow等，以及如何进行数据传递和页面间跳转。同时，讨论了包大小限制，特别是主包和分包的尺寸要求。

摘要由CSDN通过智能技术生成

微信小程序

app.js

设置全局的基础数据

通过 let app = getApp() 获取里面的数据

app.json

设置tab,注册页面的路由

app.wxss

公共的样式，引入iconfont

project.config.json

项目配置文件，用的最多就是配置是否开启https校验

小程序的传值

添加id
```
 console.log(e.currentTarget.id)   
```
获取全局getApp
在标签上data-*** -------通过e.currentTarget.dataset获取值

页面跳转传值

  // 传递参数
  goLog() {
    wx.navigateTo({
      url: '/pages/logs/logs?id=123123&name=log',
    })
}
// 收参数
  onLoad(options) {
      console.log('log',options);
      
  }

父组件向子组件传值

  <w-child father='fuqin'/>
    
    
    // 子组件接收值
  Component({
  /**
   * 组件的属性列表
   */
  properties: {
    father: {
        type: String
    }
  },

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

  /**
   * 组件的方法列表
   */
  methods: {
    getComVa() {
        this.setData({
            msg:'修改组件的默认值'
        })
    }

  }
})

子组件传递给父组件 triggerEvent bind:changeNaviIndex val.detail

<button bind:tap="onChangeAnchor">子组件传值给父</button>
 onChangeAnchor() {
        this.triggerEvent('changeNaviIndex', '儿子的')
 }


父接收
 <w-child father='fuqin' bind:changeNaviIndex="onGetIndex"/>
  onGetIndex(val) {
        console.log(111,val.detail);
    }

请谈谈小程序的生命周期函数

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShow()页面显示/切入前台时候触发，一般用来发送数据请求
onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图层进行交互
onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发，如redirectTO或navigateBack到其他页面时

下拉刷新 “enablePullDownRefresh”: true

"window": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程序",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#888",
    "enablePullDownRefresh": true
  },