B站 - 零基础玩转微信小程序（黑马）第一部分基础讲解 - 记录

最新推荐文章于 2022-03-13 12:15:20 发布

夜里的雨

最新推荐文章于 2022-03-13 12:15:20 发布

阅读量1.2k

点赞数 4

文章标签： js vue 小程序

本文链接：https://blog.csdn.net/bell_love/article/details/106535789

版权

https://www.bilibili.com/video/BV1nE41117BQ/

学着学着就忘了一些细节，记录下来回头复习

vscode的小程序开发插件

minapp
小程序开发助手（适合新手）

< text>等价于< span> 行内元素默认不换行
< view>等价于< div> 块元素默认换行

配置文件

配置文件详解

全局配置

pages修改并新建目录，保存即可自动创建
tabbar
Tabbar | 微信开放文档 - 很详细
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
页面配置

wx:for循环

<view>
  <view
  wx:for="{{demo.list}}"
  wx:for-item="item"
  wx:for-index="index"
  wx:key="id"
  >
  下标：{{item.id}}--
  名称：{{item.name}}

  </view>
</view>

对象循环

block标签

wx:if 的属性

wx:if 是直接在页面去除wx:if 结构体
而hidden是在页面样式上增加了display：none的属性而已

绑定事件1 - input的双向绑定“bindinput”

wxml：
双向绑定
js：

e是传入的参数对象，通过e可以调用detail来获取输入文本value -->e.detail.value

绑定事件2 - 绑定按钮事件

在绑定事件1的基础上加入以下内容
wxml：
绑定事件wxml
js：
绑定事件js

样式 - rpx

样式rpx

（假如 page = 375 px）
page = 750 rpx ---未知设计稿宽度 page
1 px = 750 rpx / page ---双边除以page得到值 1 px
--- 假如要得到的宽度为100px ---
则100 px =1px * 100 =  750 rpx / page * 100
代入page = 375px
有 100 px =1px * 100 =  750 rpx / 375 * 100

样式导入

选择器

less语法

less
常见组件
微信文档 - 各类组件
https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html

image标签

image标签
视口：整个屏幕

轮播图

轮播层：swiper
轮播项：swiper-item

第4点实例：

wxml：
wxss：

等于：31.288888888888888~

navigation标签

富文本标签：rich-text

button

外观属性：

需要时查文档：
https://developers.weixin.qq.com/miniprogram/dev/component/button.html

开放属性：

contact：
需要真机调试、输入自己的APPID、绑定客服
feedback：
需要真机调试

icon

单选框+复选框

1、单选框：

wxml：
js：

2、复选框：

wxml：

js：
自行定义变量和handleItemChange

自定义组件

新建一个文件夹components/Tabs，往里面新建Component

开启组件

在所需要的demo（demo17）的JSON文件里面声明要使用组件

在wxml使用组件

父组件向子组件传值
父向子传值

完善组件

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="hanldeItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
  </view>
  </view>
  <view class="tabs_content">
    <!-- 
      slot 标签 其实就是一个占位符 插槽
      等到 父组件调用 子组件的时候 再传递 标签过来 最终 这些被传递的标签
      就会替换 slot 插槽的位置 
     -->
    <slot></slot>
  </view>
</view>

Tabs.js

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

  /**
   * 组件的初始数据
   */
  data: {
    // tabs
  },
  /* 
  1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
  2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！
   */
 

  methods: {
    hanldeItemTap(e){
      /* 
      1 绑定点击事件  需要在methods中绑定
      2 获取被点击的索引 
      3 获取原数组 
      4 对数组循环
        1 给每一个循环性 选中属性 改为 false
        2 给 当前的索引的 项 添加激活选中效果就可以了！！！

       
       5 点击事件触发的时候 
          触发父组件中的自定义事件 同时传递数据给  父组件  
          this.triggerEvent("父组件自定义事件的名称",要传递的参数)
       */

      //  2 获取索引
      const {index}=e.currentTarget.dataset;
      // 5 触发父组件中的自定义事件 同时传递数据给  
      this.triggerEvent("itemChange",{index});
      // 3 获取data中的数组
      // 解构  对 复杂类型进行结构的时候 复制了一份 变量的引用而已
      // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      // 不要直接修改 this.data.数据 
      // let {tabs}=this.data;
      // let tabs=this.data;
      // 4 循环数组
      // [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改
      // tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

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

Tabs.wxml

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

demo17.js

// pages/demo17/demo18.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;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  }
})

小程序的生命周期

应用生命周期

生命周期

页面生命周期

夜里的雨

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
B站 - 零基础玩转微信小程序（黑马）第一部分基础讲解 - 记录

vscode的小程序开发插件minapp小程序开发助手（适合新手）< text>等价于< span> 行内元素默认不换行< view>等价于< div> 块元素默认换行
复制链接

扫一扫