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

小咪咪 2023-02-15 01:15 73阅读 0赞

> [https://www.bilibili.com/video/BV1nE41117BQ/][https_www.bilibili.com_video_BV1nE41117BQ]

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

vscode的小程序开发插件

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

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

### 文章目录 ###

*   *  配置文件
     *  配置文件详解
     *  wx:for循环
     *  block标签
     *  wx:if 的属性
     *  绑定事件1 - input的双向绑定“bindinput”
     *  绑定事件2 - 绑定按钮事件
     *  样式 - rpx
     *  样式导入
     *  选择器
     *  less语法
     *  image标签
     *  轮播图
     *  navigation标签
     *  富文本标签：rich-text
     *  button
     *  icon
     *  单选框+复选框
     *  自定义组件
     *  小程序的生命周期
     *   *  应用生命周期
         *  页面生命周期

## 配置文件 ##

![配置文件][20200604222416357.png]

## 配置文件详解 ##

![全局配置][20200604235233491.png]  
![详解][20200604235417670.png]  
pages修改并新建目录，保存即可自动创建  
![tabbar][]  
[Tabbar | 微信开放文档 - 很详细  
https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html][Tabbar _ _ - _ https_developers.weixin.qq.com_miniprogram_dev_extended_weui_tabbar.html]  
![页面配置][20200605000736854.png]

## wx:for循环 ##

![循环][20200604225419914.png]

![对象循环][202006042259277.png]

## block标签 ##

![block标签][block]

## wx:if 的属性 ##

![属性][20200604231516252.png]

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

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

wxml：  
![双向绑定][20200604233015909.png]  
js：  
![双向绑定][20200604233231933.png]  
e是传入的参数对象，通过e可以调用detail来获取输入文本value -->e.detail.value

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

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

## 样式 - rpx ##

![样式rpx][rpx]  
![公式][20200605002758326.png]

（假如 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

## 样式导入 ##

![样式导入][20200605005536544.png]

## 选择器 ##

![选择器][20200605005851423.png]

## less语法 ##

![less][]  
![常见组件][20200605172405991.png]  
[微信文档 - 各类组件  
https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html][- _ https_developers.weixin.qq.com_miniprogram_dev_component_cover-image.html]

## image标签 ##

![image][]

![image标签][image 1]  
视口：整个屏幕

## 轮播图 ##

**轮播层：swiper  
轮播项：swiper-item**  
![实例][20200609095510202.png]  
**第4点实例：**

>  wxml：![实例][20200609094055246.png]  
> wxss：  
> ![实例][20200609094151811.png]  
> 等于：31.288888888888888~

![属性][20200609095254997.png]  
更多swiper属性：  
[https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html][https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]

## navigation标签 ##

![navigation][]  
![属性][20200609101259699.png]  
更多navigator属性：  
[https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html][https_developers.weixin.qq.com_miniprogram_dev_component_navigator.html]

## 富文本标签：rich-text ##

![rich-text][]  
更多rich-text属性：  
[https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html][https_developers.weixin.qq.com_miniprogram_dev_component_rich-text.html]

## button ##

外观属性：  
![外观属性][20200609103456758.png]  
需要时查文档：  
[https://developers.weixin.qq.com/miniprogram/dev/component/button.html][https_developers.weixin.qq.com_miniprogram_dev_component_button.html]

开放属性：  
![开放属性][20200609111323427.png]  
![开放属性][20200609105341674.png]  
contact：  
需要真机调试、输入自己的APPID、绑定客服  
feedback：  
需要真机调试

## icon ##

![icon][]

## 单选框+复选框 ##

![选框][20200609111455251.png]  
**1、单选框：**

> wxml：  
> ![单选框][20200609110841960.png]js：  
> ![js][js 1]

**2、复选框：**

> wxml：  
> ![复选框][20200609112508388.png]  
> js：  
> 自行定义变量和handleItemChange

## 自定义组件 ##

新建一个文件夹components/Tabs，往里面新建Component  
![component][]  
开启组件  
![开启][20200609165344402.png]  
在所需要的demo（demo17）的JSON文件里面声明要使用组件  
![声明][2020060916573467.png]  
在wxml使用组件  
![使用][20200609165901587.png]

**父组件向子组件传值**  
![父向子传值][20200609172847899.png]

完善组件

> Tabs.wxml

> 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

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

## 小程序的生命周期 ##

### 应用生命周期 ###

![属性][20200609235357683.png]  
![生命周期][20200611151143230.png]  
![生命周期][20200611151403372.png]  
![生命周期][20200611151517532.png]

### 页面生命周期 ###

![页面生命周期][2020061115275162.png]  
![页面生命周期][20200611153253860.png]  
![页面生命周期][20200611153608687.png]  
![页面生命周期][20200611153753139.png]  
![页面生命周期][20200611154011119.png]  
![页面生命周期][20200611154136213.png]

[https_www.bilibili.com_video_BV1nE41117BQ]: https://www.bilibili.com/video/BV1nE41117BQ/
[20200604222416357.png]: https://img-blog.csdnimg.cn/20200604222416357.png
[20200604235233491.png]: https://img-blog.csdnimg.cn/20200604235233491.png
[20200604235417670.png]: https://img-blog.csdnimg.cn/20200604235417670.png
[tabbar]: https://img-blog.csdnimg.cn/20200605000218868.png
[Tabbar _ _ - _ https_developers.weixin.qq.com_miniprogram_dev_extended_weui_tabbar.html]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
[20200605000736854.png]: https://img-blog.csdnimg.cn/20200605000736854.png
[20200604225419914.png]: https://img-blog.csdnimg.cn/20200604225419914.png
[202006042259277.png]: https://img-blog.csdnimg.cn/202006042259277.png
[block]: https://img-blog.csdnimg.cn/2020060423083188.png
[20200604231516252.png]: https://img-blog.csdnimg.cn/20200604231516252.png
[20200604231443296.png]: https://img-blog.csdnimg.cn/20200604231443296.png
[if]: https://img-blog.csdnimg.cn/20200604231358775.png
[20200604233015909.png]: https://img-blog.csdnimg.cn/20200604233015909.png
[20200604233231933.png]: https://img-blog.csdnimg.cn/20200604233231933.png
[wxml]: https://img-blog.csdnimg.cn/2020060423462453.png
[js]: https://img-blog.csdnimg.cn/202006042345395.png
[rpx]: https://img-blog.csdnimg.cn/20200605002421597.png
[20200605002758326.png]: https://img-blog.csdnimg.cn/20200605002758326.png
[20200605005536544.png]: https://img-blog.csdnimg.cn/20200605005536544.png
[20200605005851423.png]: https://img-blog.csdnimg.cn/20200605005851423.png
[less]: https://img-blog.csdnimg.cn/20200605171156214.png
[20200605172405991.png]: https://img-blog.csdnimg.cn/20200605172405991.png
[- _ https_developers.weixin.qq.com_miniprogram_dev_component_cover-image.html]: https://developers.weixin.qq.com/miniprogram/dev/component/cover-image.html
[image]: https://img-blog.csdnimg.cn/20200605175538967.png
[image 1]: https://img-blog.csdnimg.cn/20200605175256810.png
[20200609095510202.png]: https://img-blog.csdnimg.cn/20200609095510202.png
[20200609094055246.png]: https://img-blog.csdnimg.cn/20200609094055246.png
[20200609094151811.png]: https://img-blog.csdnimg.cn/20200609094151811.png
[20200609095254997.png]: https://img-blog.csdnimg.cn/20200609095254997.png
[https_developers.weixin.qq.com_miniprogram_dev_component_swiper.html]: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
[navigation]: https://img-blog.csdnimg.cn/20200609101136954.png
[20200609101259699.png]: https://img-blog.csdnimg.cn/20200609101259699.png
[https_developers.weixin.qq.com_miniprogram_dev_component_navigator.html]: https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
[rich-text]: https://img-blog.csdnimg.cn/20200609101956699.png
[https_developers.weixin.qq.com_miniprogram_dev_component_rich-text.html]: https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
[20200609103456758.png]: https://img-blog.csdnimg.cn/20200609103456758.png
[https_developers.weixin.qq.com_miniprogram_dev_component_button.html]: https://developers.weixin.qq.com/miniprogram/dev/component/button.html
[20200609111323427.png]: https://img-blog.csdnimg.cn/20200609111323427.png
[20200609105341674.png]: https://img-blog.csdnimg.cn/20200609105341674.png
[icon]: https://img-blog.csdnimg.cn/20200609110124260.png
[20200609111455251.png]: https://img-blog.csdnimg.cn/20200609111455251.png
[20200609110841960.png]: https://img-blog.csdnimg.cn/20200609110841960.png
[js 1]: https://img-blog.csdnimg.cn/20200609110936770.png
[20200609112508388.png]: https://img-blog.csdnimg.cn/20200609112508388.png
[component]: https://img-blog.csdnimg.cn/20200609165146416.png
[20200609165344402.png]: https://img-blog.csdnimg.cn/20200609165344402.png
[2020060916573467.png]: https://img-blog.csdnimg.cn/2020060916573467.png
[20200609165901587.png]: https://img-blog.csdnimg.cn/20200609165901587.png
[20200609172847899.png]: https://img-blog.csdnimg.cn/20200609172847899.png
[20200609235357683.png]: https://img-blog.csdnimg.cn/20200609235357683.png
[20200611151143230.png]: https://img-blog.csdnimg.cn/20200611151143230.png
[20200611151403372.png]: https://img-blog.csdnimg.cn/20200611151403372.png
[20200611151517532.png]: https://img-blog.csdnimg.cn/20200611151517532.png
[2020061115275162.png]: https://img-blog.csdnimg.cn/2020061115275162.png
[20200611153253860.png]: https://img-blog.csdnimg.cn/20200611153253860.png
[20200611153608687.png]: https://img-blog.csdnimg.cn/20200611153608687.png
[20200611153753139.png]: https://img-blog.csdnimg.cn/20200611153753139.png
[20200611154011119.png]: https://img-blog.csdnimg.cn/20200611154011119.png
[20200611154136213.png]: https://img-blog.csdnimg.cn/20200611154136213.png