【微信小程序系列02】微信小程序（二）第四章、第五章、第六章

第四章：小程序事件的绑定

<!--
    1、需要给input标签绑定input事件
        绑定关键字 bindinput
    2、如何获取输入框的值
        通过事件源对象来获取
        e.detail.value
    3、把输入框的值赋值到data中
        1.不能直接this.data.num=e.detail.value
        2.不能this.num=e.detail.value
        正确的写法：
            this.setData({
                num:e.detail.value
            })
     4、需要加入一个点击事件
        1.bindtap
        2.无法在小程序中的事件中直接传参
        3.需要通过自定义属性的方式来传递参数
        4.事件源中获取自定义属性
-->
<input bindinput="handleInput" type="text"></input>
<button bindtap="handleTap" data-operation="{{1}}">+</button>
<button bindtap="handleTap" data-operation="{{-1}}">-</button>
<view>{{num}}</view>

// pages/demo04/demo04.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        num:0
    },
    //输入框的input事件的执行逻辑
    handleInput (e){
        this.setData({
            num: e.detail.value
        })
    },
    //加减按钮事件
    handleTap(e){
        //console.log(e)
        //1.获取自定义属性operation
        var operation=e.currentTarget.dataset.operation;
        this.setData({
            num: this.data.num+operation
        })
    }
})

⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等

不同的组件⽀持不同的事件，具体看组件的说明即可。

4.1 wxml

<input bindinput="handleInput" />

4.2 page

Page({
  // 绑定的事件
  handleInput: function(e) {
    console.log(e);
    console.log("值被改变了");
 }
})

4.3 特别注意

1. 绑定事件时不能带参数 不能带括号 以下为错误写法

   <input bindinput="handleInput(100)" />
   

2. 事件传值 通过标签⾃定义属性的⽅式 和 value

   <input bindinput="handleInput" data-item="100" />
   

3. 事件触发时获取数据

    handleInput: function(e) {
       // {item:100}
      console.log(e.currentTarget.dataset)
         
       // 输入框的值
      console.log(e.detail.value);
    }
   

第五章：样式WXSS

/**
    1.小程序中不需要主动来引入样式文件，只需要名称保持一致即可
    2.需要把页面中的某些元素单位由px改成rpx
        1.设计稿750px
            750px=750rpx
            1px=1rpx
        2.把屏幕宽度改成375px
            375px=750rpx
            1px=2rpx
            1rpx=0.5px
        3.存在一个设计稿 宽度414 或者 未知page
            1. 设计稿page存在一个元素宽度100px
            2.拿以上的需求去实现不同宽度的页面适配
                page px=750rpx
                1px=750rpx/page
                100px=750rpx*100/page
				假设 page=375px
        4.利用一个属性 calc属性  css和wxss都支持的一个属性
            1. 750和rpx中间不要留空格
            2. 运算符的两边也不要留空格
 */

view {
    /*width: 375rpx;*/
    height: 200rpx;
    font-size: 40rpx;
    background-color: cornflowerblue;
    /*以下代码写法是错误的*/
    /*width: 750rpx*100/375;*/
    width: calc(750rpx*100/375);
}

<view>rpx</view>

WXSS( WeiXin Style Sheets )是⼀套样式语⾔，⽤于描述 WXML 的组件样式。

与 CSS 相⽐，WXSS 扩展的特性有：

• 响应式长度单位rpx
• 样式导入

5.1 尺寸单位

rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在 iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像 素 ， 1rpx = 0.5px = 1物理像素 。

建议： 开发微信⼩程序时设计师可以⽤ iPhone6 作为视觉稿的标准。

使⽤步骤：

1. 确定设计稿宽度 pageWidth
2. 计算⽐例 750rpx = pageWidth px ,因此 n px=750rpx * n/pageWidth 。
3. 在wxss⽂件中，只要把设计稿中的 px => 750/pageWidth rpx 即可。

5.2 样式导入

/** common.wxss **/
view {
    color: cornflowerblue;
    font-size: 100px;
}

/** demo06.wxss **/
/*
    1、引入的代码是通过@import来引入
    2、路径只能写相对路径

*/
@import "../../styles/common.wxss";

/** demo06.wxml **/
<view>pages/demo06/demo06.wxml</view>

wxss中直接就⽀持，样式导⼊功能。

也可以和 less中的导⼊混⽤。

使⽤ @import 语句可以导⼊外联样式表，只⽀持相对路径。 ⽰例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}

/** demo06.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

5.3 选择器

特别需要注意的是 ⼩程序 **不⽀持通配符 *** 因此以下代码⽆效！

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

⽬前⽀持的选择器有：

5.4 小程序中使用less

demo07.less

/* 1、定义less变量 */
@color:yellow;
text {
  /*2、使用变量*/
  color: @color;
}

view{
  .viel{
    text {
      color: red;
    }
  }
}

/*导入less*/
@import "../../styles/reset.less";
view {
  color: @themeColor;
}

reset.less

@themeColor:green;

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。

但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

1. 编辑器是vscode

2. 安装插件easy less

3. 在vscode的设置加入如下配置：

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

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

第六章：常见组件

重点讲解⼩程序中常⽤的布局组件 view,text,rich--text,button,image,navigator,icon,swiper,radio,checkbox 等

6.1 view

代替 原来的 div 标签

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

属性

6.2 text

<!--
    1、长按文字复制 selectable
    2、对文本内容进行解码
-->
<!--已弃用-->
<text selectable>text</text>
<!--当前使用-->
<text user-select decode>
    text&nbsp;123\n&lt;
</text>

1. 文本标签
2. 只能嵌套text
3. 长按文字可以复制（只有该标签有这个功能）
4. 可以对空格 回车进行编码

属性

代码

<text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
</text>

space的合法值

Tips

1. tip: decode可以解析的有  <&'  
2. tip: 各个操作系统的空格标准并不一致。
3. tip:text 组件内只支持 text 嵌套。
4. tip: 除了文本节点以外的其他节点都无法长按选中。
5. bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效

6.3 image

<!--
    image图片标签
    1、src指定要加载的图片路径
        图片存在默认的宽度和高度320*240 原图大小是200*100
    2、mode决定图片内容如何和图片标签宽高做适配
        1.scaleToFill:默认值，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
        2.aspectFit：保持宽高比，确保图片的长边显示出来 页面轮播图常用
        3.aspectFill：保持宽高比，确保图片的短边显示出来  少用
        4.widthFix：宽度不变，以前web的图片的缩放模式，宽度指定了之后，高度会自己按照比例来调整  常用
        5.类似于以前的background-position，不缩放图片，只显示图片的..区域    少用
            top：
            bottom
            center
            left
            right
            top left
            top right
            bottom left
            bottom right
    3、小程序中的图片直接就支持懒加载 lazy-load
        1.lazy-load会自己判断 当图片出现在视口的上下三屏的高度之内的时候，自己开始加载图片
-->
<image src="https://i.loli.net/2021/11/18/xE7hvpTj2oZtC4F.jpg" mode="top" lazy-load="true"></image>

1. 图⽚标签，image组件默认宽度320px、⾼度240px
2. ⽀持懒加载

属性

model的合法值

Tips

1. tip：image组件默认宽度320px、高度240px
2. tip：image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别

6.4 swiper

<!--
    1、轮播图外层容器swiper
    2、每一个轮播项 swiper-item
    3、swiper标签存在默认样式
        1. width 100%
        2. height 150px
        image也存在默认的宽度和高度：320*240
        3. swiper高度无法实现由内容撑开
    4、先找出来原图的宽度和高度，等比例地给swiper定宽度和高度
        原图的宽度和高度：1125*352px
        swiper的宽度/swiper的高度=原图的宽度/原图的高度
        swiper的高度=swiper的宽度*原图的高度/原图的宽度
        height:750rpx*352/1125
     5、autoplay：自动轮播
     6、interval：修改轮播时间
     7、circular：衔接轮播
     8、indicator-dots：是否显示面板指示点
     9、indicator-color：指示点未选中的颜色
     10、indicator-active-color：当前选中的指示点颜色
-->
<swiper autoplay="true" interval="1000" circular="true" indicator-dots="true" indicator-color="#ffffff" indicator-active-color="cornflowerblue" easing-function="linear">
    <swiper-item>
        <image mode="widthFix" src="https://i.loli.net/2021/11/18/xE7hvpTj2oZtC4F.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/2839724348/O1CN01RvuYib1hzQkyVGOP8_!!2839724348.jpg"></image>
    </swiper-item>
    <swiper-item>
        <image mode="widthFix" src="https://img.alicdn.com/imgextra/i2/2839724348/O1CN01KI3Fca1hzQkucHxFV_!!2839724348.jpg"></image>
    </swiper-item>
</swiper>

swiper {
    width: 100%;
    height: calc(750rpx*100/200);
}
image {
    width: 100%;
}

6.4.1 swiper

属性：

easy-function合法值

change事件 source 返回值

从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：

1. autoplay 自动播放导致swiper变化；
2. touch 用户划动引起swiper变化；
3. 其它原因将用空字符串表示。

Bug & Tip

1. tip: 如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

6.4.2 swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

属性

6.5 navigator

<!--
    导航组件navigator
    相当是一个块级元素，可以直接加宽度高度
    1、url:要跳转的页面路径  可以放绝对路径、相对路径
    2、target：要跳转到当前的小程序还是其它的小程序页面
        self:默认值，自己小程序的页面
        miniProgram:其他小程序的页面
    3、跳转的方式
        1.navigate：默认值，保留当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
        2.redirect：关闭当前页面，跳转到应用内的某个页面，但是不能跳转到tabbar页面
        3.switchTab:跳转到tabBar页面，并关闭其他所有非tabBar页面
        4.reLaunch:关闭所有页面，打开到应用内的某个页面
        5.navigateBack:关闭当前页面，返回上一页面，可通过getCurrentPages()获取当前的页面栈，决定需要返回几层
        6.exit：退出小程序，target="miniProgram"时生效
-->
<navigator url="/pages/demo10/demo10" target="self" open-type="navigate">轮播图页面</navigator>
<navigator url="/pages/demo10/demo10" target="self" open-type="redirect">轮播图页面redirect</navigator>
<navigator url="/pages/index/index" target="self" open-type="switchTab">TableBar页面switchTab</navigator>
<navigator url="/pages/index/index" target="self" open-type="reLaunch">reLaunch可以随便跳</navigator>
<navigator url="/pages/index/index" target="self" open-type="navigateBack">navigateBack关闭当前页面返回上一页面</navigator>

导航组件，类似于超链接标签

属性

target的合法值

open-type的合法值

version的合法值

6.6 rich-text

**富文本标签：**可以将字符串解析为对应标签，类似vue中的v-html功能

<!--
    rich-text：富文本标签
    1、nodes属性来实现
        1.接收标签字符串
            html:"<div class=\"screen-outer clearfix\">\n<div class=\"main\" role=\"main\">\n<div class=\"main-inner clearfix\">\n<div class=\"tbh-service J_Module\" data-name=\"service\" data-spm=\"201867\">\n<div class=\"service J_Service\" data-spm-ab=\"main\">\n<ul class=\"service-bd\" role=\"menubar\">\n\n<li data-closeper=\"\" aria-label=\"查看更多\" role=\"menuitem\" aria-haspopup=\"true\" data-groupid=\"0\" class=\"J_Cat a-all\">\n<i aria-hidden=\"true\" class=\"tb-ifont service-arrow\"></i>\n<a href=\"https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?wh_pid=dailyAct-257518\" data-cid=\"1\" data-dataid=\"222887\">女装</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=内衣\" data-cid=\"1\" data-dataid=\"222890\">内衣</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=家居\" data-cid=\"1\" data-dataid=\"222889\">家居</a>\n</li>\n</ul>\n</div></div></div></div></div>"
        2.接收对象数组

-->
<rich-text nodes="{{html}}"></rich-text>
<rich-text nodes="{{array}}"></rich-text>

Page({

    /**
     * 页面的初始数据
     */
    data: {
        html:"<div class=\"screen-outer clearfix\">\n<div class=\"main\" role=\"main\">\n<div class=\"main-inner clearfix\">\n<div class=\"tbh-service J_Module\" data-name=\"service\" data-spm=\"201867\">\n<div class=\"service J_Service\" data-spm-ab=\"main\">\n<ul class=\"service-bd\" role=\"menubar\">\n\n<li data-closeper=\"\" aria-label=\"查看更多\" role=\"menuitem\" aria-haspopup=\"true\" data-groupid=\"0\" class=\"J_Cat a-all\">\n<i aria-hidden=\"true\" class=\"tb-ifont service-arrow\"></i>\n<a href=\"https://huodong.taobao.com/wow/a/act/tao/dailyact/4634/wupr?wh_pid=dailyAct-257518\" data-cid=\"1\" data-dataid=\"222887\">女装</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=内衣\" data-cid=\"1\" data-dataid=\"222890\">内衣</a><span class=\"service-slash\">/</span><a href=\"https://s.taobao.com/search?q=家居\" data-cid=\"1\" data-dataid=\"222889\">家居</a>\n</li>\n</ul>\n</div></div></div></div></div>",
        array:[
            {
                //1.div标签，由name属性来指定  最常用的
                name:"div",
                //2.标签上有哪些属性
                attrs:{
                    //标签上的属性 class style
                    class:"my_div",
                    style:"color:red;"
                },
                //3.子节点：children要接收的数据类型和nodes第二种渲染方式的数据类型一致
                children:[
                    {
                        name: "p",
                        attrs: {},
                        //放文本
                        children: [{
                            type:"text",
                            text:"hello"
                        }]
                    }
                ]
            }
        ]
    }
})

属性

space的合法值

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

元素节点：type = node

文本节点：type = text

受信任的HTML节点及属性

全局支持class和style属性，不支持id属性。

Bug & Tip

1. tip: nodes 不推荐使用 String 类型，性能会有所下降。
2. tip: rich-text 组件内屏蔽所有节点的事件。
3. tip: attrs 属性不支持 id ，支持 class 。
4. tip: name 属性大小写不敏感。
5. tip: 如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6. tip: img 标签仅支持网络图片。
7. tip: 如果在自定义组件中使用 rich-text 组件，那么仅自定义组件的 wxss 样式对 rich-text 中的 class 生效

6.7 button

<!--
    button标签
    1、外观的属性
        1.size:控制按钮的大小
            1.default:默认大小
            mini:小尺寸
        2.type:控制按钮的颜色
            1.default 灰色
            2.primary 绿色
            3.warn 红色
        3.plain：按钮是否镂空，背景色透明
        4.loading:加载按钮
        5.disabled：禁用按钮
-->
<button size="default">默认按钮</button>
<button size="mini">迷你按钮</button>
<button size="mini" type="primary">primary 按钮</button>
<button size="mini" type="warn">warn 按钮</button>
<button size="mini" type="default">default按钮</button>
<button size="mini" type="primary" plain="true">plain 按钮</button>
<button size="mini" type="primary" loading>loading 按钮</button>
<button size="mini" type="primary" disabled="true">disabled 按钮</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
    6、openSetting：打开小程序中内置的授权页面
        1.授权页面中只会出现用户曾经点击过的权限
    7、feedBack：打开小程序中内置的意见反馈页面
        1.只能够通过真机调试来打开
-->

<button type="default" open-type="contact">contact</button>
<button type="default" open-type="share">share</button>
<button type="default" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button type="default" open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button type="default" open-type="launchApp">launchApp</button>
<button type="default" open-type="openSetting">openSetting</button>
<button type="default" open-type="feedback">feedback</button>

Page({
    //获取用户的手机号码信息
    getPhoneNumber(e){
        console.log(e)
    },
    //获取用户个人信息
    getUserInfo(e){
        console.log(e)
    }
})

属性

按钮。

size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

open-type的contact实现流程

1. 将小程序的appid由测试号改为自己的appid
2. 登录小程序官网，添加客服-微信
3. 为了方便演示，自己准备了两个账号
   1. 普通用户A
   2. 客服-微信B
4. 就是干！

lang 的合法值

Bug & Tip

1. tip: button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
2. tip: bindgetphonenumber 从1.2.0 开始支持，但是在1.5.3以下版本中无法使用wx.canIUse进行检测，建议使用基础库版本进行判断。
3. tip: 在bindgetphonenumber 等返回加密信息的回调中调用 wx.login 登录，可能会刷新登录态。此时服务器使用 code 换取的 sessionKey 不是加密时使用的 sessionKey，导致解密失败。建议开发者提前进行 login；或者在回调中先使用 checkSession 进行登录态检查，避免 login 刷新登录态。
4. tip: 从 2.1.0 起，button 可作为原生组件的子节点嵌入，以便在原生组件上使用 open-type 的能力。
5. tip: 目前设置了 form-type 的 button 只会对当前组件中的 form 有效。因而，将 button 封装在自定义组件中，而 form 在自定义组件外，将会使这个 button 的 form-type 失效。

6.8 icon

<!--
    小程序中的字体图标
    1、type：图标的类型
        success、success_no_circle、info、warn、waiting、cancel、download、search、clear
    2、size：图标的大小
    3、color：图标的颜色
-->
<icon type="success" size="60" color="#0094ff"></icon>
<icon type="cancel" color="red"></icon>

图标。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性

6.9 radio

<!--
    radio单选框
    1、radio标签必须要和父元素radio-group来使用
    2、value：选中的单选框的值
    3、需要给radio-group绑定change事件
    4、需要在页面中显示选中的值
-->
<radio-group bindchange="handleChange">
    <radio value="male" color="#0094ff">男</radio>
    <radio value="female" color="red">女</radio>
</radio-group>

<view>您选中的是：{{gender}}</view>

Page({

    /**
     * 页面的初始数据
     */
    data: {
        gender:""
    },
    handleChange(e){
        //1.获取单选框中的值
        var sex=e.detail.value
        //2.把值赋给data中的数据
        this.setData({
            gender:sex
        })
    }
})

单选项目

需要搭配radio-group使用

radio-group

单项选择器，内部由多个 radio 组成。

6.10 checkbox

需要搭配checkbox-group一起使用

多选项目。

属性

checkbox-group

多项选择器，内部由多个checkbox组成。文章来源地址https://www.toymoban.com/news/detail-861721.html

到了这里，关于【微信小程序系列02】微信小程序（二）第四章、第五章、第六章的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！