微信小程序（一）

仲夏夜的开场

已于 2022-03-17 21:00:03 修改

阅读量6.5k

点赞数 6

分类专栏：前端 # 小程序文章标签：微信小程序小程序 css

于 2022-01-22 15:00:36 首次发布

本文链接：https://blog.csdn.net/qq_33390700/article/details/122637726

版权

前端同时被 2 个专栏收录

39 篇文章 4 订阅

订阅专栏

小程序

3 篇文章 4 订阅

订阅专栏

视频地址：
https://www.bilibili.com/video/BV1nE41117BQ?from=search&seid=137118609700337857

微信小程序的官网：https://mp.weixin.qq.com/cgi-bin/wx
可以获得开发支持。
在这里插入图片描述

在这里插入图片描述
选择Javascript - 基础模板，否则生成的页面对应的不是js文件，而是ts文件。

用微信开发者工具创建项目，用VS打开项目进行编辑后，使用微信开发者工具保存。
这样方便一些。

vscode开发微信小程序安装的插件:

wechat-snippet – 安装后可以代码片段自动完成，很好用。
微信小程序代码辅助,代码片段自动完成
minapp
微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
需要输入<才会触发标签补全
输入空格会触发对应标签的属性补全
wxapp-helper
选择创建wx组件，自动生成配套的文件，简直不要太爽

AppID(小程序ID) wx65cecec8023d6b08

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

基本的项目结构

7 WXML语法

7.1 介绍

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

用以下一些简单的例子来看看 WXML 具有什么能力：

数据绑定

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模板

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

7.4 条件渲染

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

<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意：并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

9 样式WXSS

9.2 样式导入

9.3 选择器

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

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

⽬前⽀持的选择器有：

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

9.4. ⼩程序中使⽤less

原⽣⼩程序不⽀持 less ，其他基于⼩程序的框架⼤体都⽀持，如 wepy ， mpvue ， taro 等。但是仅仅因为⼀个less功能，⽽去引⼊⼀个框架，肯定是不可取的。因此可以⽤以下⽅式来实现

第3步的配置步骤：

less语法与wxss语法对比

10 常见组件

text

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gSqEnspw-1642834758387)(C:/Users/12141/Pictures/u=45286870,147646058&fm=11&fmt=auto&gp=0.webp)]

image 图片

swiper 轮播图

.wxml

<!-- 
  1 轮播图外层容器 swiper
  2 每一个轮播项 swiper-item
  3 swiper标签 存在默认样式
    1 width 100%
    2 height 150px image存在默认宽度和高度 320 * 240
    3 swiper 高度 无法实现由内容撑开
  4 先找出来 原图的宽度和高度 等比例的给 swiper 定高度和宽度
    原图的宽度和高度 553 * 300 px
    swiper宽度 / swiper高度 = 原图宽度 / 原图高度
    swiper高度 = swiper宽度 * 原图高度 / 原图宽度
    height: 750rpx(100vw) * 300px / 553px
  5 autolay 自动轮播
  6 interval 修改轮播时间
  7 circular 衔接轮播
  8 indicator-dots 是否显示面板指示点 指示器 分页器 索引器
 -->
<swiper autoplay interval="3000" circular indicator-dots>
  <swiper-item class="" item-id="">
    <image mode="widthFix" src="https://profile.csdnimg.cn/A/6/9/1_qq_33390700"/>
  </swiper-item>
  <swiper-item class="" item-id="">
    <image mode="widthFix" src="https://s2.loli.net/2022/01/09/cfjyLWH8J7OZxdG.jpg" />
  </swiper-item>
  <swiper-item class="" item-id="">
    <image mode="widthFix" src="https://img-bss.csdn.net/1640168114891.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />
  </swiper-item>
</swiper>

.wxss

swiper{
  width: 100%;
  height: calc(100vw * 300 / 553);
}
image{
  width: 100%;
}

navigator 导航标签

<!-- 
  导航组件 navigator
  0 块级元素 默认会换行 可以直接加宽度和高度
  1 url 要跳转的页面路径 绝对路径 相对路径
  2 target 要跳转到当前的小程序 还是其他的小程序的页面
    self 自己 小程序的页面
    miniprogram 其他的小程序的页面
  3 open-type 跳转的方式
    1 navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面
    2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面
    3 switchTab 跳转到 tabBar 页面，并关闭其他所有非tabBar页面
    4 reLaunch 关闭所有页面，打开到应用内的某个页面
 -->
<navigator url="/pages/demo10/demo10">轮播图页面</navigator>
<navigator url="/pageQs/index/index">直接跳转到 tabBar页面</navigator>
<navigator url="/pages/demo10/demo10" open-type="redirect">轮播图页面 redirect</navigator>
<navigator url="/pages/demo10/demo10" open-type="redirect">轮播图页面 redirect</navigator>
<navigator url="/pages/index/index" open-type="reLaunch">reLauch 可以随便跳</navigator>

rich-text 富文本标签

使用rich-text的nodes属性，将标签字符串或者对象数组显示出来。

demo12.js

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

demo12.wxml

// pages/demo12/demo12.js
Page({
    /**
 * 页面的初始数据
 */
    data: {
        //  1 标签字符串
        html1: '<div class="sc-bwzfXH Humzi"><div class="sc-bxivhb fUSOkc"></div><div class="sc-ifAKCX eyLbbH"><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://www.tmall.com/wow/z/heybox/heyboxrax/heybox?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.1&amp;scm=1007.home_icon.tmallxp.d&amp;wh_biz=tm&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫新品</p></a><a class="sc-gzVnrw krOjeo" href="https://h5.m.taobao.com/trip/home/index.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.6&amp;scm=1007.home_icon.lvx.d&amp;_wx_tpl=http%3A%2F%2Fh5.m.taobao.com%2Fapp%2Ftriprxhome%2Fpages%2Fhome%2Findex.weex.js&amp;wx_navbar_hidden=true&amp;ttid=12mtb0000155"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1O_AyVwHqK1RjSZFPXXcwapXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">机票酒店</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.2&amp;scm=1007.home_icon.juhs.d&amp;_wml_code=9XZq%2Bt%2FxdGk2vxtkbZvNtxIRr1Fl5o%2F4JYkxzjiABZCkN0X4ug9ejN%2FEA0XumFdlCJmui3oZzrfxu2OjRTO%2FUldTSbERTDFnNVuaq4bGXYarnsLycd1U6o4btoe8H%2FSSeBk5iibFKlpytcA4vdUvH%2BU%2BttvWBrsoV0Txewchwr8%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">今日爆款</p></a><a class="sc-gzVnrw krOjeo" href="https://market.m.taobao.com/app/tmall-wireless/tjb-2018/index/index.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.7&amp;scm=1007.home_icon.lingjb.d&amp;disableNav=YES#/tjb"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB19yZJVBLoK1RjSZFuXXXn0XXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">金币庄园</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://pages.tmall.com/wow/z/import/tmg-rax-home/tmallimportHomewupr-index?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.3&amp;scm=1007.home_icon.tmallgj.d&amp;wh_biz=tm&amp;wh_pid=tmg-rax-home%2FtmallimportHome&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫国际</p></a><a class="sc-gzVnrw krOjeo" href="https://market.m.taobao.com/app/pm/new-main/home?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.8&amp;scm=1007.home_icon.paim.d&amp;pha=true&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB16ZYDk4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">阿里拍卖</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://chaoshi.m.tmall.com/?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.4&amp;scm=1007.home_icon.tmallcs.d2&amp;_ig=shoutao"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1FucwVwHqK1RjSZFgXXa7JXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫超市</p></a><a class="sc-gzVnrw krOjeo" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.9&amp;scm=1007.home_icon.taobch.d&amp;_wml_code=6WHamsDC%2B8ca9ElMubUiQjsRC0O2j4yGgKPCJIKXglo%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB19dcwVyrpK1RjSZFhXXXSdXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">淘宝吃货</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.5&amp;scm=1007.home_icon.chongzzx.d&amp;_wml_code=Vfw8V4IdfflvFcsPv2fKDCLgFlhCoOQ406ZO9WKS70zNVh2FhuClrYZQHV%2BUj8rweMrPJgOrvqON3zeUHJMIALqc03AQZnf3hmtKmJM2g5PuR9UuzwivVDM%2Bil4nBDGBPXlfSqZZA3CdATGQpVOeZMO8SbyJvaZdoC89%2B2Gg8FZsD4wqDUKs7VcgTjZxbgdE&amp;subSource=stcz_1"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1llI3f4n1gK0jSZKPXXXvUXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">充值中心</p></a><a class="sc-gzVnrw krOjeo" href="https://market.m.taobao.com/app/tbsearchwireless-pages/new-catemap/p/s-nx-categories?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.10&amp;scm=1007.home_icon.fenl.d&amp;wh_weex=true"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1nBktVxTpK1RjSZR0XXbEwXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">分类</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.11&amp;scm=1007.home_icon.xiany.d&amp;_wml_code=2RLfNbB12QpISV%2BL7aiHZwm5noZrOPbYmjwLhlOAmgeK3XKiEERT7ZdlL5lwWrfH8vrxje8x3wcjpFnTBn2bZuI6VIVmz1Ww1SxKMPNxdKnSxkM02klo1Wq1PvanB8MPDB7%2Fxfoi8vf2ert4z%2BOYjJBMsIILVspKvgSN8SN%2BsCg%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1CoEwVrvpK1RjSZFqXXcXUVXa-185-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">闲鱼</p></a><a class="sc-gzVnrw krOjeo" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.12&amp;scm=1007.home_icon.tmallsx.d&amp;_wml_code=uxMdTqOeZt4IfBD8ssl15zR25nV9irif72OvYZHv66PlUxWwFw7AI3Y4j1t%2FGJXQYDZlDvAssH0HSvvBn2twyr3u7MVHWWGQZIVPwerViJM0j60YHvZMcG3JG1ZCBQswmg48wSD9%2BC%2FgFzZX0JcgQenoXJca%2B2FpGgRDcldUh%2F4mrO0cKrXo5rF%2Fsyo7cH7G"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1fcOKXkCy2eVjSZSyXXXukVXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">天猫美食</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://pages.tmall.com/wow/a/act/tmall/dailygroup/18/wupr?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.13&amp;scm=1007.home_icon.88vip.d&amp;wh_pid=daily-186355&amp;disableNav=YES"><img class="sc-htoDjs gRQzSI" src="https://img.alicdn.com/tfs/TB1FyEazAY2gK0jSZFgXXc5OFXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">会员中心</p></a><a class="sc-gzVnrw krOjeo" href="https://pages.tmall.com/wow/yao/20485/aljkmh?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.14&amp;scm=1007.home_icon.alijk.d&amp;wh_biz=tm"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1tikBVAPoK1RjSZKbXXX1IXXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">阿里健康</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://m.duanqu.com?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.15&amp;scm=1007.home_icon.zdxh.d&amp;_ariver_appid=6158543"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1xcTYxFT7gK0jSZFpXXaTkpXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">造点新货</p></a><a class="sc-gzVnrw krOjeo" href="https://huodong.m.taobao.com/act/snipcode.html?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.16&amp;scm=1007.home_icon.koubsh.d&amp;_wml_code=qeLJPHY5ySO3lef1quOfGhXh%2B8UW1yf1hl95h8wZUjlFlGFkyop3K4Hb%2B95myeqeJT4BYa03LO60S6xd8wO18LZ3%2FVvg2pTGoYLZvdSZu8bbze9cO%2FiQDU%2F6LiQkOXRW6f4DA%2FMN2L81ERi%2Bbsad%2Fk%2BxIGTGkv98p4M7sIG2SpI%3D"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB1h1MnVCrqK1RjSZK9XXXyypXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">口碑生活</p></a></div><div class="sc-bZQynM famEdQ"><a class="sc-gzVnrw bhThaH" href="https://m.duanqu.com?utparam=%7B%22ranger_buckets_native%22%3A%22tsp2584_31920%22%7D&amp;spm=a2141.1.iconsv5.17&amp;scm=1007.home_icon.tuhuo.d&amp;_ariver_appid=17570832"><img class="sc-htoDjs gRQzSI" src="https://gw.alicdn.com/tfs/TB11tFkr7L0gK0jSZFxXXXWHVXa-183-144.png?getAvatar=1"><p class="sc-dnqmqq blJSr">土货鲜食</p></a><!-- empty --></div></div><div class="sc-iwsKbI gZEhzb"><div class="sc-gZMcBi kwnYjG"><div class="sc-gqjmRU llyiGn"></div></div></div></div>',
        //  2 对象数组
        html2:[
            {
                // 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"
                            }
                        ]
                    }
                ]
            }
            
        ]
    }
})

button 按钮标签

在这里插入图片描述

demo13.wxml

<!-- 
  button 标签
  1 外观的属性
    1 size 控制按钮的大小
      1 default 默认大小
      2 mini 小尺寸
    2 type 控制按钮的颜色
      1 default 白色
      2 primary 绿色
      3 warn 红色 
    3 plain 按钮是否镂空，背景色透明
 -->
 <button>默认按钮</button>
 <button size="mini">mini 默认按钮</button>
 <button type="primary">primary 按钮</button>
 <button type="warn">warn 按钮</button>
 <button plain>默认按钮</button>
 <button type="primary" plain>primary 按钮</button>
 <button type="warn" plain>warn 按钮</button>
 <button type="primary" loading>primary 按钮</button>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mbXHaKeA-1646720498225)(C:/Users/12141/AppData/Roaming/Typora/typora-user-images/image-20220211191722172.png)]

button的开放能力1

在这里插入图片描述

 <!-- 
   button 的开放能力
   open-type
    1 contact	打开客服会话，需要在微信小程序的后台配置
    2 share	转发当前的小程序 到微信朋友中 不能分享到朋友圈
    3 getPhoneNumber	获取用户手机号 结合一个事件来使用；不是企业的小程序账号，没有权限来获取用户的手机号码
      1 绑定一个事件 bindgetphonenumber
      2 在事件的回调函数中 通过参数来获取信息
      3 获取到的信息 已经加密过了
        需要用户自己搭建小程序的后台服务器， 在后台服务器中进行解析 手机号码，返回到小程序中就可以看到信息了。
    4 getUserInfo	获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）	1.3.0
      1 使用方法 类似 获取用户的手机号码
      2 可以直接获取 不存在加密的字段
    5 launchApp	在小程序中直接打开APP，可以通过app-parameter属性设定向APP传的参数具体说明	1.9.5
      1 需要先在app中通过app的某个链接打开小程序
      2 在小程序中再通过这个功能重新打开app
      3 找到京东的app 和京东的小程序，演示步骤1和2
    6 openSetting	打开授权设置页	2.0.7
      1 授权页面中 只会出现用户曾经点击过的权限
    7 feedback	打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容	2.1.0
      
    8 chooseAvatar	获取用户头像，可以从bindchooseavatar回调中获取到头像信息	2.21.2
  -->

<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>
<button open-type="chooseAvatar">chooseAvatar</button>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fWNsvOnq-1646720498226)(C:/Users/12141/AppData/Roaming/Typora/typora-user-images/image-20220211192241626.png)]

Page({
    // 获取用户的手机号码
    getPhoneNumber(e){
        console.log(e);
    }
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5zxk5Vqs-1646720498227)(C:/Users/12141/AppData/Roaming/Typora/typora-user-images/image-20220211212548434.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sw5mynAv-1646720498228)(C:/Users/12141/AppData/Roaming/Typora/typora-user-images/image-20220211212531887.png)]

Page({
    // 获取用户个人信息
    getUserInfo(e){
        console.log(e);
    }
})

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dsB0uHIR-1646720498229)(C:/Users/12141/AppData/Roaming/Typora/typora-user-images/image-20220211213223115.png)]

icon 图标标签

在这里插入图片描述

<!-- 
  icon 图标标签
  1 type icon的类型
    success|success_no_circle|info|warn|waiting|cancel|download|search|clear
  2 size icon的大小 默认为23
  3 color
 -->
<icon class="" type="success" size="23" color=""></icon>
<icon class="" type="success_no_circle" size="23" color=""></icon>
<icon class="" type="info" size="23" color=""></icon>
<icon class="" type="warn" size="23" color=""></icon>
<icon class="" type="waiting" size="23" color=""></icon>
<icon class="" type="cancel" size="23" color=""></icon>
<icon class="" type="download" size="23" color=""></icon>
<icon class="" type="search" size="23" color="">  </icon>
<icon class="" type="clear" size="23" color=""></icon>

在这里插入图片描述

radio 单选项标签

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

// pages/demo15/demo15.js
Page({
    data: {
        gender: ""
    },
    handleChange(e) {
        // 1 获取单选框中的值
        let gender=e.detail.value;
        // 2 把值赋值给data中的数据
        this.setData({
            // gender gender
            gender
        })
    }
})

在这里插入图片描述

10.10 checkbox

<!--pages/demo16/demo16.wxml-->
<!-- 需求：勾选一个或多个选项，并在下方显示出来 -->
<view>
  <checkbox-group bindchange="handleItemChange">
    <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
      {{item.name}}
    </checkbox>
  </checkbox-group>
  <view>选中的水果：{{checkedList}}</view>
</view>

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

  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {
        id:0,
        name:"苹果",
        value:"apple"
      },
      {
        id:1,
        name:"葡萄",
        value:"grape"
      },
      {
        id:2,
        name:"香蕉",
        value:"banana"
      }
    ],
    checkedList: []
  },
  // 复选框的选中事件
  handleItemChange(e) {
    // 1 获取被选中的复选框的值
    const checkedList=e.detail.value;
    // 2 进行赋值
    this.setData({
      checkedList
    })
  }
  
})

在这里插入图片描述

二、自定义组件

类似vue或者react中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面

1 自定义组件的初体验

新增自定义组件
在页面的json文件中，声明引用
使用组件

1.1 新增自定义组件

类似于页面，一个自定义组件由json wxml wxss js 4个文件组成

根目录下新增components文件夹；
在components文件夹中，新建文件夹，名称为自定义组件的名称，例如Tabs
在微信开发者工具中快速创建组件的文件结构，点击components文件夹中的自定义组件的文件夹，右键后，点击新建Component后，输入自定义组件名称即可。

1.2 声明自定义组件
在自定义组件声明
配置自身引用的自定义组件
在这里插入图片描述

1.3 使用自定义组件
在页面当中，将它当做普通组件来使用。

2 自定义组件-Tabs-样式优化

.wxss文件设置

/* 这里的样式只应用于这个自定义组件 */
.tabs {}
.tabs_title {
  display: flex;
  padding:10rpx 0;
}
.title_item {
  /* flex-grow设置为1。所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话） */
  flex: 1;
  display: flex;
  /* 容器属性，容器内项目水平居中 */
  justify-content: center;
  /* 容器属性，容器内项目垂直居中 */
  align-items: center;
}
.active {
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content {
 
}

修改组件的标签结构
替换active – {{item.isActive?'active':''}}
在这里插入图片描述

3 自定义组件-标题激活选中

在这里插入图片描述
补充小细节
let {tab} = this.data; 等同于let tabs = this.data.tabs;
第4步中的tabs.forEach等同于this.data.tabs.forEach

最严谨的做法应该是：重新拷贝一份数组，再对数组的备份进行处理；而不是直接修改this.data数据
在这里插入图片描述

4 自定义组件-父向子传递数据

修改自定义组件，把自定义组件中的内部数据tabs抽离出来，变成由父组件传递过来。从而实现数据动态化。
通过属性的方式来传递。
初体验：
父组件.wxml

<!-- 
  1 父组件（页面）向子组件传递数据，是通过标签属性的方式来传递的
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据，直接使用
 -->
 <!-- 向tabs子组件传递了一个数据：属性名为“aaa”，属性值是“123” -->
<Tabs aaa="a123b"></Tabs>

子组件.js：

    /**
     * 组件的属性列表
     * 里面存放的是：要从父组件中接收的数据
     */
    properties: {
      // 要接收的数据的名称
      aaa:{
        // type--要接收的数据的类型
        type:String,
        // value--默认值
        value:""
      }
    }

子组件的wxml：

<view>
  {{aaa}}
</view>

在这里插入图片描述
效果：

应用：
要传递的数据是之前写在Tab.js文件中的tabs数组（如图）
在这里插入图片描述
改写到页面的初始数据中（如下图）：

<!-- 
  1 父组件（页面）向子组件传递数据，是通过标签属性的方式来传递的
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据，直接使用
 -->
 <!-- 向tabs子组件传递了一个数据：属性名为“tabs”，属性值是js文件中的数据 -->
<Tabs tabs="{{tabs}}"></Tabs>

修改子组件.js文件中，要接受的数据名称、数据类型和默认值。

/**
     * 组件的属性列表
     * 里面存放的是：要从父组件中接收的数据
     */
    properties: {
      // 要接收的数据的名称
      tabs:{
        // type--要接收的数据的类型
        type:Array,
        // value--默认值
        value:[]
      }
    },

这时，在子组件.wxml文件中就可以使用tabs数组了。

在这里插入图片描述

自定义组件-子向父传递数据

虽然子组件中的初始数据tabs不存在，对其的拷贝会出现问题。但是，程序没有报错，点击效果依然是正确的-- 点击时字体变红，会出现红色的下边框。
原因：this.data.tabs拿到的是properties中的tabs数据，故没有报错；对其进行设置后，将修改后的tabs写入了data中。

在这里插入图片描述
看似没有问题，其实无论前端点击哪个tab，在AppData中的数据的isActive属性都不会发生变化。
setData方法将tabs数据写入子组件的data中，这时，子组件中存在2个tabs数据。这是不对的，因为我们希望点击标题时，父组件的tabs数据发生改变。

AppData 这个选项卡是保存什么数据的呢？
好像是看最上方的路径，显示相应的页面或者组件中的数据的。
在这里插入图片描述
修改：在子组件的点击事件触发的时候，把索引传给父组件，父组件在方法函数中处理tabs数据。

子组件.js文件中，触发父组件的方法，并向父组件传递数据

/**
     * 组件的方法列表
     * 1.页面.js文件中，存放事件回调函数的时候，存放在data同层级下！！！
     * 2.组件.js文件中，存放事件回调函数的时候，必须要存放在methods中
     */
    methods: {
      handleItemTap(e) {
        /* 
        1.绑定点击事件，需要在methods中绑定
        2.获取被点击的索引
        3.获取原数组
        4 对数组循环
          1 给每一个循环项，选中属性，改为false
          2 给当前索引的项，添加激活选中效果
        改3 点击事件触发的时候
          触发父组件中的自定义事件，同时传递数据给父组件
          this.triggerEvent("父组件自定义事件的名称",要传递的参数)
        */
        // 2 获取索引
        // console.log(e);
        const {index} = e.currentTarget.dataset
        
        // 改3
        // 触发父组件中的itemChange事件，并传递一个对象参数，索引和值都是index
        this.triggerEvent("itemChange",{index})
      }
    }

父组件.wxml文件，加入自定义事件和其触发的方法

<!-- 
  1 父组件（页面）向子组件传递数据，是通过标签属性的方式来传递的
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据，直接使用
  2 子向父组件传递数据，通过事件的方式传递
    1 在子组件的标签上加入一个自定义事件
 -->
 <!-- 向tabs子组件传递了一个数据：属性名为“tabs”，属性值是js文件中的数据 -->
 <!-- 触发itemChange事件，执行handleItemChange方法 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

父组件.js中写方法

// 自定义事件，用来接收子组件传递的数据
    handleItemChange(e) {
      // console.log(e);
      // 接收传递过来的参数
      const {index} = e.detail
      console.log(index);
      // 3.获取原数组
      // 解构--对复杂类型进行解构，复制了一份变量的引用而已
      let {tabs} = this.data
      // 最严谨的做法：重新拷贝一份数组，再对这个数组的备份进行处理
      // let tabs = JSON.parse(JSON.stringify(this.data.tabs))
      // 4 对数组循环
      // [].forEach 遍历数组，遍历的同时修改v，也会导致原数组被修改
      tabs.forEach((v,i) => i===index?v.isActive=true:v.isActive=false)  
      this.setData({
        tabs
      })
    }

自定义组件-slot

1、在子组件中写一个<slot></slot>标签；
2、在父组件中写的子组件标签中填入多个标签。
这些填入的标签，就会替换slot标签的位置。

<!-- Tabs.wxml -->
<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view> -->
    <view
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="handleItemTap"
    data-index="{{index}}"
    >
      {{item.name}}
    </view>

  </view>
  <view class="tabs_content">
    <!-- 
      slot标签--其实就是一个占位符 插槽
      等到父组件调用子组件的时候，再传递标签过来
      最终这些被传递的标签，就会替换slot标签的位置
    -->
    <slot></slot>
  </view>
</view>

<!-- Demo.wxml -->
<!-- 
  1 父组件（页面）向子组件传递数据，是通过标签属性的方式来传递的
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据，直接使用
  2 子向父组件传递数据，通过事件的方式传递
    1 在子组件的标签上加入一个自定义事件
 -->
 <!-- 向tabs子组件传递了一个数据：属性名为“tabs”，属性值是js文件中的数据 -->
 <!-- 触发itemChange事件，执行handleItemChange方法 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
  <block wx:if="{{tabs[0].isActive===true}}">0</block>
  <block wx:elif="{{tabs[1].isActive===true}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>
  <block wx:else="{{tabs[3].isActive}}">3</block>
</Tabs>

组件的其他属性

官方文档参考：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
在这里插入图片描述
Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法
等。

12 小程序生命周期

分为应用生命周期和页面生命周期
关于小程序前后台的定义和小程序的运行机制，请参考运行机制章节。

12.1 应用生命周期

应用其实指的是一个文件–小程序的入口文件–app.js
app.js文件最外层是App
页面.js文件最外层是Page
组件.js文件最外层是Component

在这里插入图片描述

// app.js
App({
  // 1 应用第一次启动就会触发的事件
  onLaunch() {
    // 在应用第一次启动的时候，就可以获取用户的个人信息，从而在页面使用信息
    console.log("onLauch");
  }
})

//app.js
// 2 应用被用户看到
  onShow() {
    //一般用来，对应用的数据或者页面数据进行重置操作
    console.log("onShow");
  }

切后台操作：点击下图的模拟操作按钮，选择Home
在这里插入图片描述
切后台操作后，页面如下图，点击图中选项，代表重新由这些场景切换至小程序。（比如1019：微信钱包，就是从微信钱包跳转至小程序）

// 3 应用被隐藏
  onHide() {
    // 不希望应用隐藏时定时器继续执行，暂停或清除定时器
    console.log("onHide");
  }

// app.js
App({
  // 1 应用第一次启动就会触发的事件
  onLaunch() {
    // 在应用第一次启动的时候，就可以获取用户的个人信息，从而在页面使用信息
    console.log("onLauch");
    aaaa //报错的地方
  },
  // 4 当应用代码发生报错时触发，有形参
  onError(err) {
    // 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误的信息发送到后台去。当版本升级或修复代码时，可以针对进行代码的修改
    console.log("onError");
    console.log(err);
  }
})

// app.js
App({
  // 1 应用第一次启动就会触发的事件
  onLaunch() {
    // 在应用第一次启动的时候，就可以获取用户的个人信息，从而在页面使用信息
    console.log("onLauch");
    // aaaa
    // js的方式来跳转
    wx.navigateTo({
      url:'/11/22/33'// 入口页面找不到跳转的页面，是不会触发5的
    })
  },
  // 5 页面找不到时触发
  // 应用第一次启动的时候，找不到第一个入口页面，才会触发
  onPageNotFound() {
    // 如果页面不存在了，通过js的方式来重新跳转页面，重新跳到第二个首页
    // 不能跳到tabbar页面，导航组件类似
    wx.navigateTo({
      url:"pages/demo17/demo17"
    })
    // console.log("onPageNotFound");
  }
})

通过下图这种方式指定应用的启动页面

在这里插入图片描述

页面生命周期

在这里插入图片描述

仲夏夜的开场

关注

6
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
微信小程序（一）

视频地址：https://www.bilibili.com/video/BV1nE41117BQ?from=search&seid=137118609700337857AppID(小程序ID) wx65cecec8023d6b08官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/基本的项目结构9 样式WXSS9.2 样式导入9.3 选择器特别需要注意的是⼩程序不⽀持通配符 * 因此以下代码⽆
复制链接

扫一扫

专栏目录