欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

微信小程序01

程序员文章站 2022-10-07 20:00:55
微信小程序01一.项目结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接wxml —> android中的xmljs —> android中的javawxss —> css样式文件json —> 下拉刷新开关配置、外部组件引用配置二.生命周期onLoad: 当前页面首次加载时调用onShow: 当前页面可见时调用onReady: 监听初次渲染完成时调用onHide: 页面隐藏时调用onUnload: 页面卸载时调用onPullDown...

微信小程序01

一.项目结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接
微信小程序01

wxml —> android中的xml
js —> android中的java
wxss —> css样式文件
json —> 下拉刷新开关配置、外部组件引用配置

二.生命周期

onLoad: 当前页面首次加载时调用
onShow: 当前页面可见时调用
onReady: 监听初次渲染完成时调用
onHide: 页面隐藏时调用
onUnload: 页面卸载时调用
onPullDownRefresh: 页面触发下拉时调用
onReachBottom: 页面滑动到达底部时调用
onShareAppMessage: 用户点击转发小程序时调用,只有在页面中配置了次函数,才会有转发按钮
onPageScroll: 页面滚动时调用
onTabItemTap: 点击底栏tab时调用

三.数据绑定

数据绑定使用(双大括号)将变量包起来

  1. 作用于文本内容

    <view>{{message}}</view>
    
    Page({
      data: {
        message: 'abcdefg'
      }
    })
    
  2. 作用于标签属性

    <view class="{{className}}">文本</view>
    
    .flex-r {
        display: flex;
        flex-direction: row;
    }
    
    Page({
      data: {
        className: 'flex-r'
      }
    })
    

本文地址:https://blog.csdn.net/gzx110304/article/details/107496510