微信小程序学习与实战【初级】

最新推荐文章于 2024-08-07 13:14:11 发布

花崎泪

最新推荐文章于 2024-08-07 13:14:11 发布

阅读量1k

点赞数

文章标签：小程序

本文链接：https://blog.csdn.net/Pytho_Hacker/article/details/106588676

版权

文章目录

一、小程序基础
二、常见组件
三、自定义组件
四小程序的生命周期
- 4.1 应用生命周期
- 4.2 页面生命周期
五项目1：黑马优购（电商）
- 0. 注意事项

一、小程序基础

1.1 项目目录

pages：页面文件夹，页面后不能写注释，否则报错
1. pages.json：页面配置文件，相当于app.json/windows
pages/index：首页
pages/logs：日志
utils：第三方的工具js
app.js：项目的全局入口文件
app.json：全局配置文件
1. pages属性
2. windows属性
  1. navigation——导航栏，标题颜色只能是白色或黑色
  2. enablePullDownRefresh：是否开启下拉刷新
  3. backgroundTestStyle：下拉加载样式，仅为dark/light
3. tabBar属性
  1. list
    1. pagePath：页面下方的选项名对应的跳转路径，如首页、购物车
    2. text：页面下方的选项名，如首页、购物车
    3. iconPath：页面下方的未选中选项的图标路径
    4. selectedIconPath：页面下方的选中选项的图标路径
  2. color：页面下方的未选中选项的字体颜色，只支持16进制
  3. selectedColor：页面下方的选中选项的字体颜色，只支持16进制
  4. backgroundColor：只支持16进制
  5. position：tabBar的位置，top/bottom
app.wxss：全局样式文件
project.config.json：项目的配置文件，如appid
sitemap.json：微信索引配置文件

在这里插入图片描述

1.2 模板语法

1.2.1 数据绑定

数据绑定不仅可以做页面内容，也可以做属性的value值。
绑定数据时，花括号与引号之间不要有空格

1.2.2 运算（表达式）

可以在花括号中加入简单的表达式。
1. 表达式指数字运算、字符串拼接、逻辑运算。
2. 语句指复杂代码段：if else、 switch、 for

1.2.3 列表渲染

列表循环
1. wx:for="{{数字或者对象}}"
2. wx:for-item=“循环项的名称”
3. wx:for-index=“循环项的索引”
4. wx:key=“唯一的值”，用来提高列表渲染的性能
  1. wx:key绑定一普通的字符串的时候，那么这个字符串一定是数组中的对象的唯一属性
  2. wx:key="*this",表示数组时一个普通的数组，*this表示是循环项
5. 嵌套数组时要注意名称的重复问题
6. 默认下，wx:for-item=“item” wx:for-index="index"是自动加载的，可以省略
```
 <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
 	索引：{{index}}
 	--
 	value值：{{item.id}}
 </view>
```
对象循环
1. wx:for="{{对象}}"
2. wx:for-item=“对象的值”
3. wx:for-index=“对象的属性”
4. 循环对象的时候修改item和index：wx:for-item=“value”,wx:for-index=“key”
block标签
1. 占位符的标签
2. 写代码的时候存在，页面渲染的时候程序自动移除
3. block标签的作用
条件渲染
1. wx:if=“true/false”,是一个属性
2. wx:elif=""
3. wx:else，这个没有“=”及后面的
4. hidden属性，在标签上直接加上就可以
  当标签频繁切换显示是优先使用hidden，wx:if通过解析式自动移除切换，hidden通过添加样式来切换，hidden和display不要同时使用

1.3 事件绑定 bind

bindinput：input事件

bindap：点击事件，无法直接传参，通过自定义属性方式传参

 <button bindap="handletap(1)"></button>  错误
 <button bindap="handletap" data-operation="{{1}}"></button>  正确
 js中得到参数：
 const operation=e.currentTarget.dataset.operation;

bindchange：

1.4 wxss

rpx：屏幕共宽750rpx
不要主动引入样式文件
calc属性：“width:calc(750rpx*100/375)”，在css和wxss中都可以使用
1. 750 与 rpx之间不能有空格
2. 运算符两侧不能有空格
样式导入：引入指的是在一个wxss中引入另一个wxss中的样式
1. 可以和less中的导入混合
2. 使用@import语句导入外联样式，只支持相对路径
选择器：不支持通配符*
1. .class
2. #id
3. element
4. element,element
5. nth-child(n)：如view:nth-child(n)
6. ::after：如view：：after，在view组件后插入内容
7. ::before：如view：：before，在view组件前插入内容
小程序中使用less：原生小程序不支持less
1. 使用vs code编辑器
2. 安装插件“easy less”
3. 在vs code的设置中加入如下配置
```
 "less.compile":{
 	"outExt":	".wxss"
 }
```
4. 在写样式的地方，新建less文件，ruindex.less即可

二、常见组件

组件分类：

视图容器
基础内容
表单组件
导航
媒体组件
地图
画布
开放能力
原生组件说明
无障碍访问
但不是所有有用，只学常见组件

2.1 view

属性：
1. hover-class：当用户按这个组件时加载一个类（相当于一个按钮）
2. hover-stop-propagation：指定是否本节点的父节点有点击效果
3. hover-start-time：单位毫秒
4. hover-stay-time：单位毫秒

2.2 text

只能嵌套text标签
只有这个组件可以长按文字复制
可以对空格、回车进行编码
属性：
1. selectable：文本是否可选
2. decode：是否解码

2.3 image

使用图片时建议使用外网的图片
默认宽320px，高度240px
image中的二维码不支持长按识别，仅在wx.previewImage中支持
属性名
1. src：资源路径
2. mode：图片裁剪、缩放的模式
  1. scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
  2. aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
  3. aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
  4. widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
  5. heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变，最低版本2.10.3
  6. top：裁剪模式，不缩放图片，只显示图片的顶部区域
  7. bottom：裁剪模式，不缩放图片，只显示图片的底部区域
  8. center：裁剪模式，不缩放图片，只显示图片的中间区域
  9. left：裁剪模式，不缩放图片，只显示图片的左边区域
  10. right：裁剪模式，不缩放图片，只显示图片的右边区域
  11. top left：裁剪模式，不缩放图片，只显示图片的左上边区域
  12. top right：裁剪模式，不缩放图片，只显示图片的右上边区域
  13. bottom left：裁剪模式，不缩放图片，只显示图片的左下边区域
  14. bottom right：裁剪模式，不缩放图片，只显示图片的右下边区域
3. lazy-load：小程序中图片直接支持懒加载

2.4 swiper 轮播图组件 swiper-item轮播项

swiper标签有默认样式：width 100%，height150px，另外图片本身也有自身的大小，并且swiper高度无法实现由内容撑开。点击观看具体的图片大小设置方式
属性：
1. indicator-dots：显示面板提示点
2. indicator-color：提示点颜色
3. indicator-active-color：当前提示点颜色
4. autoplay：自动轮播
5. interval：自动轮播时间，默认5s
6. circular：循环轮播

2.5 navigator 导航组件类似超链接标签

块级元素，默认换行
属性：
1. target：跳到自己的页面，还是其他小程序的页面，值为self/miniprogram
2. url：跳转的页面路径，绝对/相对
3. open-type：跳转方式
  1. navigate：保留当前页面，跳转到应用内某个页面，不能跳到tabbar页面
  2. redirect：关闭当前页面，跳转到应用内某个页面，不能跳到tabbar页面
  3. switchTab：跳到tabbar页面，并关闭其他非tabbar页面
  4. reLaunch：关闭所有页面，打开到应用内某个页面
  5. navigateBack：关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages()获取当前页面栈，决定需要返回几层
  6. exit：退出其他小程序，target=“miniprogram”时生效

2.6 rich-text 富文本标签，可以将字符串解析成对应标签

nodes属性来实现
1. 接受标签字符串
```
 <rich-text nodes="{{}}"></rich-text>
```
2. 接受对象数组.点击观看详细解释

2.7 button

外观属性
1. size：default/mini（小尺寸）
2. type：按钮颜色，primary绿色/default白色/warn红色
3. plain：按钮是否镂空，背景色透明
4. loading：是否在按钮文字前有loading图标
开放能力 open-type
1. contact：打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从bindcontact回调中获得具体信息。需要在小程序后台配置。
2. share：转发当前小程序到微信朋友中，不能分享到朋友圈
3. getPhoneNumber：获取当前用户手机号，可以从bindgetphonenumber回调中获取用户信息。结合一个事件使用，非企业级账号没有权限
  1. 绑定事件bindgetphonenumber
  2. 在事件回调函数中通过参数获取信息
  3. 获取到的信息已经加密过了。需要用户自己搭建小程序后台服务器，在后台服务器中进行解析
4. getUserInfo：获取当前用户个人信息，可以从bindgetphonenumber回调中获取用户信息。获取类似手机号，得到不加密的信息
5. launchApp：在小程序中直接打开app
6. openSetting：打开小程序内置的授权页面
7. feedback：打开小程序内置的意见反馈页面

2.8 icon 图标

属性：
1. type：
  1. success
  2. success_no_circle
  3. info
  4. warn
  5. waiting
  6. cancel
  7. download
  8. search
  9. clear
2. size：默认23
3. color

2.9 radio 单选框 radio-group 父标签

通过color属性改变选中的颜色
搭配radio-group使用

2.10 checkbox 复选框 checkbox-group 父标签

通过color属性改变选中的颜色
搭配checkbox-group使用

三、自定义组件

3.1 创建自定义组件

3.1.1 声明组件

在要使用新增组件的js中，usingComponests里以键值对的形式写入：“组件名”：“路径（不写后缀）”。

3.1.2 编辑组件

3.1.3 注册组件

3.2 声明引入自定义组件

3.3 页面中使用自定义组件

3.4 其他属性

3.5 定义段与示例方法

点击学习

父向子传值

四小程序的生命周期

4.1 应用生命周期

onLaunch：应用第一次启动就会触发的事件，可以获取用户的个人信息
onShow：应用被用户看到，重置数据或效果
onHide：应用被隐藏，暂停或清除定时器
onError(err)：应用代码发生错误时触发，可以收集用户的错误信息，通过异步请求，将错误信息发到后台
onPagNotFound：页面找不到时触发，应用第一次启动的时候，如果找不到第一个入口页面才会触发。如果页面不存在，通过js重新跳转到新页面，不能跳到tabbar页面
```
 wx.navigateTo({
 	url:'',
 	success:(reset) => {
 		
 	},
 	fail:() => {},
 	complete:() => {}
 })
```