微信小程序开发教程

于 2024-09-27 15:56:47 发布
阅读量995 收藏 19
点赞数 21
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/freellf/article/details/136220902
版权

小程序的宿主环境 - 组件

1.小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为了9大类，分别是：

①视图窗口
②基础内容
③表单组件
④导航组件
⑤媒体组件
⑥map地图组件
⑦canvas画面组件
⑧开放能力
⑨无障碍访问
2. 常用的视图容器类组件
①view
● 普通视图区域
● 类似于HTML中的div,是一个块级元素
● 常用来实现页面的布局效果
②scroll-view
● 可滚动的视图区域
● 常用来实现滚动列表效果
③swiper和swiper-item
● 轮播图容器组件和轮播图item组件
3.view组件的基本使用
实现flex横向布局效果：
app.json

 "pages": [
    "pages/view/view"
  ],

view.wxml

<view class="container1">
    <view>A</view>
    <view>B</view>
    <view>C</view>
</view>

view.wxss

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {
  background-color:lightgreen;
}
.container1 view:nth-child(2) {
  background-color:lightskyblue;
}
.container1 view:nth-child(3) {
  background-color:lightcoral;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

4 scroll-view组件的基本使用
实现纵向滚动效果
scrollview.wxml

<!--pages/scrollview/scrollview.wxml-->
<!-- scroll-y 属性： 允许纵向滚动-->
<!-- scroll-x 属性： 允许横向滚动-->
<!-- 注意： 使用竖向滚动时，必须给scroll-view 一个固定高度-->
<scroll-view class="container1" scroll-y="true">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/scrollview.wxss

.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}

.container1 view:nth-child(2) {
  background-color: lightskyblue;
}

.container1 view:nth-child(3) {
  background-color: lightcoral;
}

.container1 {
  border: 1px solid red;
  /* scroll-view 固定高度 */
  height: 120px;
  width: 100px;
}

5.swiper和swiper-item组件的基本使用
实现轮播图效果
swiper.wxml

<text>pages/swiper/swiper.wxml</text>
<!--轮播图区域-->
<!--indicator-dots 属性： 显示面板指示点-->
<swiper class="cwiper-container" indicator-dots="true" indicator-color="witer" indicator-active-color="gray" autoplay interal="3000" circular>
  <!--第一项-->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!--第二项-->
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <!--第三项-->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

swiper.wxss

/* pages/swiper/swiper.wxss */
.swiper-container {
  height: 150px;   /*轮播图容器的高度*/
}

.item{
  height: 100px;
  line-height: 100px;
  text-align: center;
}

swiper-item:nth-child(1) .item{
  background-color: lightgreen;
}

swiper-item:nth-child(2) .item{
  background-color: lightskyblue;
}

swiper-item:nth-child(3) .item{
  background-color:lightcoral;
}

6.swiper组件的常用属性
在这里插入图片描述
参见： https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

  • 常用的基础内容组件
    ① text
    ● 文本组件
    ● 类似于HTML中的span标签，是一个行内元素
    ② rich-text
    ● 富文本组件
    ● 支持把HTML字符串渲染为WXML结构
  • text组件的基本使用
    通过text组件的selectable属性，实现长按选中文本内容的效果：
    text.wxml
<!--pages/text/text.wxml-->
<text>pages/text/text.wxml</text>
<!--常用的基础内容组件text和rich-text的用法 -->
<text>pages/text/text.wxml</text>
<view>
  手机号支持长按选中效果
  <text selectable="true">13992845134</text>
</view>

9、rich-text组件的基本使用
通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构。
text.wxml

<!--rich-text  通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构-->
<!--应用场景：商品详细页的结构渲染-->
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

10、其它常用组件
① button
● 按钮组件
● 功能比 HTML 中的 button 按钮丰富
● 通过 open-type 属性可以调用微信提供的各种功能( 客服、转发、获取用户授权、获取用户信息等)
② image
● 图片组件
● image组件默认宽度约300px, 高度约240px
③ navigator
● 页面导航组件
● 类似于HTML中的 a 链接
11、button按钮的基本使用
button.wxml

<!--pages/button/button.wxml-->
<text>pages/button/button.wxml</text>
button
按钮组件
功能比HTML中的Button按钮丰富
通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
<view>~~~~~~~通过type指定按钮类型~~~~~~~~~~~</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<view>~~~~~~size="mini" 小尺寸按钮~~~~~~~~~~</view>
<button size="mini">默认按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button>
<view>~~~~~~~~plain 镂空按钮~~~~~~~~</view>
<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>

12、image组件的基本使用
image.wxml

<!--pages/image/image.wxml-->
<text>pages/image/image.wxml</text>
<text>
  image
  图片组件
  image 组件默认宽度约 300px、高度约240px
</text>
<!-- 1. 空图片-->
<image></image>
<!-- 2. 使用src指定图片路径 -->
<image src="/image/22022312542M617-0-lp.jpg" mode="aspectFill"></image>
<text>
</text>
<text>
  navigator
</text>

image.wxss

/* pages/image/image.wxss */
image {
  /* 通过边框线证明image有默认的宽和高 */
  border: 1px solid red;
}

13、image组件的mode属性
image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下:
在这里插入图片描述
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
小程序的宿主环境 - API
1.小程序API概述
小程序中的API是由宿主环境提供的，通过这些丰富的小程序API,开发者可以方便的调用微信提供的能力，
例如：获取用户信息，本地存储，支付功能等。
2.小程序API的3大分类
小程序官方把API分为了如下3大类:
① 事件监听API
特点： 以on开头，用来监听某些事件的触发
​ 举例： wx.onWindowResize(function callback)监听窗口尺寸变化的事件
② 同步API
​ 特点1：以sync结尾的API都是同步API
​ 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行错会抛出异常
​ 举例：wx.setStorageSync(‘key’, ‘value’) 向本地存储中写入内容
③ 异步API
​ 特点：类似于Jquery中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
​ 举例：wx.request()发起网络数据请求，通过success回调函数接收数据
协同工作和发布
协同工作和发布 - 协同工作
1.了解权限管理需求
同一小程序项目，一般会有不同岗位，不同角色的员工同时参与设计与开发。
对不同岗位、不同角色的员工的权限进行边界的划分，使他们能免高效的进行协同工作。
2.了解项目成员的组织结构
3.小程序的开发流程
提出需求 -> 设计 -> 开发 -> 体验 -> 测试 -> 发布
协同工作和发布 - 小程序成员管理
1.成员管理的两个方面
小程序成员管理体现在管理员对小程序项目成员及体验成员的管理:
① 项目成员：
● 表示参与小程序开发、运营的成员
● 可登录小程序管理后台
● 管理员可以添加、删除项目成员，并设置项目成员的角色
② 体验成员：
● 表示参与小程序内测体验的成员
● 可使用体验版小程序，但不属于项目成员
● 管理员及项目成员均可添加、删除体验成员
2.不同项目成员对应的权限
3.开发者的权限说明
① 开发者权限：可使用小程序开发者工具及对小程序的功能进行代码开始
②体验者权限：可使用体验版小程序
③登录权限：可登录小程序管理后台，无需管理员确认
④开发设置：设置小程序服务器域名、消息推送及扫描普通链接二维码打开小程序
⑤腾讯云管理：云开发相关设置
4.添加项目成员和体验成员
协同工作和发布 - 小程序的版本
1.软件开发过程中的不同版本
①开发者编写代码的同时，对项目代码进行自测(开发版本)
②直到程序达到一个稳定可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试
③最后修复完程序的Bug后，发布正式版供处部用户使用
2.小程序的版本
小程序版本
开发版本—体验版本–审核中的版本–线上版本
小程序发布上线：上传代码>提交审核>发布
协同工作和发布 - 发布上线
1.小程序发布上线的整体步骤
一个小程序的发布上线，一般要经过上传代码 -> 提交审核 -> 发布 这三个步骤。
2.上传代码
① 点击开发者工具顶部工具栏中的"上传"按钮
②填写版本号以及项目备注
3.在后台查看上传之后的版本
登录小程序管理后台 -> 管理 -> 版本管理 ->开发版本，即可查看刚才提交上传的版本。
4.提交审核
● 为什么需要提交审核：为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过腾讯官方审核的。
● 提交审核的方式：在开发版本的列表中，点击"提交审核"按钮之后，按照页面提示填写相关的信息，就能把小程序提交到腾讯官方进行审核。
5.发布
审核通过之后，管理员的微信中会收到小程序通过审核的通知，此时在审核版本的列表中，点击“发布”按钮之后，即可把"审核通过"的版本发布为"线上版本"，供所有小程序用户访问和使用。
6.基于小程序进行推广
相对于普通二维码来说，小程序码的优势如下：
①在样式上更具辨识度和视觉冲击力
②能够更加清楚地树立小程序的品牌形象
③可以帮助开发者更好地推广小程序
获取小程序码的5个步骤：
登录小程序管理后台 -> 设置 -> 基本设置 -> 基本信息 -> 小程序码及线下物料下载
协同工作和发布 - 运营数据
1.查看小程序运营数据的两种方式
① 在“小程序后台”查看
1. 登录小程序管理后台
2. 点击侧边栏的“统计”
3. 点击相应的tabl可以看到相关的数据
② 使用"小程序数据助手"查看
1.打开微信
2.搜索“小程序数据助手”
3.查看已发布的小程序相关的数据

WXML模板语法
WXSS模板样式
全局配置
页面配置
网络数据请求
案例 - 本地生活首页
小程序 - 模板与配置

WXML模板语法
WXML模板语法 - 数据绑定
1.数据绑定的基本原则
①在data中定义数据
②在WXML中使用数据
2.在data中定义页面的数据
在页面对应的 .js 文件中，把数据定义到data对象中即可.
databind.js

// pages/databind/databind.js
Page({

  /**
 - 页面的初始数据
   */
  data: {
      info: "微信小程序",
      imgSrc: "https://img2.baidu.com/it/u=3215730428,3406193656&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      randomNum1: Math.random() * 10, //生成10以内的随机数
      randomNum: Math.random().toFixed(2)   //生成一个带两位小数的随机数，例如0.34
  },
  ...
  )
  1. Mustache 语法的格式
    把data中的数据绑定到页面中渲染，使用 Mustache 语法 (双大括号) 将变量包起来即可。语法格式为： {{ 要绑定的数据名称 }}
    databind.wxml
<!--pages/databind/databind.wxml-->
<text>pages/databind/databind.wxml</text>
<text>
  数据绑定的基本原则
    在data中定义数据
    在WXML使用数据 
    在data中的数据绑定到页面中渲染，使用Mustache语法(双大括号)将变量包起来即可
</text>

4、Mustache语法的应用场景
绑定内容
绑定属性
运算(三元运算、算法运算等)

5、动态绑定内容

<view>{{info}}</view>

6、动态绑定属性

<image src="{{imgSrc}}" mode="aspectFull"></image>

7、三元运算

<view>{{randomNum1 >= 5 ? '随机数字大于或等于5': '随机数字小于5'}}</view>
<view>{{randomNum1}}</view>

8、算术运算

<view>{{randomNum * 100}}</view>

WXML模板语法 - 事件绑定
1.什么是事件
事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
2.小程序中常用的事件
tap bindtap或bind:tap 手指触摸后马上离开，类似于HTML中的click事件
input bindinput或bind:input 文本框的输入事件
change bindchange或bind:change 状态改变时触发
3. 事件对象的属性列表
当事件回调触发的时候，会收到一个事件对象event, 它的详细属性如下表所示：
type String 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外的信息
touches Array 触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches Array 触摸事件，当前变化的触摸点信息的数组
4. target和currentTarget的区别
target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。如：

    <view class="outer-view" bind:tap="outerHandler">
        <button type="primary">按钮</button>
   </view>

点击内部的按钮时，点事事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。
此时，对于外层的view来说：
  • e.target指向的是触发事件的源头组件，因此, e.target是内部的按钮组件
  • e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view组件
  1. bingtap 的语法格式
    在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
    ①通过bindtap, 可以为组件绑定tap触摸事件，语法如下：
	<button type="primary" bind:tap="btnTapHandler">按钮</button>

②在页面的 .js 文件中定义对应的事件处理函数，事件参数通过形参 event （一般简写成 e）来接收:

    /**
  	* 定义按钮的事件处理函数
  	*/
	Page({
		btnTapHandler(e) {
   			console.log(e)    //事件参数对象
 		},
	})
  1. 在事件处理函数中为data中的数据赋值
    通过调用 this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下:
Page({
  data: {
    count: 0
  },
  //+1按钮的点击事件处理函数
  CountChange() {
    this.setData(
      {
        count: this.data.count + 1
      }
    )
  },

<button type="primary" bind:tap="CountChange">+1</button>
  1. 事件传参
    小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。
    可以为组件提供data-自定义属性传参， 其中代表的是参数的名字，
    最终：
    info会被解析为参数的名字
    数值2会被解析为参数的值
<button type="primary" bind:tap="bntTap2" data-info="{{2}}">事件传参</button>

在事件处理函数中，通过event.target.dataset.参数名 即可获取到具体参数的值

bntTap2(e) {
  // dataset是一个对象，包含了所有通过 data-* 传递过来的参数项
  console.log(event.target.dataset)
  // 通过dataset可以访问到具体参数的值
  console.log(event.target.dataset.info)
  this.setData({count :this.data.count + e.target.dataset.info})
},
  1. bindinput的语法格式
    在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：
    ①通过bindinput, 可以为文本框梆定输入事件
<input bindinput="inputHandler"></input>

② 在页面的.js文件中定义事件处理函数：

  //input输入框的事件处理函数
  inputHandler(e) {
    //e.detail.value 拿到文本框最新的值
    console.log(e.detail.value)
  },
  1. 实现文本框和data之间的数据同步
    实现步骤：
    ①定义数据
	Page({
	  data: {
	    msg: "您好"
	  },
	  ...
	  })

② 渲染结构

	<input value="{{msg}}" bindinput="ipHandler"></input>

③ 美化样式

	input {
  	  border:1px solid #eeeeee;
  	  margin: 5px;
  	  padding: 5px;
  	  border-radius: 3px;
	}

④ 绑定input事件处理函数

	  ipHandler(e) {
    	this.setData({
     		 msg:e.detail.value
    	})
 	 }

WXML 模板语法 - 条件渲染

  1. wx:if
    在小程序中， 使用wx:if="{{condition}}"来判断是否需要渲染该代码块:
	<view wx:if="{{condition}}">True</view>

也可以用wx.elif和wx:else来添加else判断

	<view wx:if="{{type===1}}">男</view>
	<view wx:elif="{{type === 2}}">女</view>
	<view wx:else>保密</view>
  1. 结合<block>使用wx:if
    如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用wx:if控制属性，
	<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
    </block>

注意： block 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染
3. hidden
在小程序中，直接使用hidden=“{{condition}}” 也能控制元素的显示与隐藏

<view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>

4.wx:if 与 hidden 的对比
① 运行方式不同
● wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
● hidden 以切换样式的方式(display:none/block), 控制元素的显示与隐藏 -->
② 使用建议
● 频繁切换时，建议使用hidden
● 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换
WXML模板语法 - 列表渲染

  1. wx:for
    通过wx:for可以根据指定的数组，循环渲染重复的组件结构
	Page({
	  data: {
	    arry1: ['苹果', '小米', '华为']
	  }
	  })

	<view wx:for="{{arry1}}">
	    索引是: {{index}}, 当前项是： {{item}}
	</view>

默认情况下，当前循环项的索引用index表示; 当前循环项用item表示
2. 手动指定索引和当前项的变量名
● 使用wx:for-index可以指定当前循环项的索引的变量名
● 使用wx:for-item可以指定当前项的变量名

	<view wx:for="{{arry1}}" wx:for-index="idx" wx:for-item="itemName">
  		索引是: {{idx}}, 当前项是： {{itemName}}
	</view>
  1. wx:key的使用
    类似于Vue列表渲染中的:key, 小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率
	<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>

	Page({
	  data: {
	      userList:[
	        { id:1, name:'小王'},
	        { id:2, name:'小黄'},
	        { id:1, name:'小张'}
	      ]
	  }
	  })

	@import "/common/common.wxss";

WXSS模板样式

  1. 什么是WXSS
    WXSS(WeiXin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。
  2. WXSS和CSS的关系
    WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。
    与CSS相比，WXSS扩展的特性有：
    ● rpx尺寸单位
    ● @import样式导入
    WXSS模板样式 - rpx
    1. 什么是rpx尺寸单位
    rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位
    2.rpx实现原理
    rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份(即：当前屏幕的总宽度为750rpx)
    ● 在较小的设备上， 1rpx所代表的宽度较小
    ● 在较大的设备上， 1rpx所代表的宽度较大
    小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配
    3.rpx与px之间的单位换算
    在iPone6上，屏幕宽度为375px, 共有750个物理像素，等分为750rpx。则：
    750rpx = 375px = 750物理像素
    1rpx = 0.5 px = 1 物理像素
    详细参见：https://blog.csdn.net/jiaojiaoiso/article/details/121980614
    WXSS模板样式 - 样式导入
    1.什么是样式导入 -->
    使用WXSS提供的@import语法， 可以导入外联的样式表
    2.@import的语法格式–>
    @import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
    /common/common.wxss
	.username {
  		color:red;
		}

    @import "/common/common.wxss";

	<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>

WXSS模板样式 - 全局样式和局部样式
1.全局样式
定义在app.wxss中的样式为全局样式，作用于每一个页面

	view {
	  padding: 10rpx;
	  margin: 10rpx;
	  background-color: lightskyblue;
	}

2.@局部样式
在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面

	view {
	  color:white;
	}

	   <view>123</view>
	   <view>354</view>

注意：
1.当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
2.当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

全局配置
1.全局配置文件及常用的配置项
小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下：
pages: 记录当前小程序所有页面的存放路径
window：全局设置小程序窗口的外观 tabBar：设置小程序底部的tabBar效果
style: 是否启用新版的组件样式
全局配置 - window
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
1.小程序窗口的组成部分
navigationBar 导航栏区域
background 背景区域 默认不可见，下拉才显示
页面的主体区域 用来显示wxml的布局
2.了解window节点常用的配置项
属性 类型 默认值 描述 -->
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle string dark 下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh boolean false 是否开启全局的下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance number 50 页面上拉触底事件触发时距页面底部距离，单位为 px。详见 Page.onReachBottom
3.设置导航栏的标题
设置步骤： app.json -> window -> navigationBarTitleText
需求：把导航条上的标题文字， 从默认的 “WeChat” 修改为 “天天学习” "–>
4.设置导航栏的背景色
设置步骤： app.json -> window -> navigationBarBackgroundColor
需求：把导航条的背景颜色， 从默认的 #fff 修改为 2b4b6b "
5.设置导航栏的标题颜色
设置步骤： app.json -> window -> navigationBarTextStyle
需求：把导航条上的标题， 从默认的 black 修改为 white "
6.全局开启下拉刷新功能
概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为
设置步骤：app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
注意：在app.json中启动下拉刷新功能，会作用于每个小程序页面
7.设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色
设置步骤：app.json -> window -> 把 backgroundColor 指定16进制的颜色值 #efefef
8.设置下拉刷新时loading的样式
当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，
设置步骤：app.json -> window -> 为 backgroundTextStyle 指定 dark 值。
注意：backgroundTextStyle 的可选值只有 light 和 dark
9.设置上拉触底的距离
概念： 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为
设置步骤：app.json -> window -> 为 onReachBottomDistance 设置新的数值。
注意：默认距离为 50px, 如果没有特殊需求，建议使用默认值即可
全局配置 - tabBar
1. 什么是tabBar
tabBar是移动端应用觉的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：
底部 tabBar
顶部 tabBar
注意： tabBar中只能配置最少2个、最多5个tab页签
当渲染顶部tabBar时，不显示icon, 只显示文本
2. tabBar的6个组成部分
backgroundColor: tabBar的背景色
selectedIconPath: 选中时的图片路径
iconPath: 未选中时的图片路径
selectedColor： tab上的文字选中时的颜色
color: tab上文字的默认(未选中)颜色
3. tabBar 节点的配置项 https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
属性 类型 必填 默认值 描述
color HexColor 是 tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor HexColor 是 tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor HexColor 是 tab 的背景色，仅支持十六进制颜色
borderStyle string 否 black tabbar 上边框的颜色， 仅支持 black / white
list Array 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
position string 否 bottom tabBar 的位置，仅支持 bottom / top
4.每个tabl项的配置选项
list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：
属性 类型 必填 说明
pagePath string 是 页面路径，必须在 pages 中先定义
text string 是 tab 上按钮文字
iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 position 为 top 时，不显示 icon。
页面配置 https://www.itxiaonv.com/?m=202112

未完，， 后补

freellf
关注
微信小程序开发入门教程.pdf
03-29
。
微信小程序开发 小白入门篇
starry-sea1412的弃坑之路
05-31 2万+
小程序是微信推出的一种轻量级应用，具有启动快、体验好、传播快等多个特点。小程序可以在微信中直接运行，无需下载安装，因此得到了广泛的用户认可和使用。针对初学者，入门小程序开发并不需要太多复杂的前置知识，只需要掌握基本的 HTML、CSS 和 JavaScript 等前端技术就可以开始编写小程序了。本篇文章将为初学者介绍小程序的概念、特点、开发工具以及常用的开发技巧，帮助大家了解小程序的基础知识和入门开发门槛，为进一步深入学习和实践打下基础。
微信小程序开发步骤详解
qq_45274635的博客
06-07 4130
目标:○ 开发前准备。○ 微信开发者工具。○ 第一个小程序项目。○ 小程序的目录结构。○ 样式及相应式布局。○ 小程序事件。○ 小程序配置。
微信小程序开发（超详细保姆式教程）
热门推荐
m0_64875238的博客
11-10 39万+
微信小程序开发（超详细保姆式教程）
微信小程序详细教程（建议收藏）
m0_55734030的博客
11-11 3万+
小程序就是微信里面app，16年推出，它的内存，源码，图片，存储，接口与数据都有限制。在微信自由分享，不用下载app，能快速的开发，使用微信的api接口。竞品：支付宝小程序，钉钉，美团，头条，抖音，QQ,小程序等。我们发现小程序的界面主要由一下几部分组成项目的组成主要包括以下内容页面组件pages/homehome.wxml 模板文件home.js业务逻辑home.wxss 样式home.json 页面配置特别注意勾选⭐⭐不检验合法域名小程序的限制。
微信小程序开发教程流程详解.pdf
03-29
总结起来，微信小程序开发涉及到定位分析、团队组建、设计制作、测试调整和后期运维等多个环节。通过了解和掌握这些流程，你可以更高效地开发出满足市场需求的小程序。无论你是技术背景的企业主还是非技术人员，都有...
微信小程序开发教程.zip
01-09
微信小程序开发教程.zip 1.获取AppID 2.绑定开发者 3.开发者工具（IDE） 4.创建项目 5.IDE 6.编程
微信小程序开发.pdf
06-18
### 微信小程序开发知识点详解 #### 一、微信小程序账号注册与管理 - **注册账号**： - 访问微信官方的小程序管理后台（https://mp.weixin.qq.com/）。 - 选择注册类型为“小程序”，并填写相关信息（如邮箱、...
微信小程序开发图解案例教程-源代码
05-06
微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码微信小程序开发图解案例教程-源代码...
微信小程序前端开发
qq_52781485的博客
04-17 2642
微信小程序开发笔记 ------ 2024.4.22
微信小程序开发基础教程
weixin_48678602的博客
06-28 8611
文章目录1.什么叫做微信小程序2.微信小程序开发功能特点3.小程序开发流程3.1 微信公众平台注册3.2 微信开发者工具下载3.3 微信开发者工具界面上的基本功能介绍 1.什么叫做微信小程序 微信小程序（Wechat Mini Program）简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。这次微信小程序的推出，应该更会激发客户对微信公号的开发热情。 所以从长远讲，不管是APP还是网站建设类技术公司，利还是大于弊
最详细的微信小程序制作方法
孤客科技
10-06 6万+
使用 JSON 技术来表现应用的配置信息。包含应用的基本信息，页面配置和路由，应用全体的信息等。使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素，例如列表、按钮、文本框、选择框等都通过 XML 语言来描述，遵从 XML 语法，对于页面的共同风格，使用 CSS 进行定义。使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理，系统 API 的调用等。架构在视图层和逻辑层之间提供数据和事件传输功能，从而尽量减少难度。由于类似应有都属于轻应用，所以提供的功能都比较单一。
详解微信小程序开发教程
karamos的专栏
09-22 6269
微信应用开放的服务和组件包含如下： 视图容器：视图(View)、滚动视图、Swiper 基础内容：图标、文本、进度条 表单组件：按钮、表单等等 操作反馈 导航 媒体组建：音频、图片、视频。 地图 画布 文件操作能力 网络：上传下载能力、WebSocket 数据：数据缓存能力 位置：获取位置、查看位置 设备：网络状态、系统信息、重力感应、罗盘 界面：设置导航条、导航、动画、绘图等等 开放接口：登录，...
保姆级教学：从0搭建微信小程序SpringBoot+Vue（一）
最新发布
weixin_44545610的博客
09-24 823
目标：实现一个微信小程序从后端数据库MySQL获取的商品展示页。 框架：后端采用SpringBoot，前端采用Vue,数据库MySQL。 部署工具：IntelliJ IDEA 2024.2专业版+HbuilderX+Node+微信开发者工具，jdk1.8已安装
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值