微信小程序快速上手

微信小程序笔记

APPID：wxec8b02f3fbf29e9e

一.⼩程序配置⽂件

1.1全局配置app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底部 tab 等。普通快速启动项⽬⾥边的 app.json 配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

字段的含义：

pages 字段⸺⽤于描述当前⼩程序所有⻚⾯路径，这是为了让微信客⼾端知道当前你的⼩程序⻚⾯定义在哪个⽬录。
window 字段⸺定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。
完整的配置信息请参考 app.json配置

1.2全局window配置

{
  "pages":[
    "pages/index/index",//微信小程序显示的首页，谁在第一位显示谁
    "pages/logs/logs",
    "pages/demo01/demo01"
  ],
  "window":{
    "backgroundTextStyle":"dark",//两个值dark/light 默认是light
    "navigationBarBackgroundColor": "#0094ff",//头部导航栏颜色
    "navigationBarTitleText": "我的应用",//标题
    "navigationBarTextStyle":"white",//标题颜色，两个值black/white 默认是white
    "enablePullDownRefresh": true,//是否开启下拉刷新，默认是false
    "backgroundColor": "#ccc"//下拉刷新时的背景颜色
  },
    "tabBar": {//tabbar
    "color": "#999",//未选中的字体颜色
    "selectedColor": "#ff2d4a",//选中时字体颜色
    "backgroundColor": "#fafafa",//tabbar的背景颜色
    "position": "bottom",//tabbar的位置
    "borderStyle": "black",//tabbar边框
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      }
      ,
      {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      }
      ,
      {
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  }
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

二.数据绑定

<!--pages/demo02/demo02.wxml-->
<!-- <text></text>  相当于html中的span 是一个行内块元素，不换行 -->
<!-- <view></view> 相当于html中的div 是一个块级元素 换行 -->
<!-- <checkbox></checkbox> 相当于html中的复选框 -->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
<!-- 1.字符串类型 -->
<view>
    {{msg}}
</view>
<!-- 2.数字类型 -->
<view>{{num}}</view>
<!-- 3.bool类型 -->
<view>是否是伪娘:{{isGril}}</view>
<!-- 4.object类型 -->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>

<!-- 5.自定义属性   -->
<view data-num="{{num}}">自定义数据</view>

<!-- 6.使用bool充当checked属性是要注意 -->
<!-- checked="{{isChecked}}" 前一个双引号和花括号直接不能有空格否则机会编译错误 
    以下写法就是错误的示范
    <checkbox checked="        {{isChecked}}"></checkbox>
-->
<checkbox checked="{{isChecked}}"></checkbox>

<!-- 7.运算=>表达式
    可以在花括号中放一些运算表达式，但是不能放语句
    例：<view>{{1+1}}</view>成立
    <view>{{if()}}</view> 这样不允许
 -->
 <!-- 数字加减 -->
<view>{{1+1 - 3  * 2 / 3}}</view>
  
<!-- 字符串拼接 -->
<view>{{'hello' + 'wx'}}</view>

<!-- 三元表达式 -->
<view>{{17+1 == 18 ? '欢迎' : '您未满18岁'}}</view>

<!-- 这样是不允许的 <view>{{if(age>18){666}}}</view> -->

 //注意: 花括号和引号之间如果有空格，将最终被解析成为字符串

2.1循环

wx:for

项的变量名默认为 item wx:for--item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for--index 可以指定数组当前下标的变量名

wx:key ⽤来提⾼数组渲染的性能

wx:key 绑定的值有如下选择

string 类型，表⽰循环项中的唯⼀属性如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]

wx:key="id"

2.保留字 this ，它的意思是 item 本⾝，this 代表的必须是唯⼀的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"

<!-- 循环
    1 wx:for="{{数组或者对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
    2 wx:key="唯一的值" 用来提高列表渲染的性能
      1 wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
      2 wx:key ="*this"  就表示 你的数组 是一个普通的数组  *this 表示是 循环项 
        [1,2,3,44,5]
        ["1","222","adfdf"]
    3 当出现 数组的嵌套循环的时候 尤其要注意  以下绑定的名称 不要重名
        wx:for-item="item" wx:for-index="index"
    4 默认情况下 我们 不写
       wx:for-item="item" wx:for-index="index"
       小程序也会把 循环项的名称 和 索引的名称 item 和 index 
       只有一层循环的话 （wx:for-item="item" wx:for-index="index"） 可以省略
 -->
 <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    索引:{{index}}---值：{{item.name}}
 </view>

 <view>遍历对象</view>
 <view wx:for="{{person}}" wx:for-item = "value" wx:for-index = "key" wx:key="age">
    属性：{{key}}---值:{{value}}
 </view>

2.2 block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

2.3 if 条件渲染

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<!-- 10条件渲染
   1.wx:if="{{true/false}}"

   2.多分支
   wx:if="{{true/false}}"
   wx:elif="{{true/false}}"
   wx:else

   3.hidden
      1 在标签上直接加入属性 hidden 
      2 hidden="{{true/false}}"

   4. 什么场景下用哪个
      1 当标签不是频繁的切换显示 优先使用 wx:if
         直接把标签从 页面结构给移除掉 
      2 当标签频繁的切换显示的时候 优先使用 hidden
         通过添加样式的方式来切换显示 
         hidden 属性 不要和 样式 display一起使用
   
 -->

 <view>条件渲染</view>
 <view wx:if="{{true}}">显示</view>
 <view wx:if="{{false}}">隐藏</view>

 <view wx:if="{{false}}">不显示</view>
 <view wx:elif="{{false}}">不显示</view>
 <view wx:else>他们都不要，我接盘</view>

 <view>----------</view>
 <view hidden> 我被hidden我不会显示</view>
 <view hidden="{{false}}">我可以被看到</view>
 <view hidden="{{true}}">你看不到我</view>

2.4 小程序事件的绑定

小程序绑定事件，通过bind关键字来实现，如 bindtap bindinput bindchange等不同组件支持不同的事件，具体看组件的说明即可

<!-- 
  1.需要input标签绑定input事件
  绑定关键字 bindinput

  2.获取输入的值
  要通过事件源对象来获取
  e.detail.value

  3.把输入框的值 赋给data中的num
  注意：
  不能直接赋值
  this.num = e.detail.value
  this.data.num = e.detail.value
  真确的写法
  this.setData({
    num:e.detail.value
  })

  4.加入一个点击事件
    1.bindtap
    2.无法在小程序当中的事件中直接传参
    3.通过自定义属性的方式来传递参数
    4.事件源中获取自定义属性
    e.target.dataset.operation
注意：事件传参要通过自定义参数
   -->
<input type="text" bindinput="handleInput"></input>
<view>{{num}}</view>

<button bindtap="changeNum" data-operation="{{1}}">+</button>
<button bindtap="changeNum" data-operation="{{-1}}">-</button>

// pages/demo03/demo03.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    num: 0
  },
  handleInput(e) {
    console.log(e.detail.value)
    this.setData({
      num: e.detail.value
    })
  },
  changeNum(e){
    console.log(e)
    const {operation} = e.target.dataset
    this.setData({
      num:this.data.num + operation
    })
  }
})

2.5wxss宽度自适应配置

/* pages/demo04/demo04.wxss */
/*
1.小程序中 不需要主动引入样式文件
2.需要把页面中某些元素的单位 由px改换成rpx
    1.设计稿 750px
    750 px = 750rpx
      1 px = 1 rpx
    2.把屏幕宽度改成375px
    375px = 750 rpx
    1 px = 1 rpx 
    1rpx = 0.5px
    3.存在一个设计稿 款多 414 或者未知page
    1.设计稿 page 存在一个元素宽度 100px
    2.拿以上的需求 趋势线 不同宽度的页面适配

    page px = 750px
    1px = 750 rpx * 100 / page
    100px = 750 rpx * 100  / page
    假设设计稿的宽度page等于375px
    4. 利用 一个calc属性 
    注意：1.750和rpx中间不要留空格
    2.运算符的两边也不要留空格
*/
view{
  /* width: 200rpx; */
  height: 200rpx;
  background-color: aqua;
  font-size: 40rpx;
  width: calc(750rpx * 100 / 375);
}

2.6引入外部样式

通过@import "路径位置"

注意只支持相对路径

代码演示：

/*style文件夹下的common样式*/
view{
  color: aqua;
  font-size: 16px;
}

/*导入到demo05中的样式中*/

@import "../../style/common.wxss"

2.7选择器

特别需要注意的是小程序不支持通配符*因此以下代码无效

*{
    margin:0;
    padding:0;
    box-sizing:border-box; 
 }

目前的选择器有：

选择器	样例	样例描述
.class	.banner	选择所有拥有class="banner"的组件
#id	#phone	选择拥有id="phone"的组件
element	view	选择所有view组件
element,element	view,checkbox	选择view和checkbox组件
nth-child(n)	view:nth-child(n)	选择某个标签
::after	view::after	在view组件后面插入内容
::before	view::before	在view组件前边插入内容

2.8小程序中使用less

1.原生小程序不支持less,其他基于小程序的框架大体都支持，如wepy mpvue, taro

2.用vscode中的插件easy less

3.在vscode中设置加入以下配置

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

4.在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。

//嵌套写法
view{
    text{
        width: 20px;
    }
}
//定义变量
@color:yellow;
text{
    color: @color;
}
//导入外部less文件
@import '../../style/index.less';
view{
    color: @themeColor;
}

三.小程序常见的组件

重点讲解⼩程序中常⽤的布局组件

view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox 等

3.1 view

代替原来的div标签

 <view hover-class="h-class">
 点击我试试
 </view>

3.2 text

1.文本标签

2.只能嵌套text

3.长安文字可以复制（只有该标签有这个功能）

4.可以对空格回车进行编辑

属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
decode	Boolean	false	是否解码

<!--pages/demo07/demo07.wxml-->
<!-- selectable 是否可复制 decode是否解码 -->
<text selectable="{{true}}" decode="{{true}}">
我是一个text，我可以被复制 &nbsp; 123&lt;
</text>

3.3 image

<!--pages/demo08/demo08.wxml-->


<!-- 
image 图片标签
  1 src 指定要加载的图片的路径
    图片存在默认的宽度和高度 320 * 240      原图大小是 200 * 100
  2 mode 决定 图片内容 如何 和 图片标签 宽高 做适配
    1 scaleToFill 默认值 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 
    2 aspectFit 保持宽高比 确保图片的长边 显示出来   页面轮播图 常用
    3 aspectFill 保持纵横比缩放图片，只保证图片的 短 边能完全显示出来。  少用
    4 widthFix 以前web的图片的 宽度指定了之后 高度 会自己按比例来调整   常用  
    5 bottom。。 类似以前的backgroud-position 
  3 小程序当中的图片 直接就支持 懒加载  lazy-load
    1 lazy-load 会自己判断 当 图片 出现在 视口  上下 三屏的高度 之内的时候  自己开始加载图片 

 -->


<image mode="top" lazy-load  src="https://pic.images.ac.cn/image/5ea0fe288244e.html" >
    
</image>

1.image图片标签默认高度320px,240px

2.支持懒加载

属性名	类型	默认值	说明
src	String		图片资源地址
mode	String	'scaleToFill'	图片裁剪，缩放的模式
lazy-load	Boolean	false	图片懒加载

mode有效值：

mode有13种模式，其中4种是缩放模式，9中是裁剪模式

模式	值	说明
缩放	scaleToFill	不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
缩放	aspectFilt	保持纵横比缩放图片，是图片的长边能完全显示出来
缩放	aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来
缩放	widthFix	宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变
缩放	top	不缩放图⽚，只显⽰图⽚的顶部区域
缩放	bottom	不缩放图⽚，只显⽰图⽚的底部区域
缩放	center	不缩放图⽚，只显⽰图⽚的中间区域
缩放	left	不缩放图⽚，只显⽰图⽚的左边区域
缩放	right	不缩放图⽚，只显⽰图⽚的右边区域
缩放	top left	不缩放图⽚，只显⽰图⽚的左上边区域
缩放	top right	不缩放图⽚，只显⽰图⽚的右上边区域
缩放	bottom left	不缩放图⽚，只显⽰图⽚的左下边区域
缩放	bottom right	不缩放图⽚，只显⽰图⽚的右下边区域

3.4 swiper 微信内置轮播图组件

swiper组件默认的宽是100%,高度是150px

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0,0,,0.3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
interval	Number	5000（毫秒）	自动切换事件间隔
circular	Boolean	false	是否循环轮播

3.4.1swiper 滑块视图容器

3.4.2swiper-item每个滑块

默认宽度和高度都是100%

<!-- pages/demo09/demo09.wxml -->

<!-- 
  1 轮播图外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper标签 存在默认样式
    1 width 100%
    2 height 150px    image 存在默认宽度和高度 320 * 240 
    3 swiper 高度 无法实现由内容撑开 
  4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
    原图的宽度和高度  1125 * 352 px
    swiper  高度 / swiper 宽度 =  原图的高度  /  原图的宽度
    swiper  高度  =  swiper 宽度 *  原图的高度 / 原图的宽度
    height: 100vw * 352 /  1125
  5 autoplay 自动轮播
  6 interval 修改轮播时间
  7 circular 衔接轮播
  8 indicator-dots 显示 指示器 分页器 索引器 
  9 indicator-color 指示器的未选择的颜色 
  10 indicator-active-color 选中的时候的指示器的颜色 
 -->
<swiper autoplay="{{true}}" interval="2000" circular indicator-dots="{{true}}" indicator-color="skyblue" indicator-active-color="orange">
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/142/O1CN012xkybe1Cv4pztdLZm_!!142-0-lubanu.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="//gw.alicdn.com/imgextra/i4/190/O1CN01fmyLv41DH3qg3rPgY_!!190-0-lubanu.jpg"></image>
    </swiper-item>
</swiper>

wxss文件
/* pages/demo09/demo09.wxss */
image{
    width: 100%;
}
swiper{
    width: 100%;
    height: calc(100vw * 352 / 1125);
}

3.5 navigator导航标签

<!--pages/demo11/demo11.wxml-->

<!--
    导航组件navigator 类似于html中的a标签
    注意：navigator是块级元素默认会换行 可以直接加宽度和高度
    参数
    1. url:要跳转的页面路径
    2. target 要跳转到当前的小程序 还是其他的小程序
        默认值是self 自己小程序的页面
        miniProgram 其他的小程序的页面
    3. open-type 跳转的方式
        1.navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
        2.redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面
        3.switchTab 跳转到tabbar页面，并关闭其他所有非tabbar页面
        4.reLaunch 关闭所有页面，打开到应用内的某个页面
 -->


<navigator url="/pages/demo09/demo09">
    跳转到轮播图页面
</navigator>
<!-- 因为open-type默认值是navigate 不能跳转到tabbar，所以不会有反应 -->
<navigator url="/pages/index/index">
    跳转到tabbar页面（我是默认值，跳不了哈哈哈）
</navigator>
<navigator open-type="redirect" url="/pages/demo09/demo09">
    我是redirect重定向到别的页面
</navigator>
<navigator open-type="switchTab" url="/pages/index/index">
    switchTab直接跳转到 tabbar页面
</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">
    我是relaunch我可以随便跳转
</navigator>

navigator 导航组件类似于超链接组件

属性名	类型	默认值	说明
target	String	self	在哪个目标上发生跳转，默认当前小程序，可选值self/miniProgram
url	String		当前小程序内的跳转连接
open-type	String	navigate	跳转方式

open-type有效值:

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面,但是不能跳转到tabbar页面
switchTab	跳转到tabbar页面，关闭其他所有非tabbar页面
reLaunch	关闭所有页面，打开到应用内的某个页面
navigateBack	关闭当前页面，返回上一页面或多级页面，可通过getCurrentPages()获取当前的页面栈,决定需要返回几层
exit	退出小程序，target="miniProgram"时生效

3.6 rich-text

富文本标签类似于vue中的v-html

示例代码

<!--pages/demo12/demo12.wxml-->
<!-- <text>pages/demo12/demo12.wxml</text> -->


<!-- 
  rich-text 富文本标签
  1 nodes属性来实现
    1 接收标签字符串 
    2 接收对象数组 
 -->
<rich-text nodes="{{html}}">
    
</rich-text>

// pages/demo12/demo12.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 1. 标签字符串 最常用
    // html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden;  margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url(&quot;https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫国际" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB11rTqtj7nBKNjSZLeXXbxCFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫国际</div></div><div view-name="DLinearLayout" aria-label="外卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tps/TB1eXc7PFXXXXb4XpXXXXXXXXXX-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">外卖</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div><div view-name="DLinearLayout" aria-label="充值中心" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1o0FLtyMnBKNjSZFoXXbOSFXa-183-144.png_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">充值中心</div></div><div view-name="DLinearLayout" aria-label="飞猪旅行" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB15nKhtpkoBKNjSZFEXXbrEVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">飞猪旅行</div></div><div view-name="DLinearLayout" aria-label="领金币" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 157px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1BqystrZnBKNjSZFrXXaRLFXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">领金币</div></div><div view-name="DLinearLayout" aria-label="拍卖" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 230.5px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB1CMf4tlnTBKNjSZPfXXbf1XXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">拍卖</div></div><div view-name="DLinearLayout" aria-label="分类" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 84px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(&quot;https://gw.alicdn.com/tfs/TB18P98tyQnBKNjSZFmXXcApVXa-183-144.png?getAvatar=1_.webp&quot;);"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">分类</div></div></div></div>'
    //2.对象数组的方式
    html:[
      {
        //1.放一个div标签用name属性来指定
        name:'div',
        //2.标签上有哪些属性，用attrs来指定
        attrs:{
          //标签上的属性有类名，和样式
          class:'my_div',
          style:'color:red;'
        },
        //子节点用 children来指定
        children:[
          {
            //div里面的子节点p标签
            name:"p",
            //p身上的属性
            attrs:{
              
            },
            children:[
              {
                type:'text',
                text:'hello'
              }
            ]
          }
        ]
      }
    ]
  },
  
})

3.6.1nodes属性

nodes属性支持字符串和标签节点数组

属性	说明	类型	必填	备注
name	标签	String	是	支持部分受信任的html节点
attrs	属性	object	否	支持部分受信任的属性，遵循Pascal命名法
children	子节点列表	array	否	结果和nodes一致

文本节点：type=text

属性	说明	类型	必填	备注
text	文本	String	是	支持entities

html:[
      {
        //1.放一个div标签用name属性来指定
        name:'div',
        //2.标签上有哪些属性，用attrs来指定
        attrs:{
          //标签上的属性有类名，和样式
          class:'my_div',
          style:'color:red;'
        },
        //子节点用 children来指定
        children:[
          {
            //div里面的子节点p标签
            name:"p",
            //p身上的属性
            attrs:{
              
            },
            children:[
              {
                type:'text',
                text:'hello'
              }
            ]
          }
        ]
      }
    ]

3.7 button 组件

<!-- pages/demo13/demo13.wxml -->
<!-- <text>pages/demo13/demo13.wxml</text> -->
<!-- button按钮标签
    1外观的属性
        1.1 size控制按钮的大小
            默认值是default 
            mini 小尺寸
    2.type用来控制按钮的颜色 有三种
        2.1default 默认颜色 灰色
        2.2 primary 绿色
        2.3 warn 红色
    3. plain 按钮是否镂空 背景色透明
    4. loading 文字前实现正在等待的图标 -->
<button>default按钮</button>
<button size="mini">mini按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button type="warn" plain>warn按钮 透明</button>
<button type="primary" loading>primary按钮</button>
<!-- button 开发能力
  open-type：
  1 contact 直接打开  客服对话功能  需要在微信小程序的后台配置   只能够通过真机调试来打开 
  2 share 转发当前的小程序 到微信朋友中   不能把小程序 分享到 朋友圈 
  3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用  不是企业的小程序账号 没有权限来获取用户的手机号码 
    1 绑定一个事件 bindgetphonenumber 
    2 在事件的回调函数中  通过参数来获取信息 
    3 获取到的信息  已经加密过了 
      需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了
  4 getUserInfo 获取当前用户的个人信息
    1 使用方法 类似 获取用户的手机号码
    2 可以直接获取 不存在加密的字段 
  5 launchApp 在小程序当中 直接打开 app
    1 需要现在 app中 通过app的某个链接 打开 小程序
    2 在小程序 中 再通过 这个功能 重新打开 app
    3 找到 京东的app 和 京东的小程序  
  6 openSetting 打开小程序内置的 授权页面
    1 授权页面中 只会出现 用户曾经点击过的 权限 
  7 feedback 打开 小程序内置的 意见反馈页面 
    1 只能够通过真机调试来打开 -->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

属性	类型	默认值	必填	说明
size	string	default	否	按钮大小
type	string	default	否	按钮的样式类型
plain	boolean	default	否	按钮是否镂空，背景⾊透明
disabled	boolean	false	否	是否禁用
loading	boolean	false	否	名称前是否带loading图标
form-type	string		否	用于''组件，点击分别会触发‘’组件的submit/reset事件
open-type	string		否	微信开放能力

size合法值

值	说明
default	默认大小
mini	小尺寸

type的合法值

值	说明
primary	绿色
default	白色
warn	红色

form-type的合法值

值	说明
submit	提交表单
reset	重置表单

open-type的合法值

值	说明
contact	打开客服会话，如果⽤⼾在会话中点击消息卡⽚后返回⼩程序，可以从bindcontact 回调中获得具体信息
share	触发⽤⼾转发，使⽤前建议先阅读
getPhoneNumber	获取⽤⼾⼿机号，可以从bindgetphonenumber回调中获取到⽤⼾信息，
getUserInfo	获取⽤⼾信息，可以从bindgetuserinfo回调中获取到⽤⼾信息
launchApp	打开APP，可以通过app-parameter属性设定向APP传的参数
openSetting	打开授权设置⻚
feedback	打开“意⻅反馈”⻚⾯，⽤⼾可提交反馈内容并上传⽇志，开发者可以登录⼩程序管理后台后进⼊左侧菜单“客服反馈”⻚⾯获取到反馈内容

open-type 的 contact的实现流程

将⼩程序的 appid 由测试号改为⾃⼰的 appid
登录微信⼩程序官⽹，添加客服客服 -- 微信微信
为了⽅便演⽰，⽼师⾃⼰准备了两个账号
1. 普通⽤⼾ A
2. 客服-微信 B
就是⼲

3.8 icon

属性	类型	默认值	必填	说明
type	string		是	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search,clear
size	number/string	23	否	icon大小
color	string		否	icon的颜色，同css的color

<!--pages/demo14/demo14.wxml-->

<!-- 
    字体图标 icon
    1.type 类型：string icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search,clear
    2.size 类型：number/string 默认值：23 
    3.color 类型string icon的颜色，同css的color
-->

<icon  type="success" size="60" color="#0094ff">
    
</icon>

3.9 radio

可以通过 color属性来修改颜色

需要搭配 radio-group ⼀起使⽤

<!-- pages/demo15/demo15.wxml -->
<!-- <text>pages/demo15/demo15.wxml</text> -->
<radio-group bindchange="checked">
    <radio color="aqua" value="male">男</radio>
    <radio color="aqua" value="female">女</radio>
</radio-group>
<view>选中了：{{res}}</view>

3.10 checkbox

可以通过 color属性来修改颜色

需要搭配 checkbox-group ⼀起使⽤

<!--pages/demo16/demo16.wxml-->
<!-- <text>pages/demo16/demo16.wxml</text> -->

<checkbox-group bindchange="checked">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="{{item.id}}">
        {{item.name}}
    </checkbox>
</checkbox-group>
<view>
    勾选了：{{fruit}}
</view>
  

// pages/demo16/demo16.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:'🍎',
        value:'apple'
      },{
        id:1,
        name:'🍇',
        value:'grape'
      },{
        id:2,
        name:'🍌',
        value:'banana'
      },
    ],
    fruit:[]
  },
  checked(e){
    console.log(e)
    const value = e.detail.value
    this.setData({
      fruit:value
    })
  }
 
})

四.自定义组件

4.1创建自定义组件的步骤

创建自定义组件文件夹

类似于页面，一个自定义组件由 json ,wxml ,wxss ,js4个文件组成可以在微信开发者⼯具中快速创建组件的⽂件结构
声明组件⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
```
{
  "component": true
}
```
编辑组件

同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式slot 表⽰插槽，类似vue中的slot
```

<view class="inner">
 {{innerText}}
    <slot></slot>
</view>
```
在组件的 wxss ⽂件中编写样式

注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
```
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red; 
}
```

注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

声明引⼊⾃定义组件

⾸先要在需要引用⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

 // 引用声明
  "usingComponents": {
 // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
 }
}

⻚⾯中使⽤⾃定义组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

4.2组件之间的传值

4.2.1父向子组件传值

类似于vue中的父向子组件传值，通过标签属性的方式来传递

子组件接收的形式，在子组件的js文件中的properties接收

子组件js文件

// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    //父组件传递过来的List <Tabs list="{{list}}"></Tabs>
    list:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
   /* 
  1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
  2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！
   */
  /**
   * 组件的方法列表
   */
  methods: {
    changeTab(e){
      // console.log(e)
      // 1.获取当前索引
      const {index} = e.currentTarget.dataset
      console.log(index)
      //2. 获取data中的数组
      // 解构  对 复杂类型进行结构的时候 复制了一份 变量的引用而已
      // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      // 不要直接修改 this.data.数据 
      // let {tabs}=this.data;
      // let tabs=this.data;
      //循环数组
      let {list} = this.data
      list.forEach((item,i) => {
        if(i === index){
          item.isActive = true
        }else{
          item.isActive = false
        }
      });
      //重新赋值给list
      this.setData({
        list
      })
    }
  }
})

子组件wxml文件

<!-- components/Tabs/Tabs.wxml -->
<!-- <text>components/Tabs/Tabs.wxml</text> -->
<view class="tabs">
    <view class="tabs_title">
        <view class="tabs_item {{item.isActive ? 'active':''}}" wx:for="{{list}}" wx:key="id" bindtap="changeTab" data-index="{{index}}">
            {{item.name}}
        </view>
    </view>
    <view class="tabs_connent">内容</view>
</view>

子组件wxss文件

/* components/Tabs/Tabs.wxss */
.tabs_title{
    display: flex;
    padding: 10rpx;
}
.tabs_item{
    display: flex;
    flex:1;
    justify-content: center;
    align-items: center;
}
.active{
    border-bottom: 5px solid red;
    color: orange;
}

父组件js文件

// pages/demo17/demo17.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: 0,
        name: '首页',
        isActive: true,
      }, {
        id: 1,
        name: '新闻',
        isActive: false,
      }, {
        id: 2,
        name: '娱乐',
        isActive: false,
      }, {
        id: 3,
        name: '金融',
        isActive: false,
      },

    ]
  },

  
})

父组件wxml文件

 <!--pages/demo17/demo17.wxml-->
<!-- <text>pages/demo17/demo17.wxml</text> -->
<Tabs list="{{list}}"></Tabs>

 1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据直接用即可
  2 子向父传递数据 通过事件的方式传递
    1 在子组件的标签上加入一个 自定义事件

4.2.2子组件向父组件传值

类似vue 子传父用this.$emit('name',value)

这里用this.triggerEvent('name',value)

子组件中的js

/*
	5 点击事件触发的时候 
      发父组件中的自定义事件 同时传递数据给  父组件  
      this.triggerEvent("父组件自定义事件的名称",要传递的参数)  
*/
//子组件向父组件传值
    changeTab(e){
      //获取当前的索引
      const {index} = e.currentTarget.dataset
      this.triggerEvent('myTabs',index)
        //第一参数是自定义事件名称，第一个参数是要传递的参数
    }

父组件通过标签事件接收子组件传递的事件和参数

<Tabs list="{{list}}" aaa="123" bindmyTabs="changTabs"></Tabs>
这里绑定的事件myTabs就是子组件自定的事件名称

父组件的js文件

// pages/demo17/demo17.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: [{
        id: 0,
        name: '首页',
        isActive: true,
      }, {
        id: 1,
        name: '新闻',
        isActive: false,
      }, {
        id: 2,
        name: '娱乐',
        isActive: false,
      }, {
        id: 3,
        name: '金融',
        isActive: false,
      },

    ]
  },
  changTabs(e){
      //获取子组件传递过的当前的index
    console.log(e)
    const index = e.detail
    //深拷贝data中的list数组
    let list = JSON.parse(JSON.stringify(this.data.list))
    //遍历数组，把当前的索引设置为选中状态，其他改为false
    list.forEach((item,i) => i===index ? item.isActive=true : item.isActive=false)
      //设置list
    this.setData({
      list
    })
  }
})

4.2.3 插槽的使用

和vue中的slot作用一样，就是一个占位符，也可以有默认值，

当给定了内容，slot的内容就会被覆盖

示例：

子组件的wxml文件

<view class="tabs">
    <view class="tabs_title">
        <view class="tabs_item {{item.isActive ? 'active':''}}" wx:for="{{list}}" wx:key="id" bindtap="changeTab" data-index="{{index}}">
            {{item.name}}
        </view>
    </view>
    <view class="tabs_connent"><slot ></slot></view>
    
    <!-- 以上的slot就是一个插槽 -->
</view>

父组件的wxml文件

<!-- pages/demo17/demo17.wxml -->
<!-- 1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据直接用即可
  2 子向父传递数据 通过事件的方式传递
    1 在子组件的标签上加入一个 自定义事件 -->
<Tabs list="{{list}}" aaa="123" bindmyTabs="changTabs">
    <block wx:if="{{list[0].isActive}}">首页</block>
    <block wx:elif="{{list[1].isActive}}">新闻</block>
    <block wx:elif="{{list[2].isActive}}">娱乐</block>
    <block wx:else>金融</block>
</Tabs>

4.3组件常见的属性

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，参见下文
data	Object	否	组件内部数据，和properties一同用于组件模板渲染
observers	Object	否	组件数据字段监听器，用于properties和data的变化，类似于vue中的watch
methods	Object	否	组件的方法，包括时间相应函数和任意的自定义方法，
created	Function	否	组件生命周期函数，在组件实例化刚刚被创建时执行，此时不能调用setData
attached	Function	否	组件⽣命周期函数，在组件实例进⼊⻚⾯节点树时执⾏，
ready	Function	否	组件⽣命周期函数，在组件布局完成后执⾏，
moved	Function	否	组件⽣命周期函数，在组件实例被移动到节点树另⼀个位置时执⾏
detached	Function	否	组件⽣命周期函数，在组件实例被从⻚⾯节点树移除时执行

五.小程序的生命周期函数

5.1应⽤⽣命周期

属性	类型	必填	说明
onlLaunch	function	否	监听小程序初始化
onShow	function	否	监听小程序启动或切后台
onHide	function	否	监听小程序切后台
onError	function	否	错误监听函数
onPageNotFound	function	否	页面不存在监听函数

5.2页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期回调--监听页面加载
onShow	function	⽣命周期回调—监听⻚⾯显⽰
onReady	function	⽣命周期回调—监听⻚⾯初次渲染完成
onHide	function	⽣命周期回调—监听⻚⾯隐藏
onUnload	function	⽣命周期回调—监听⻚⾯卸载
oonPullDwonRefresh	function	监听用户下拉动作
onReachBotton	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改时触发
onTabltemTap	function	当前是tab也时，点击tab时触发

posted @ 2020-07-24 14:52 萝卜青菜各有所爱阅读(364) 评论(0) 收藏举报

刷新页面返回顶部

萝卜青菜各有所爱