微信小程序基础入门

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>
<!-- 按钮组件 -->
<buttontype="default"  <!-- 默认按钮样式 -->plain           <!-- 是否为简单按钮，如果为 true，按钮将显示为简单的风格 -->
></button><buttontype="primary"  <!-- 主要按钮样式 -->plain           <!-- 是否为简单按钮，如果为 true，按钮将显示为简单的风格 -->
></button><buttontype="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-viewscroll-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>

注意：新手博客 如有错误 请提示 如有侵权请发邮箱 1413229255@qq.com
感谢 支持