微信小程序基础入门

文章目录

• [1. 微信小程序的生命周期](#1. 微信小程序的生命周期)
• [2.微信小程序底部'tabBar' 的配置](#2.微信小程序底部'tabBar' 的配置)
• [3. 微信小程序顶部导航栏配置](#3. 微信小程序顶部导航栏配置)
• • • [3.1 公共导航栏 配置](#3.1 公共导航栏 配置)
    • [3.2 私有导航栏设置](#3.2 私有导航栏设置)
• [4. 微信小程序的常用组件](#4. 微信小程序的常用组件)

1. 微信小程序的生命周期

	
  //生命周期函数--监听页面加载

  onLoad(options) 

  
  
   //生命周期函数--监听页面初次渲染完成
   onReady() 

  

 
  //生命周期函数--监听页面显示
   
  onShow() {

  },

  
   //生命周期函数--监听页面隐藏
   
  onHide() {

  },

 
   //生命周期函数--监听页面卸载
  
  onUnload() {

  },

  
   // 页面相关事件处理函数--监听用户下拉动作
   
  onPullDownRefresh() {

  },

  //页面上拉触底事件的处理函数
   
  onReachBottom() {

  },

  //用户点击右上角分享
   
  onShareAppMessage() {

  }
})
	

2.微信小程序底部'tabBar' 的配置

 {
  // 定义底部导航栏的配置
  "tabBar": {
    // 定义导航栏中的按钮列表
    "list": [
      {
        // 按钮文字
        "text": "首页",
        // 按钮对应的页面路径
        "pagePath": "pages/index/index",
        // 按钮未选中时的图标路径
        "iconPath": "static/image/home.png",
        // 按钮选中时的图标路径
        "selectedIconPath": "static/image/home-active.png"
      },
      {
        // 按钮文字
        "text": "我的",
        // 按钮对应的页面路径
        "pagePath": "pages/my/my",
        // 按钮未选中时的图标路径
        "iconPath": "static/image/my.png",
        // 按钮选中时的图标路径
        "selectedIconPath": "static/image/my-active.png"
      }
    ]
  }
}

3. 微信小程序顶部导航栏配置

3.1 公共导航栏 配置

// 窗口配置
  "window": {
    // 导航栏文字样式
    "navigationBarTextStyle": "black",
    // 导航栏标题文本
    "navigationBarTitleText": "养军博客",
    // 导航栏背景颜色
    "navigationBarBackgroundColor": "#008c8c"
  }

3.2 私有导航栏设置

// 导航栏背景颜色
  "navigationBarBackgroundColor": "",
  // 导航栏标题文本
  "navigationBarTitleText": "",
  // 导航栏文字样式
  "navigationBarTextStyle": "",
  // 使用的组件
  "usingComponents": {
    // 在这里添加组件
  }

注意

在配置 顶部导航栏时 避免设置

"navigationStyle": "custom"

4. 微信小程序的常用组件

<!--view组件 对比 html div,p等组件-->
<view class="contenct">
</view>
<!--text组件 对比 html span -->
<text>这是一段文字</text>
<!--image组件 对比 html img-->
<image></image>
<!-- 按钮组件 -->
<button
  type="default"  <!-- 默认按钮样式 -->
  plain           <!-- 是否为简单按钮，如果为 true，按钮将显示为简单的风格 -->
></button>

<button
  type="primary"  <!-- 主要按钮样式 -->
  plain           <!-- 是否为简单按钮，如果为 true，按钮将显示为简单的风格 -->
></button>

<button
  type="warn"     <!-- 警告按钮样式 -->
  plain           <!-- 是否为简单按钮，如果为 true，按钮将显示为简单的风格 -->
></button>


<!-- swiper(轮播图)组件 在html中可以用js完成-->
<swiper class="swiper-container" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <swiper-item class="swiper-item">
    <image src="{{imageUrl1}}" mode="aspectFit" class="swiper-image"></image>
  </swiper-item>
  <swiper-item class="swiper-item">
    <image src="{{imageUrl2}}" mode="aspectFit" class="swiper-image"></image>
  </swiper-item>
  <swiper-item class="swiper-item">
    <image src="{{imageUrl3}}" mode="aspectFit" class="swiper-image"></image>
  </swiper-item>
</swiper>

<!-- scroll-view组件 在html中可以用js完成-->

<scroll-view
  scroll-x                   <!-- 允许横向滚动 -->
  scroll-y                   <!-- 允许纵向滚动 -->
  scroll-top="50"            <!-- 设置滚动区域的顶部位置 -->
  scroll-left="50"           <!-- 设置滚动区域的左侧位置 -->
  scroll-into-view="item1"    <!-- 滚动到指定的元素（通过元素的 ID） -->
  scroll-with-animation     <!-- 允许滚动时使用动画效果 -->
  enable-back-to-top        <!-- 当滚动到顶部时，显示返回顶部的按钮 -->
  show-scrollbar            <!-- 显示滚动条 -->
>
  <view id="item1" class="scroll-view-item">内容1</view>
  <view id="item2" class="scroll-view-item">内容2</view>
  <view id="item3" class="scroll-view-item">内容3</view>
  <!-- 在这里添加更多的内容 -->
</scroll-view>

注意：新手博客 如有错误 请提示 如有侵权请发邮箱 [email protected]

感谢 支持