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

一、小程序基础

1.1 项目目录

1. pages：页面文件夹，页面后不能写注释，否则报错
   1. pages.json：页面配置文件，相当于app.json/windows
2. pages/index：首页
3. pages/logs：日志
4. utils：第三方的工具js
5. app.js：项目的全局入口文件
6. 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
7. app.wxss：全局样式文件
8. project.config.json：项目的配置文件，如appid
9. sitemap.json：微信索引配置文件

1.2 模板语法

1.2.1 数据绑定

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

1.2.2 运算（表达式）

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

1.2.3 列表渲染

1. 列表循环

   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"是自动加载的，可以省略

       
       	索引：{{index}}
       	--
       	value值：{{item.id}}
       
      

2. 对象循环

   1. wx:for="{{对象}}"
   2. wx:for-item=“对象的值”
   3. wx:for-index=“对象的属性”
   4. 循环对象的时候修改item和index：wx:for-item=“value”,wx:for-index=“key”

3. block标签

   1. 占位符的标签
   2. 写代码的时候存在，页面渲染的时候程序自动移除
   3. block标签的作用

4. 条件渲染

   1. wx:if=“true/false”,是一个属性
   2. wx:elif=""
   3. wx:else，这个没有“=”及后面的
   4. hidden属性，在标签上直接加上就可以
      当标签频繁切换显示是优先使用hidden，wx:if通过解析式自动移除切换，hidden通过添加样式来切换，hidden和display不要同时使用

1.3 事件绑定 bind

1. bindinput：input事件

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

      错误
      正确
    js中得到参数：
    const operation=e.currentTarget.dataset.operation;
   

3. bindchange：

1.4 wxss

1. rpx：屏幕共宽750rpx

2. 不要主动引入样式文件

3. calc属性：“width:calc(750rpx*100/375)”，在css和wxss中都可以使用

   1. 750 与 rpx之间不能有空格
   2. 运算符两侧不能有空格

4. 样式导入：引入指的是在一个wxss中引入另一个wxss中的样式

   1. 可以和less中的导入混合
   2. 使用@import语句导入外联样式，只支持相对路径

5. 选择器：不支持通配符*

   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组件前插入内容

6. 小程序中使用less：原生小程序不支持less

   1. 使用vs code编辑器

   2. 安装插件“easy less”

   3. 在vs code的设置中加入如下配置

       "less.compile":{
       	"outExt":	".wxss"
       }
      

   4. 在写样式的地方，新建less文件，ruindex.less即可

二、常见组件

组件分类：

1. 视图容器
2. 基础内容
3. 表单组件
4. 导航
5. 媒体组件
6. 地图
7. 画布
8. 开放能力
9. 原生组件说明
10. 无障碍访问
    但不是所有有用，只学常见组件

2.1 view

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

2.2 text

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

2.3 image

1. 使用图片时建议使用外网的图片
2. 默认宽320px，高度240px
3. image中的二维码不支持长按识别，仅在wx.previewImage中支持
4. 属性名

   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轮播项

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

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

1. 块级元素，默认换行
2. 属性：
   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 富文本标签，可以将字符串解析成对应标签

1. nodes属性来实现

   1. 接受标签字符串

   2. 接受对象数组.点击观看详细解释

2.7 button

1. 外观属性

   2. size：default/mini（小尺寸）
   3. type：按钮颜色，primary绿色/default白色/warn红色
   4. plain：按钮是否镂空，背景色透明
   5. loading：是否在按钮文字前有loading图标

2. 开放能力 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. 属性：

   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 父标签

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

2.10 checkbox 复选框 checkbox-group 父标签

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

三、自定义组件

3.1 创建自定义组件

3.1.1 声明组件

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

3.1.2 编辑组件

3.1.3 注册组件

3.2 声明引入自定义组件

3.3 页面中使用自定义组件

3.4 其他属性

3.5 定义段与示例方法

点击学习

1. 父向子传值
   

四 小程序的生命周期

4.1 应用生命周期

1. onLaunch：应用第一次启动就会触发的事件，可以获取用户的个人信息

2. onShow：应用被用户看到，重置数据或效果

3. onHide：应用被隐藏，暂停或清除定时器

4. onError(err)：应用代码发生错误时触发，可以收集用户的 错误信息，通过异步请求，将错误信息发到后台

5. onPagNotFound：页面找不到时触发，应用第一次启动的时候，如果找不到第一个入口页面才会触发。如果页面不存在，通过js重新跳转到新页面，不能跳到tabbar页面

    wx.navigateTo({
    	url:'',
    	success:(reset) => {
    		
    	},
    	fail:() => {},
    	complete:() => {}
    })
   

4.2 页面生命周期

五 项目1：黑马优购（电商）

1. 小程序的第三方框架：
   1. 腾讯 wepy：类似vue
   2. 美团 mpvue：类似vue
   3. 京东 taro：类似react
   4. 滴滴 chameleon：
   5. u’ni-app：类似vue

0. 注意事项

1. app.js的pages项中，在页面名后不能加注释解释页面，可以在代码上一行加注释
2. 域名问题：
   1. 在前期开发阶段，可以在微信开发者工具页面的详情中，选择不校核域名
   2. 如果上线，必须有appID，并且对要遇到的域名进行配置，点击观看视频后半段的具体介绍