微信小程序从入门到飞起（各个组件）

梦里梦外; 2022-12-05 15:23 258阅读 0赞

**目录**

1.小程序语法

1.1.认识几个常用标签

1.2.数据绑定

1.3.事件绑定

1.4.大小尺寸

1.5.样式引入

1.6.长按内容复制、对内容进行解码

1.7.选择器

1.8.插入图片

1.9.图片轮播

1.10.导航组件

1.11.滑块

1.12.富文本标签

1.13.button按钮

1.14.字体图标

1.15.单选框

1.16.复选框

1.17.父子页面传值

1.18.设置tabBar

2.生命周期

--------------------

# 1.小程序语法 #

## 1.1.认识几个常用标签 ##

1 text 相当于以前web中的 span标签 行内元素  不会换行

2 view 相当于以前web中的 div标签 块级元素  会换行

3 checkbox 以前的复选框标签

## 1.2.数据绑定 ##

wxml文件：

<view> {
       {msg}} </view>
    
    <view>{
       {num}}</view>
    
    <view>性别: {
       {isGirl}} </view>
    
    <view>{
       {person.age}}</view>
    <view>{
       {person.height}}</view>
    <view>{
       {person.weight}}</view>
    <view>{
       {person.name}}</view>
    
    
    <view data-num="{
       {num}}"> 自定义属性</view>
    
    
    <view>
      <checkbox checked="{
       {isChecked}}"> </checkbox>
    </view>
    
    
    <view>{
       {1+1}}</view>
    
    <view>{
       {'1'+'1'}}</view>
    
    <view>{
       { 11%2===0 ? '偶数' : '奇数' }}</view>
    
    
    
    <view>
      <view wx:for="{
       {list}}" wx:for-item="item" wx:for-index="index" 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">
        属性:{
       {key}} -- 值:{
       {value}}
      </view>
    </view>
    
    
    
    <view>
      <block wx:for="{
       {list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list">
        索引：{
       {index}} -- 值:{
       {item.name}}
      </block>
    </view>
    
    
    
    
    
    <view>
      <view>条件渲染</view>
      <view wx:if="{
       {true}}">显示</view>
      <view wx:if="{
       {false}}">隐藏</view>
    
      <view wx:if="{
       {flase}}">1</view>
      <view wx:elif="{
       {flase}}">2 </view>
      <view wx:else> 3 </view>
    
      <view>---------------</view>
      <view hidden>hidden1</view>
      <view hidden="{
       {false}}">hidden2</view>
    
      <view>-----000-------</view>
      <view wx:if="{
       {false}}">wx:if</view>
      <view hidden style="display: flex;">hidden</view>
    </view>

js文件：

Page({
      data: {
        msg: "hello mina",
        num: 10000,
        isGirl: false,
        person: {
          age: 48,
          height: 333,
          weight: 222,
          name: "张三"
        },
        isChecked:false,
        list:[
          {
            id:0,
            name:"大众"
          },
          {
            id:1,
            name:"玛莎拉蒂"
          },
          {
            id:2,
            name:"奔驰"
          }
        ]
      }
    });

## 1.3.事件绑定 ##

小程序中绑定事件，通过bind关键字来实现。如bindtap、bindinput、bindchange等，不同组件支持不同的事件，具体看组件的说明即可。

特别注意：

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

<input type="text" bindinput="handleInput" />
    <button bindtap="handletap" data-operation="{
       {1}}" >+</button>
    <button bindtap="handletap" data-operation="{
       {-1}}">-</button>
    <view>  
      {
       {num}}
    </view>

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

## 1.4.大小尺寸 ##

wxss：

/* 
    1 小程序中 不需要主动来引入样式文件 
    2 需要把页面中某些元素的单位 由 px 改成 rpx
      1 设计稿 750x
        750 px = 750 rpx 
        1 px = 1 rpx
      2 把屏幕宽度 改成 375px
        375 px = 750 rpx
        1 px = 2rpx
        1rpx = 0.5px
    3 存在一个设计稿 宽度 414 或者 未知 page 
      1 设计稿 page 存在一个元素 宽度 100px
      2 拿以上的需求 去实现 不同宽度的页面适配 
    
      page px = 750 rpx
      1 px = 750 rpx / page
      100 px = 750 rpx * 100 / page 
      假设  page =  375px
    4 利用 一个属性 calc属性  css 和 wxss 都支持 一个属性
      1 750 和 rpx 中间不要留空格
      2 运算符的两边也不要留空格
     */
    
     view{
       /* width: 200rpx; */
       height: 200rpx;
       font-size: 40rpx;
       background-color: aqua;
      /* 以下代码写法是错误  */
      /*  width:750 rpx * 100 / 375 ;  */
      width:calc(750rpx * 100 / 375);
     }

wxml：

## 1.5.样式引入 ##

wxss：

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

## 1.6.长按内容复制、对内容进行解码 ##

wxml：

<text selectable decode>
      text   123 <
    </text>

## 1.7.选择器 ##

特别注意，小程序中\*通配符无效！以下代码是无效的！

\*\{margin:0\}

目前支持的选择器有：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70][]

## 1.8.插入图片 ##

![20200911133945381.png][]

其中mode有13种模式，4种是缩放模式，9种是裁剪模式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 1][]

wxml：

<image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />

wxss：

image{
      box-sizing: border-box;
      border: 1px solid red;
    
      width: 300px;
      height: 200px;
    }

## 1.9.图片轮播 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 2][]

默认宽度100%，高度150px。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 3][]

wxml：

<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094">
        <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> </swiper-item>
        <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> </swiper-item>
        <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> </swiper-item>
    </swiper>

wxss：

swiper {
      width: 100%;
      /* height: calc(100vw * 352 /  1125); */
      height: 31.28vw;
    }
    image {
      width: 100%;
    }

## 1.10.导航组件 ##

open-type有效值：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 4][]

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

## 1.11.滑块 ##

默认高度宽度都是100%。

## 1.12.富文本标签 ##

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

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

## 1.13.button按钮 ##

<button>默认按钮</button>
     <button size="mini">  mini 默认按钮</button>
     <button type="primary"> primary 按钮</button> 
     <button type="warn"> warn 按钮</button> 
     <button type="warn" plain> plain 按钮</button> 
     <button type="primary" loading> loading 按钮</button> 
    
     
    <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>

## 1.14.字体图标 ##

## 1.15.单选框 ##

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

## 1.16.复选框 ##

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

## 1.17.父子页面传值 ##

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

## 1.18.设置tabBar ##

在app.json中配置

{
      "pages": [
        "pages/index/index",
        "pages/img/img",
        "pages/mine/mine",
        "pages/search/search",
        "pages/logs/logs"
      ],
      "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#cccccc",
        "navigationBarTitleText": "我的应用",
        "navigationBarTextStyle": "black",
        "enablePullDownRefresh": true,
        "backgroundColor": "#aaaaaa"
      },
      "tabBar": {
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "icon/_home.png",
            "selectedIconPath": "icon/home.png"
          },
          {
            "pagePath": "pages/img/img",
            "text": "图片",
            "iconPath": "icon/_img.png",
            "selectedIconPath": "icon/img.png"
          },
          {
            "pagePath": "pages/mine/mine",
            "text": "我的",
            "iconPath": "icon/_my.png",
            "selectedIconPath": "icon/my.png"
          },
          {
            "pagePath": "pages/search/search",
            "text": "搜索",
            "iconPath": "icon/_search.png",
            "selectedIconPath": "icon/search.png"
          },
          {
            "pagePath": "pages/demo18/demo18",
            "text": "demo18",
            "iconPath": "icon/_search.png",
            "selectedIconPath": "icon/search.png"
          }
        ],
        "color":"#0094ff",
        "selectedColor":"#ff9400",
        "backgroundColor":"#ffffff"
    
      },
      "sitemapLocation": "sitemap.json"
    }

# 2.生命周期 #

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70]: /images/20221123/b9259472d08b4a419f6b8ac0eef42f43.png
[20200911133945381.png]: /images/20221123/45ba8ac277b440c5b179cb688d91b47b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 1]: /images/20221123/8f5000cc4f1e4951b011b6ed8516e688.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 2]: /images/20221123/871c174943c1497783158d815ecbcf3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 3]: /images/20221123/beba6e47a0214f0db3749c40e9b727c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FfYXJ0X3hpYW5n_size_16_color_FFFFFF_t_70 4]: /images/20221123/04b6a0c97b154dfcb0b2f5fc21c66f09.png