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

一、小程序基础

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

       <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
       	索引:{{index}}
       	--
       	value值:{{item.id}}
       </view>
      
  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:点击事件,无法直接传参,通过自定义属性方式传参

     <button bindap="handletap(1)"></button>  错误
     <button bindap="handletap" data-operation="{{1}}"></button>  正确
     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. 接受标签字符串

       <rich-text nodes="{{}}"></rich-text>
      
    2. 接受对象数组.点击观看详细解释

2.7 button

  1. 外观属性

    1. size:default/mini(小尺寸)
    2. type:按钮颜色,primary绿色/default白色/warn红色
    3. plain:按钮是否镂空,背景色透明
    4. 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,并且对要遇到的域名进行配置,点击观看视频后半段的具体介绍
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值