【微信小程序】入门学习笔记

最新推荐文章于 2024-06-03 16:17:34 发布
最新推荐文章于 2024-06-03 16:17:34 发布
阅读量474 收藏
点赞数
文章标签： 微信小程序 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30130205/article/details/130442333
版权

原生框架的目录结构

全局配置文件：pages字段

全局配置文件：window字段

全局配置文件：tabbar字段

页面配置

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#0094aa",
  "navigationBarTitleText": "我的应用Dmeo01"
}

数据绑定、运算、素组和对象循环、block标签的使用、条件渲染

wxml

<!--pages/demo03/demo03.wxml-->
<!-- 
    text相当于以前web中的 span标签 行内元素 不会换行
    view相当于以前web中的 div标签 块级元素 会换行
    checkbox 就是以前的复选框标签
 -->
<!-- <text>我相当于span标签</text>
<view>我相当于div标签</view>  -->

<!-- 1 字符串 -->
<view>{{msg}}</view>
<!-- 2 数字类型 -->
<view>{{num}}</view>
<!-- 3 布尔类型 -->
<view>是否认真学习：{{isGirl}}</view>
<!-- 4 Object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

<!-- 5 在标签的属性中使用 -->
<view data-num="{{num}}">自定义属性</view>

<!-- 6 使用布尔类型充当属性时 checked等于true时为选中状态-->
<view>
    <checkbox checked="{{isChecked}}"></checkbox>
</view>

<!-- 
    7 运算 =》 表达式
        1. 可以在花括号中 加入 表达式---“语句”
        2.表达式
            指的时一些简单 运算 数学运算 字符串 逻辑运算。。
            1 数字的加减
            2 字符串拼接
            3 三元表达式
        3.语句
            1 复杂语句代码段
                1 if else
                2 switch
                3 do while
                4 for
        4.花括号里只能加入表达式，不能够加入语句，否则会报错
 -->
 <view>{{1+1}}</view>
 <view>{{'1'+'1'}}</view>
 <view>{{10%2===0? '偶数':'奇数'}}</view>
<!-- 
     8 列表循环
        1 wx:for="{{数组或对象}}"
          wx:for-item="循环项的名称"
          wx:for-index="循环项的索引"
        2 wx:key="唯一值" 用来提高列表渲染的性能
            1 wx:key 绑定一个普通的字符串的时候，那么这个字符串名称 肯定是循环数组中的对象的唯一属性
            2 wx:key ="*this" 旧表示你的数组是一个普通的数组 *this表示是循环项
                [1,2,3,4,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"）可以省略

     9 对象循环
        1 wx:for="{{对象}}" wx:for-item="对象的值"  wx:for-index="对象的属性"
        2 循环对象的时候 最好把 item和index的名称都改一下
            wx:for-item="value"  wx:for-index="key"
-->
<view>
    <view 
    wx:for="{{list}}" 
    wx:key="id"
    >
        索引：{{index}} 
        --
        值：{{item.name}}
    </view>
</view>

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

<!-- 
    10 block标签
        1 占位符标签
        2 写代码的时候 可以看到这个标签存在
        3 页面渲染，小程序就会把他移除掉
 -->

<view>
    <block
    wx:for="{{list}}" 
    wx:key="id"
    class="my_list"
    >
        索引：{{index}} 
        --
        值：{{item.name}}
    </block>
</view>

<!-- 
    11 条件渲染
        1 wx:if="{{true/false}}"
        2 if,else,elif
            we:if
            we:elif
            wx:else
        3 hidden（隐藏）
            1 在标签上直接加入hidden
            2 hidden="{{true}}"
            3 在什么场景下用哪个？
                *当标签不是频繁切换显示 优先使用 wx:if
                直接把标签从页面移除掉，会损耗性能
                *当标签频繁切换显示的时候 优先使用hidden
                通过添加样式的方式来切换显示的
                hidden不要和样式display一起使用
 -->
 <view>
     <view>条件渲染</view>
     <view wx:if="{{true}}">该标签显示</view>
     <view wx:if="{{false}}">该标签被隐藏</view>

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

     <view>=========================</view>
     <view hidden>test1</view>
     <view hidden="{{true}}">test2</view>
     <view hidden="{{false}}">test3</view>
       
       
 </view>

js:

Page({
  data: {
    msg:"hello mina",
    num:10000,
    isGirl:false,
    person:{
        age:18,
        height:170,
        weight:200,
        name:"富婆"
    },
    isChecked:false,
    list:[
      {
        id:0,
        name:"猪八戒"
      },
      {
        id:1,
        name:"天蓬元帅"
      },
      {
        id:3,
        name:"悟能"
      }
    ]
  }
})

事件绑定

wxml

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

js:

Page({
    data: {
        num:0
    },
    //输入框的input事件的执行逻辑
    handleInput(e){
        //console.log(e.detail.value);
        this.setData({
            num:e.detail.value
        })
    },
    //添加 加和减按钮的事件
    handletap(e){
        //console.log(e);
        //1.获取自定义属性 operation
        const operation = e.currentTarget.dataset.operation;
        this.setData({
            num:this.data.num + operation
        })
    }
})

样式：rpx

/* 
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.拿以上的需求，去实现不同宽度的页面适配
    750 * rpx =Y * px
    rpx = Ypx/150
    px = 750rpx/y\Y
4 利用一个属性 calc属性（css和wxss都支持）
    *750 和 rpx中间不能有空格
    *运算符的两边也不要留空格
*/
view{
    /* width: 200rpx; 这句假设用100px规格，使用calc属性*/
    width: calc(750rpx*100/375);
    height: 200rpx;
    font-size: 40rpx;
    background-color: aqua;
}

样式：导入外部样式

/* 
1 引用的代码 是 通过@import来引入的
2 路径只能使用相对路径
*/
@import "../../style/common.wxss";

view和text标签

view

<view>
    我是一段文字！！！
</view>

text

<!-- 
    1 长按文字复制 selecttable
    2 对文本内容进行 解码 decode
 -->
<text selectable decode>
    我是text标签中的一句话&nbsp;123
</text>

image图片标签

<!-- 
    images 图片标签
    1 src 指定要加载的图片路径
        图片存在默认的宽度和高度 320*240
    2 modes属性决定图片内容如何和图片标签 宽高 做适配
        *scaleToFill:不保持纵横比，宽高完全拉伸
        *aspecFit:保持宽高比，确保图片的长边(宽)显示出来（常用于轮播图，平常也用的较多）
        *aspecFill:保持比例缩放，只保证图片的 短 边能够完全显示出来。（较少用）
        *widthFix:按照宽度保持宽高比进行缩放
    3 小程序当中的图片，直接支持 懒加载 lazy-load
        lazy-load 会字节判断，当图片出现在视口上下三屏的高度之内的时候，自己就会开始加载图片
 -->
 <image src="https://pic.imgdb.cn/item/622ccd485baa1a80abd16b8b.jpg" mode="aspecFit"/>

swiper轮播图

<!-- 
    swiper 轮播图
    1 轮播图外层容器 swiper
    2 每一个轮播项 swiper-item
    3 swiper标签存在默认样式
        1.width 100%
        2.heith 150px   (测试图片宽高：1053*420)
        3.swiper 高度无法实现由内容撑开
    4 先找出 原图的宽高 等比例给swiper 定宽高
        原图宽高：1053*420 px
        swiper 宽度 / swiper 高度 = 原图的宽度 /原图的高度
        swiper 高度 = swiper 宽度 * 原图的宽度 /原图的高度
        图片高度 = 100vw * 420 / 1053
    5   autoplay 自动轮播
    6   interval 修改轮播时间
    7   circular    循环轮播
    8   indicator-dots  显示 指示器 分页器  索引器
    9   indicator-active-color 选中索引器的颜色
    10  indicator-color 未选中索引器的颜色
 -->
<swiper autoplay interval="3000" circular indicator-dots indicator-active-color="#ff0094" indicator-color="#0094ff">
    <!-- 第一张 -->
    <swiper-item><image mode="widthFix" src="//m15.360buyimg.com/mobilecms/jfs/t1/214181/39/14450/77034/6229f053Ecbd498e7/7f7ceba1b2ec05f6.jpg!cr_1053x420_4_0!q70.jpg"></image></swiper-item>
    <!-- 第二张 -->
    <swiper-item><image mode="widthFix" src="//imgcps.jd.com/ling4/10039397773289/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5fb1f71ba031dc0afaf817cb/62967bfa/cr_1125x449_0_166/s/q70.jpg"></image></swiper-item>
    <!-- 第三张 -->
    <swiper-item><image mode="widthFix" src="//m15.360buyimg.com/mobilecms/jfs/t1/221720/22/12106/134756/6226a70bEfc538c49/85b35780ecf0a201.jpg!cr_1053x420_4_0!q70.jpg"></image></swiper-item>
      
</swiper>

navigator导航标签

11页面

navigator相当于a标签

<!-- 
    导航组件    navigator
    0 navigator 是块级元素，默认会换行，可以直接添加宽高
    1 url   要跳转的页面路径，可以时绝对路径，也可以是相对路径
    2 target    要跳转到当前小程序，还是其他的小程序的页面（self为默认值，指在自己程序内跳转。miniProgram跳转到其他的小程序页面）
    3 open-type 跳转方式
        *navigate 默认值，跳转到应用内的某个页面，但是不能跳转到tabbar页面
        *redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar页面
        *switchTab跳转到 tabBar页面，并关闭其他所有非tabBar页面
        *reLaunch关闭所有页面，打开到应用内的某个页面
        *navigateBack 返回上一级
        *exit   退出其他小程序，需要和miniProgram一起使用
 -->
<navigator url="/pages/demo10/demo10">跳转到轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳转到tabbar页面</navigator>
<navigator open-type="redirect" url="/pages/demo10/demo10">跳转到轮播图页面(没有返回按钮) redirect</navigator>
<navigator open-type="switchTab" url="/pages/index/index">switchTab直接跳转到tabbar页面</navigator>
<navigator open-type="reLaunch" url="/pages/index/index">reLaunch 可以随便跳</navigator>
<navigator open-type="navigateBack" url="/pages/demo10/demo10">返回上一级</navigator>

rich-text富文本标签

富文本标签

可以将字符串解析成对应标签，类似vue中v-html功能

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

Page({
    data: {
        // 1 标签字符串  //最常用的
         //html:'<div class="sc-EHOje bYwTlh"><div class="sc-gzVnrw jHPDsO"><a class="sc-htoDjs dEOvzQ" 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-dnqmqq egIvnd" src="https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1">'

        // 2 对象数组
        html:[
            {
                //1.div标签，name属性来指定
                name:"div",
                //2.标签上有naxie属性
                attrs:{
                    //标签上的属性 class style
                    class:"my_div",
                    style:"color:red;"
                },
                //3.子节点 children 要去接收的数据类型和nodes第二种渲染方式的数据类型一致 
                children:[
                    {
                        name:"p",
                        attrs:{},
                        //放文本
                        children:[
                            {
                                type:"text",
                                text:"hello"
                            }
                        ]
                    }
                ]
            }
        ]
    },
})

button:外观样式

<!-- 
    button 标签
    1 外观属性
        *size控制按钮大小（default默认大小，mini小尺寸）
        *type用来控制按钮的颜色（default白色，primary绿色，warn红色）
        *plain按钮镂空
        *loading添加等待图标
 -->
 <button>默认按钮</button>
 <button size="mini">小按钮</button>
 <button type="primary">绿色按钮</button>
 <button type="warn">红色按钮</button>
 <button type="warn" plain>镂空按钮</button>
 <button type="primary" loading>绿色按钮</button>

在这里插入图片描述

button的开放能力

button 开放能力

open-type:

1.contact直接打开客服对话功能需要在微信小程序的后台配置

​ *只能通过真机进行测试

2.share 转发当前的小程序到微信朋友中,不能把小程序分享到朋友圈

3.getPhoneNumber获取当前用户的手机号码信息,结合一个事件来使用，不是企业的小程序账号，是没有权限来获取用户手机号码

​ *绑定一个事件bindgetphonenumber

​ *在事件的回调函数中，通过参数来获取信息

​ *获取到的信息，已经加密过啦，需要用户自己搭建小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中，就可以看到信息了

4.getUserInfo 获取当前用户的个人信息

​ *使用方法和获取手机号类似

​ *但是它可以直接获取信息，不采用加密

5.launchApp在小程序当中直接打开app

​ *需要先在App中通过app的某个链接打开小程序

​ *在小程序中在通过这个功能重新获取app

​ *案例：找到京东app和京东的小程序

6.openSetting打开小程序内置的授权页面

​ *打开小程序中的授权页面，只会出现用户曾经点过的权限

7.feedback打开小程序内置的意见反馈页面

​ *只能通过真机来调试

<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>

效果

在这里插入图片描述

ico图标

在这里插入图片描述

<!-- 
    小程序中的字体图标
 -->
 <icon type="success" size="23" color="#0094ff">
 </icon>

radio：单选框

radio 单选框

1 radio标签必须要和父标签radio-group来使用

2 value 选中单选框的值

需求：给radio-group绑定change事件

需要在页面中显示选中的值

wxml:

<radio-group bindchange="handleChange">
    <radio color="red" value="male">男</radio>
    <radio color="red" value="female">女</radio>
</radio-group>
<view>
    您选中的是：{{gender}}
</view>

js:

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

效果：

在这里插入图片描述

checkbox:复选框

案列：选中水果，然后将水果的值打印到下方

wxml:

<view>
    <checkbox-group bindchange="handleItemChange">
        <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id">
            {{item.name}}
        </checkbox>
    </checkbox-group>
    <view>
        选中的水果：{{checkdList}}
    </view>
</view>

js:

Page({
    data: {
        list:[
            {
                id:0,
                name:"🍎",
                value:"apple"
            },
            {
                id:1,
                name:"🍇",
                value:"grape"
            },
            {
                id:2,
                name:"🍌",
                value:"bananer"
            }
        ],
        checkdList:[]
    },
    //复选框的选中事件
    handleItemChange(e){
        //1.获取被选中的复选框的值
        const checkdList = e.detail.value;
        //2.进行赋值
        this.setData({
            checkdList
        })
    }
})

效果：

在这里插入图片描述

自定义组件的介绍

页面：demo17

步骤：

  1. 在pages同级目录下创建components文件夹，在其文件夹下创建组件文件夹，文件夹名字自定义，这里一Tabs为例

  2. 在自定义组件文件夹下面创建js,json,wxml,wxss文件

在这里插入图片描述

  1. 在需要使用自定义组件的json文件中注册组件

在这里插入图片描述

  1. 在页面中使用自定义组件

    wxml文件：

    <Tabs></Tabs>

自定义组件，样式优化

以下代码均在自定义组件文件下修改

wxml:

<view class="tabs">
    <view class="tabs_title">
        <!-- <view class="title_item">首页</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':''}}"
        >
        {{item.name}}
        </view>
    </view>
    <view class="tabs_content">内容</view>
</view>

js:

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

    },

    /**
     * 组件的初始数据
     */
    data: {
        tabs:[
            {
                id:0,
                name:"首页",
                isActive:true
            },
            {
                id:1,
                name:"原创",
                isActive:false
            },
            {
                id:2,
                name:"分类",
                isActive:false
            },
            {
                id:3,
                name:"关于",
                isActive:false
            }
        ]
    },

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

    }
})

wxss:

.tabs{}
.tabs_title{
    display: flex;
    padding: 10rpx 0;
}
.title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active{
    color: red;
    border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

标题激活选中

wxml:

<view class="tabs">
    <view class="tabs_title">
        <!-- <view class="title_item">首页</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="hanldeItemTap"
        data-index="{{index}}"
        >
        {{item.name}}
        </view>
    </view>
    <view class="tabs_content">内容</view>
</view>

js:

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

    },

    /**
     * 组件的初始数据
     */
    data: {
        tabs:[
            {
                id:0,
                name:"首页",
                isActive:true
            },
            {
                id:1,
                name:"原创",
                isActive:false
            },
            {
                id:2,
                name:"分类",
                isActive:false
            },
            {
                id:3,
                name:"关于",
                isActive:false
            }
        ]
    },

    /**
     * 1.页面.js文件中 存放事件回调函数的时候，存放在data同层级下！！！
     * 2.组件.js文件中 存放事件回调函数的时候，必须要存在发展methods中！！！
     */
    methods: {
            //1.绑定点击事件，需要在methods中进行绑定
            //2.获取被点击的索引
            //3.获取原数组
            //4.对数组循环
                //给每一个循环项 选中属性 改为false
                //给当前的索引项 添加激活选中效果就可以了！！！
        hanldeItemTap(e){
            //获取索引
            const {index} = e.currentTarget.dataset;
            //获取data中的数组
            //解构 对复杂类型进行解构的时候 复制了一份 遍历的引用而已
            //最严谨的做法，重新拷贝一份数组,再对这个数组的备份进行处理
            //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
            //不要直接修改this.data.数据
            let {tabs} = this.data;
            //循环数组
            //数组.forEach 遍历数组，遍历数组的时候，修改了v,也会导致原数组被修改
            tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);

            this.setData({
                tabs
            })
        }
    }
})

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

父向子传递数据的过程：

在这里插入图片描述

demo17（父元素）.wxml:

<!-- 
    1 父组件（当前页面）向子组件传递数据，通过标签属性的方式来传递
        *在子组件上进行接收
        *吧这个数据当成是data中的数据直接用即可
 -->
<Tabs tabs="{{tabs}}"></Tabs>

demo17.js:

Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs:[
            {
                id:0,
                name:"首页",
                isActive:true
            },
            {
                id:1,
                name:"原创",
                isActive:false
            },
            {
                id:2,
                name:"分类",
                isActive:false
            },
            {
                id:3,
                name:"关于",
                isActive:false
            }
        ]

    }
})

Tabs.js:

// components/Tabs/Tabs.js
Component({
    /**
     * 里面存放的是要从父组件中接收的数据
     */
    properties: {
        // //要接收的数据的名称
        // aaa:{
        //     //type 要接收数据的类型
        //     type:String,
        //     //value 默认值（不写即为父数据）
        //     value:""
        // }
        tabs:{
            type:Array,
            value:[]
        }
    },

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

    /**
     * 1.页面.js文件中 存放事件回调函数的时候，存放在data同层级下！！！
     * 2.组件.js文件中 存放事件回调函数的时候，必须要存在发展methods中！！！
     */
    methods: {
            //1.绑定点击事件，需要在methods中进行绑定
            //2.获取被点击的索引
            //3.获取原数组
            //4.对数组循环
                //给每一个循环项 选中属性 改为false
                //给当前的索引项 添加激活选中效果就可以了！！！
        hanldeItemTap(e){
            //获取索引
            const {index} = e.currentTarget.dataset;
            //获取data中的数组
            //解构 对复杂类型进行解构的时候 复制了一份 遍历的引用而已
            //最严谨的做法，重新拷贝一份数组,再对这个数组的备份进行处理
            //let tabs = JSON.parse(JSON.stringify(this.data.tabs));
            //不要直接修改this.data.数据
            let {tabs} = this.data;
            //循环数组
            //数组.forEach 遍历数组，遍历数组的时候，修改了v,也会导致原数组被修改
            tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);

            this.setData({
                tabs
            })
        }
    }
})

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

Tabs.js

Component({
    properties: {
        tabs:{
            type:Array,
            value:[]
        }
    },
    data: {
       
    },
    methods: {
            //5.点击事件触发的时候：触发父组件中的自定义事件，同时床底数据给父组件
            //this.triggerEvent("父组件自定义事件的名称",要传递的参数)
        hanldeItemTap(e){
            //获取索引
            const {index} = e.currentTarget.dataset;
            this.triggerEvent("itemChange",{index})
        }
    }
})

demo17.js:

Page({
    data: {
        tabs:[
            {
                id:0,
                name:"首页",
                isActive:true
            },
            {
                id:1,
                name:"原创",
                isActive:false
            },
            {
                id:2,
                name:"分类",
                isActive:false
            },
            {
                id:3,
                name:"关于",
                isActive:false
            }
        ]

    },
    //自定义事件，用来接收子组件传递的数据的
    handleItemChange(e){
        //接收传递过来的参数
        const {index} = e.detail;
        let {tabs} = this.data;
            //循环数组
            //数组.forEach 遍历数组，遍历数组的时候，修改了v,也会导致原数组被修改
            tabs.forEach((v,i)=>i==index?v.isActive=true:v.isActive=false);
            this.setData({
                tabs
            })
    }

})

demo17.wxml

<!-- 
    2 子向父传递数据，通过事件的方式传递
        *在子组件的标签上加入 自定义事件
 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>

自定义组件：slot

场景：点击菜单栏上的选项显示不同的内容

tabs.wxml

<view class="tabs">
    <view class="tabs_title">
        <view 
        wx:for="{{tabs}}"
        wx:key="id"
        class="title_item {{item.isActive?'active':''}}"
        bindtap="hanldeItemTap"
        data-index="{{index}}"
        >
        {{item.name}}
        </view>
    </view>
    <view class="tabs_content">
        <!-- 
            slot标签，其实就是一个占位符、插槽
            等到父组件调用子组件的时候，再传递标签过来，最终，这些被传递的标签就会替换slot插槽的位置
         -->
         <slot></slot>
    </view>
</view>

demo17.wxml

<!-- 
    2 子向父传递数据，通过事件的方式传递
        *在子组件的标签上加入 自定义事件
 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
    <block wx:if="{{tabs[0].isActive}}">0</block>
    <block wx:elif="{{tabs[1].isActive}}">1</block>
    <block wx:elif="{{tabs[2].isActive}}">2</block>
    <block wx:else>3</block>
</Tabs>

组件的其他属性

应用生命周期

app.js

// app.js
App({
  //1 应用第一次启动就会触发的事件
  onLaunch(){
    //在应用第一次启动的时候  获取用户的个人信息
    console.log("onLaunch");
  },

  //2 应用被用户看到时
  onShow(){
    //对应用的数据或者页面效果 重置
    console.log("onShow");
  },

  //3 应用 被隐藏时
  onHide(){
    //暂停或者清除定时器
    console.log("onHide");
  },

  //4 应用的代码发生了报错的时候就会触发
  onError(err){
    //在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误信息发送到后台
    console.log("onError");
    console.log("err");
  },

  //5 页面找不到就会触发
  // 应用第一次启动的时候，如果找不到第一个入口页面，才会触发
  onPageNotFound(){
    console.log("onPageNotFound");
  }
})

页面生命周期

demo18.js

// pages/demo18/demo18.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        //onLoad发送异步请求来初始化页面数据
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     * 需要让页面 出现上下滚动才行
     */
    onReachBottom: function () {
        //常用于上拉加载下一页数据
    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    },

    //页面滚动时就可以触发
    onPageScroll(){

    },

    //页面尺寸发生改变的时候就会触发
    onresize(){
        //常用于手机横屏竖屏切换时出现
    },

    //必须要求当前页面，也是tabbar页面(注：当前测试页面并不是tabbar)
    //点击自己的tab item的时候才触发
    onTabItemTap(){
    }
})

项目技术选型

小程序的第三方框架

  1. 腾讯：wepy (语法类似vue)
  2. 美团：mpvue (语法类似vue)
  3. 京东：taro (语法类似react)
  4. 滴滴：chameleon
  5. uni-app (语法类似vue)
  6. 原生框架MINA (本次项目就使用原生框架)
#上善若水
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端微信小程序入门学习笔记
qq_45335911的博客
08-07 1148
微信小程序的入门学习和基本使用 最近学习了微信小程序，归纳总结笔记，只是简单的去介绍使用流程，可以作为快速上手的基本过程，学习过程遇到的问题会单独拎出来单独归纳，这篇文章只是代表总结的一个梳理过程。 一、简介与发展历史 ​ 简介：小程序是一种全新的连接用户与服务器的方式，他可以在微信内被便捷的获取和传播，同时具有出色的使用体验。也是一种不需要下载安装即可使用的应用，它实现了应用"触手可及"的梦想，用户扫一扫或者搜一下就可以打开应用。也体现了“用完就走”的理念，用户不用关心是否会在手机上安装太多应用的问题。
C#程序员入门学习微信小程序的笔记
12-01
因为工作需要，最近学习了一下微信小程序，在此分享一下大概的流程。 强烈建议大家先去看微信小程序简易教程：点我进入 起步 客户端打开小程序的时候，就将代码包下载到本地进行解析，首先找到了根目录的 app.json ...
学习微信小程序开发的二天【数组和对象的循环】
m0_56231540的博客
03-30 279
<!-- 默认情况下不写wx:for-item="item" wx:for-index="indx" --> <view> <view wx:for="{{list}}" wx:key="id"> 索:{{index}} 值:{{item.name}}</view> </view> <!-- wx:for="{{对象}}"wx:for-item="对象的值"wx:for=index="对象的属性" --> <view> .
微信小程序入门学习笔记
wx0626_的博客
05-30 124
一，基础介绍 小程序是什么？ 小程序可以视为只能用微信打开的和浏览的网站。小程序和网页的技术模型是一样的，用到的JavaScript语言 和 CSS样式也是一样的，只是网页的HTML标签被修改成了WXML标签，CSS标签被修改成了WXSS标签。 小程序最大的优势就是基于微信，也不需要考虑IOS和Android不同平台的差异，同时微信也提供了丰富的API接口，例如拍摄，录音，语音识别，二维码等，小程序可以利用原生能力，快速进行开发 ...
微信小程序for循环示例（JavaScript）
weixin_45465881的博客
04-26 1318
在微信小程序开发中，我们最常用的循环方式就是for和foreach，接下来我就浅浅的将自己的写的一小段示例代码分享给大家。其实我个人感觉最好用的还是第一种，第二种或者其他的循环方式，用的较为少，具体还是要看实际应用中的操作吧！从这个代码中，可以看出for循环支持break，当然也支持continue。
微信小程序入门教程学习笔记
qq_42183184的博客
08-29 9122
作为一个刚刚入坑微信小程序的小白，以下是我在学习中的笔记，因为我真的太健忘了...
微信小程序入门篇
weixin_49555741的博客
01-06 2215
pages: 存放小程序页面utils：存放工具性质的模块（例如格式化时间的自定义模块）app.js: 入口文件app.json: 全局配置文件app.wxss: 全局样式文件project.config.json: 配置文件sitemap.json: 配置小程序以页面是否被微信索引宿主环境是指程序运行所必须的依赖环境例如Android系统和IOS系统是两个不同的宿主环境，安卓的微信是不能在IOS环境下运行的，安卓的宿主环境是Android，脱离了宿主环境的软件是没有意义的。
最新最全的微信小程序入门学习教程，微信小程序零基础入门到精通
热门推荐
编程小石头
07-24 6万+
从今天开始就来带领大家学习微信小程序了，只要你跟着我一步步来，相信你也可以上线一款属于自己的微信小程序 一，认识小程序 微信⼩程序，简称⼩程序，英⽂名 Mini Program Mini Program ，是⼀种不需要下载安装即可使⽤的应⽤，它实现 了应⽤“触⼿可及”的梦想，⽤⼾扫⼀扫或搜⼀下即可打开应⽤ 1-1，微信小程序的优势 1.微信有海量⽤⼾，⽽且粘性很⾼，在微信⾥开发产品更容易触达⽤⼾； 2.推⼴app或公众号的成本太⾼。 3.开发适配成本低。 4.容易⼩规 模试错，然后快速迭代。 5.跨平台。
微信小程序（原生）开发入门学习笔记
gl199555的博客
04-07 2047
原生微信小程序开发学习笔记
小程序入门笔记（一） 黑马程序员前端微信小程序开发教程
shaozheng0503的博客
10-05 6336
运行环境：小程序可以在手机的操作系统上直接运行，如微信、支付宝等；而普通网页需要在浏览器中打开才能运行。开发技术：小程序采用前端技术进行开发，如HTML、CSS、JavaScript等；而普通网页也是使用类似的前端技术开发。用户体验：小程序可以提供更加原生化的用户体验，可以调用手机硬件设备的功能，如摄像头、地理位置等；而普通网页对于这些功能的调用相对受限。安全性：小程序运行在封闭的环境中，安全性较高，并且需要通过平台审核后才能上线；而普通网页的安全性相对较低，容易受到网络攻击。
微信小程序入门的笔记（微信小程序的开发工具已经安装好了）
acxgd_ycx的博客
01-19 8090
小程序项目的基本构成 1.pages 是用来存放所有小程序的页面 2.utils 用来存发工具性质的模块（例如：格式化时间的自定义模块） 3.app.js 小程序项目的入口文件 4.app.json 小程序项目的全局配置文件（可以对小程序中的页面，窗口等选项进行全局配置） 5.app.wxss 小程序的全局样式文件（在这里写的样式会运用到每一个页面） 6.project.config.json 项目的配置文件 7.sitemap.json 用来配置小程序及其页面是否允许被微信索引 只是很简单
微信小程序学习笔记
watson_pillow的博客
02-13 1642
微信小程序基础学习，包括组件和全局npm包，常用标签、API，事件绑定等
微信小程序快速入门.md
05-04
学习的笔记
《微信小程序开发实战》学习笔记chapter1微信小程序人门
10-21
学习笔记：# Chapter01 微信小程序入门 1. 微信小程序介绍 1.1 什么是微信小程序 1.2 微信程序的优势 2. 开发环境搭建 3. 微信开发者工具 4. 微信小程序文件结构
《微信小程序开发实战》黑马程序员版学习笔记整理（课件资料）
10-22
Chapter01 微信小程序入门 1. 微信小程序介绍 1.1 什么是微信小程序 1.2 微信程序的优势 2. 开发环境搭建 3. 微信开发者工具 4. 微信小程序文件结构 4.1 微信小程序框架 4.2 基本项目目录 4.3 配置介绍 4.4 数据绑定
uniapp+h5 ——微信小程序页面截屏保存在手机
Juliet_xmj的博客
05-28 514
微信小程序和h5页面截图保存为图片
微信小程序中Button组件的属性值和用法详解
ike_kenny的博客
05-31 469
简要介绍Button组件在小程序中的作用和重要性，以及为什么开发者需要深入了解其属性值和用法。size：设置按钮尺寸大小。type：设置按钮样式类型。plain：设置按钮是否镂空。disabled：设置按钮是否禁用。open-type：设置按钮的开放能力。hover-class：设置按钮按下后的样式类。form-type：设置按钮在表单中的功能类型。lang：设置开放能力的语言类型。hover-stop-propagation：设置是否阻止事件冒泡。
微信小程序上架，AI类目审核（AI问答、AI绘画、AI换脸）
05-29 502
小程序对于生成式AI类目的产品上架审核较为严格，这也是近两年新增了几个类目，一旦小程序中涉及生成式AI相关的内容，如果你选择相应类目，但审核被划归为这一类，都需要准备此类目的审核，才能正常上架。资质文件到互联网信息服务算法备案系统中去查找，你使用哪个平台的，找对应的平台即可，截图下载，上传即可。以百度智能云为例，开通了相关模型的计费服务，相当于采购了服务，百度智能云提供对应的合同供使用者下载。找到合同管理，如果是第一次，点击申请合同，可以把合同下载下来打印，再盖上本公司的公章即可。
微信小程序实现图片转base64
最新发布
chensi_07的博客
06-03 144
在微信小程序中，图片转base63可以引入第三方插件；也可以通过下边的方法转base64。
微信小程序入门案例
05-24
微信小程序是一种轻量级的应用程序，可以在微信内直接运行，无需下载安装。下面是一个简单的微信小程序入门案例，供参考： 1. 创建小程序项目 首先，在微信开发者工具中创建一个小程序项目，填写相应的项目名称、AppID等信息。创建完成后，可以看到项目中已经自动生成了一些文件和目录。 2. 编写界面和逻辑代码 在小程序项目中，界面和逻辑代码被分别存储在两个不同的文件夹中，分别为 `pages` 和 `utils`。其中，`pages` 文件夹存放小程序的界面代码，而 `utils` 文件夹则存放小程序的逻辑代码。 在 `pages` 文件夹中，可以新建一个 `.wxml` 文件来定义小程序的界面结构，使用 `.wxss` 文件来设置界面的样式，使用 `.js` 文件来编写小程序的逻辑代码。 例如，下面是一个简单的小程序界面代码： ``` <!-- index.wxml --> <view class="container"> <text>欢迎使用微信小程序！</text> </view> ``` 在对应的 `.js` 文件中，可以编写小程序的逻辑代码，例如： ``` // index.js Page({ data: { message: 'Hello, World!' } }) ``` 3. 预览和调试小程序 在编写完小程序的界面和逻辑代码后，可以在微信开发者工具中进行预览和调试。在工具中，点击“预览”按钮，即可在微信客户端中查看小程序的效果。 在预览和调试过程中，可以使用工具提供的调试功能来检查小程序的运行状态和调试错误。 4. 发布小程序 当小程序开发完成后，可以将其发布到微信小程序平台，供用户使用。在微信开发者工具中，点击“上传”按钮，即可将小程序上传到微信小程序平台进行审核和发布。 需要注意的是，小程序需要经过审核才能够正式发布。因此，在上传小程序之前，需要仔细检查小程序的代码和功能，确保符合微信小程序的相关规定和要求。 以上是一个简单的微信小程序入门案例，希望对初学者有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值