微信开发者⼯具介绍及基本使用（2）

最新推荐文章于 2023-10-02 17:14:40 发布

晨曦06

最新推荐文章于 2023-10-02 17:14:40 发布

阅读量1k

点赞数 1

文章标签：小程序

本文链接：https://blog.csdn.net/m0_53266704/article/details/118110915

版权

1.常⻅组件

重点讲解⼩程序中常⽤的布局组件:
view, text , button,image,navigator,icon,swiper,radio,checkbox。 text,button,image,navigator,icon,swiper,radio,checkbox。等

1.view

代替原来的 div 标签

 <view hover-class="h-class">
 点击我试试
  </view>

2.text

⽂本标签
只能嵌套text
⻓按⽂字可以复制（只有该标签有这个功能）
可以对空格回⻋进⾏编码

<text selectable="{{false}}" decode="{{false}}">
   普&nbsp;通
  </text>

3.image

图⽚标签，image组件默认宽度320px、⾼度240px
⽀持懒加载

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

<!--
  1.image图片标签
    1.src指定要加载的图片的路径
      图片存在默认的宽度和高度320*240 原图大小200*100
  2.mode决定图片内容如何和图片标签宽高做适配
    1.scaleTofill 默认值 不保持纵横比缩放图片 使图片的宽高完全的拉伸至填满image元素
    2.aspectFit 保持宽高比 确保图片的长边 显示出来  页面轮播常用
    3.aspectFill 保持纵横比缩放图片 只保证图片的短边能完全显示出来
    4.widthFix 以前的web的图片的 宽度指定了以后高度会自己按比列来调整 常用
  3 小程序的图片直接就支持懒加载 laz-load
     1.laz-load会自动判断当图片出现在视口上下三屏的高度之内的时候 自己开始懒加载
-->
<image mode="top" laz-load src="https://tse1-mm.cn.bing.net/th?id=OIP-C.wnSFaKc96IhbsEDCBtKsEgHaNK&w=120&h=160&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" />

4. swiper

微信内置轮播图组件
在这里插入图片描述
默认宽度 100% ⾼度 150px

4-1. navigator

导航组件类似超链接标签
在这里插入图片描述
open-type 有效值：

代码演示：

<!--
  导航组件 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/dome9/dome">轮播图页面</navigator>
<navigator url="/pages/index/index">直接跳到tabbar</navigator>
<navigator open-type="redirect" url="/pages/dome9/dome">轮播图页面redirect</navigator>
<navigator  open-type="switchTab" url="/pages/index/index">switchTab直接跳转到tabbar页面</navigator>
<navigator  open-type="reLaunch" url="/pages/index/index">reLaunch随便跳</navigator>

效果演示：
在这里插入图片描述
因为是一个动图但是大家也可以跟着我文中代码走就行这时你们就可以看到效果但是要提醒大家一下就是我们在选择图片的时候尽量要选一些图片大小差不多的这样方便我们使用

5.rich-text

富文本标签
可以将字符串解析成对应标签，类似 vue中 v–html 功能
效果演示：
在这里插入图片描述
代码演示：

// 1   index.wxml 加载 节点数组 <rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
// 2 加载 字符串 <rich-text nodes='<img
src="https://developers.weixin.qq.com/miniprogram/assets/images/head_global_z_@all.p
ng" alt="">'></rich-text>
    
// index.js
    
Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
     },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
     }]
   }]
 },
  tap() {
    console.log('tap')
 }
})

5-1. nodes属性

nodes 属性⽀持字符串和标签节点数组
在这里插入图片描述
⽂本节点：type = text

nodes 不推荐使⽤ String 类型，性能会有所下降。
rich–text 组件内屏蔽所有节点的事件。
attrs 属性不⽀持 id ，⽀持 class 。
name 属性⼤⼩写不敏感。
如果使⽤了不受信任的 HTML 节点，该节点及 -其所有⼦节点将会被移除。
img 标签仅⽀持⽹络图⽚。

<!--
   rich-text 富文本标签
    1.nodes属性来实现
      1.接受标签字符串
      2.接受对象数组
-->

<text>pages/dome11/dome.wxml</text>
<rich-text nodes="{{html1 }}"></rich-text>

 data:{
   html1:[
     {
       //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"
             }
             ]}
        ]
     }
   ]
 },/*

6.button

在这里插入图片描述
size 的合法值

type 的合法值

form-type 的合法值

open-type 的合法值

代码演示

<!--
  button标签
  1.外观的属性
     1.default默认大小
     2.mini小尺寸
  2.type 用来控制按钮的颜色
     1.default 灰色
     2.primary 绿色
     3.warn    红色
  3.plain  背景色透明
    loading 名称前是否等待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 开发能力
  open-type:
  1.contact 直接打开 客服对话功能 需要在微信小程序的后台配置
  2.share 转发当前的小程序 到微信朋友中 不能把小程序分享到朋友圈
  3.getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码
    1.绑定一个事件 bindgetphonenumber
    2.在事件的回调函数中 通过参数来获取信息
    3.获取到的信息 已经加密过了
      需要用户自己待见小程序的后台服务器 在后台服务器中解析 手机号码 返回到小程序中 就可以看到消息了
  4.getUserInfo 获取当前用户的个人信息
     1.使用方法 类似用户的手机号码
     2.可以直接获取 不存在加密的手段
  5.launchApp在小程序中直接打开app
    1.需要现在app中，通过app某个链接打开小程序
    2.在小程序中再通过app某个链接打开小程序
    3.找到京东的app和京东的小程序
  6.openSetting打开小程序内置的授权画面
    1.授权页面中 只会出现用户曾经点击过的权限
  7.feedback打开小程序的内置的意见反馈页面
    1.只能够通过真机调试来打开

-->

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

效果演示
在这里插入图片描述

我为大家测试了第二个和第三个剩下的呢大家也可以试试看因为这个有几个是电脑操作不了的需要你们呢真机测试也就是用你的手机测试

7.icon

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

代码: js

Page({
  data: {
    iconSize: [20, 30, 40, 50, 60, 70],
    iconType: [
      'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel',
'download', 'search', 'clear'
   ],
    iconColor: [
      'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
   ],
 }
})

wxml

<view class="group">
  <block wx:for="{{iconSize}}">
    <icon type="success" size="{{item}}"/>
  </block>
</view> <view class="group">
  <block wx:for="{{iconType}}">
    <icon type="{{item}}" size="40"/>
  </block>
</view> <view class="group">
  <block wx:for="{{iconColor}}">
    <icon type="success" size="40" color="{{item}}"/>
  </block>
</view>

8.radio

可以通过 color属性来修改颜色
在这里插入图片描述

需要搭配 radio-group ⼀起使⽤

9. checkbox

可以通过 color属性来修改颜色
在这里插入图片描述

需要搭配 checkbox-group ⼀起使⽤

2.⾃定义组件

类似vue或者react中的自定义组件
⼩程序允许我们使⽤⾃定义组件的⽅式来构建⻚⾯。

2-1.创建⾃定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成
可以在微信开发者⼯具中快速创建组件的⽂件结构
在这里插入图片描述
在⽂件夹内 components/myHeader ，创建组件名为 myHeader

2-1-1. 声明组件

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明
myHeader.json

{
  "component": true
}

2-1-2.编辑组件

同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式
slot 表⽰插槽，类似vue中的slot
myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
 {{innerText}}
    <slot></slot>
</view>

在组件的 wxss ⽂件中编写样式
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。
myHeader.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red; }

2-1-3.注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法
myHeader.js

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      // 期望要的数据是 string类型
      type: String,
      value: 'default value',
   }
 },
  data: {
    // 这里是一些组件内部数据
    someData: {}
 },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
 }
})

2-2. 声明引⼊⾃定义组件

⾸先要在⻚⾯的 json ⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径
index.wxml

 // 引用声明
 {
  "usingComponents": {
 // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
 }
}

2-3. ⻚⾯中使⽤⾃定义组件

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <my-header inner-text="Some text">
    <view>用来替代slot的</view>
    </my-header>
</view>

2-4.定义段与⽰例⽅法

Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法等。
在这里插入图片描述

2-5. 组件-⾃定义组件传参

⽗组件通过属性的⽅式给⼦组件传递参数
⼦组件通过事件的⽅式向⽗组件传递参数

2-5-1.过程

⽗组件把数据 {{tabs}} 传递到⼦组件的 tabItems 属性中
⽗组件监听 onMyTab 事件
⼦组件触发 bindmytap 中的 mytap 事件
1.⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定事件名、 detail 对象
⽗ -> ⼦动态传值 this.selectComponent("#tabs");
⽗组件代码

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
 内容-这里可以放插槽
</tabs>
// page.js
  data: {
    tabs:[
     {name:"体验问题"},
     {name:"商品、商家投诉"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },

⼦组件代码

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>
// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /**
   * 组件的初始数据
   */
  data: {
 },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
   }
 }
})

2-6.⼩结

标签名是中划线的⽅式
属性的⽅式也是要中划线的⽅式
其他情况可以使⽤驼峰命名
组件的⽂件名如 myHeader.js 的等
组件内的要接收的属性名如 innerText
更多。。

总结：

今天我们重点讲解⼩程序中常⽤的布局组件:
view, text , button,image,navigator,icon,swiper,radio,checkbox。 text,button,image,navigator,icon,swiper,radio,checkbox。等我们又学到了自定义组件中声明组件编辑组件注册组件声明引⼊⾃定义组件等今天的知识有点多希望可以认真对待哦

晨曦06

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
微信开发者⼯具介绍及基本使用（2）

微信开发者⼯具介绍及基本使用（2）1.常⻅组件1.常⻅组件重点讲解⼩程序中常⽤的布局组件:view, text , button,image,navigator,icon,swiper,radio,checkbox。 text,button,image,navigator,icon,swiper,radio,checkbox。等
复制链接

扫一扫