微信小程序常用组件

时间:2022-07-25
本文章向大家介绍微信小程序常用组件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

文章目录

  • 一、常用的组件地图之-map
  • 1.marker
    • 1.1 marker
    • 1.2 marker 上的气泡 callout
  • 2.control
  • 二、小程序的定位相关api
  • 三、获取设备的基本信息的api
    • 1、设置全局的变量 app.js
    • 2.获取设备信息 app.js
    • 3.地图页面获取全局的设备信息
  • 四、处理小程序中的html标签
    • 1.rich-text
    • 2.wxparse https://github.com/icindy/wxParse
  • 五、小程序中的模板语法
  • 六、小程序常用api之拍照
    • 1.预览图片
    • 2.拍照
  • 七、wx.showActionSheet

一、常用的组件地图之-map

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

属性

类型

默认值

必填

说明

最低版本

longitude

number

中心经度

1.0.0

latitude

number

中心纬度

1.0.0

scale

number

16

缩放级别,取值范围为3-20

1.0.0

markers

Array.<marker>

标记点

1.0.0

covers

Array.<cover>

即将移除,请使用 markers

1.0.0

polyline

Array.<polyline>

路线

1.0.0

circles

Array.<circle>

1.0.0

controls

Array.<control>

控件(即将废弃,建议使用 cover-view 代替)

1.0.0

include-points

Array.<point>

缩放视野以包含所有给定的坐标点

1.0.0

show-location

boolean

false

显示带有方向的当前定位点

1.0.0

polygons

Array.<polygon>

多边形

2.3.0

subkey

string

个性化地图使用的key

2.3.0

layer-style

number

1

个性化地图配置的 style,不支持动态修改

rotate

number

0

旋转角度,范围 0 ~ 360, 地图正北和设备 y 轴角度的夹角

2.5.0

skew

number

0

倾斜角度,范围 0 ~ 40 , 关于 z 轴的倾角

2.5.0

enable-3D

boolean

false

展示3D楼块(工具暂不支持)

2.3.0

show-compass

boolean

false

显示指南针

2.3.0

show-scale

boolean

false

显示比例尺,工具暂不支持

2.8.0

enable-overlooking

boolean

false

开启俯视

2.3.0

enable-zoom

boolean

true

是否支持缩放

2.3.0

enable-scroll

boolean

true

是否支持拖动

2.3.0

enable-rotate

boolean

false

是否支持旋转

2.3.0

enable-satellite

boolean

false

是否开启卫星图

2.7.0

enable-traffic

boolean

false

是否开启实时路况

2.7.0

setting

object

配置项

2.8.2

bindtap

eventhandle

点击地图时触发,2.9.0起返回经纬度信息

1.0.0

bindmarkertap

eventhandle

点击标记点时触发,e.detail = {markerId}

1.0.0

bindlabeltap

eventhandle

点击label时触发,e.detail = {markerId}

2.9.0

bindcontroltap

eventhandle

点击控件时触发,e.detail = {controlId}

1.0.0

bindcallouttap

eventhandle

点击标记点对应的气泡时触发e.detail = {markerId}

1.2.0

bindupdated

eventhandle

在地图渲染更新完成时触发

1.6.0

bindregionchange

eventhandle

视野发生变化时触发,

2.3.0

bindpoitap

eventhandle

点击地图poi点时触发,e.detail = {name, longitude, latitude}

2.3.0

1.marker

1.1 marker

标记点用于在地图上显示标记的位置

属性

说明

类型

必填

备注

最低版本

id

标记点 id

number

marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id,保证更新 marker 时有更好的性能。

latitude

纬度

number

浮点数,范围 -90 ~ 90

longitude

经度

number

浮点数,范围 -180 ~ 180

title

标注点名

string

点击时显示,callout存在时将被忽略

zIndex

显示层级

number

2.3.0

iconPath

显示的图标

string

项目目录下的图片路径,支持网络路径、本地路径、代码包路径(2.3.0)

rotate

旋转角度

number

顺时针旋转的角度,范围 0 ~ 360,默认为 0

alpha

标注的透明度

number

默认 1,无透明,范围 0 ~ 1

width

标注图标宽度

number/string

默认为图片实际宽度

height

标注图标高度

number/string

默认为图片实际高度

callout

自定义标记点上方的气泡窗口

Object

支持的属性见下表,可识别换行符。

1.2.0

label

为标记点旁边增加标签

Object

支持的属性见下表,可识别换行符。

1.2.0

anchor

经纬度在标注图标的锚点,默认底边中点

Object

{x, y},x 表示横向(0-1),y 表示竖向(0-1)。{x: .5, y: 1} 表示底边中点

1.2.0

aria-label

无障碍访问,(属性)元素的额外描述

string

2.5.0

1.2 marker 上的气泡 callout

属性

说明

类型

最低版本

content

文本

string

1.2.0

color

文本颜色

string

1.2.0

fontSize

文字大小

number

1.2.0

borderRadius

边框圆角

number

1.2.0

borderWidth

边框宽度

number

2.3.0

borderColor

边框颜色

string

2.3.0

bgColor

背景色

string

1.2.0

padding

文本边缘留白

number

1.2.0

display

'BYCLICK':点击显示; 'ALWAYS':常显

string

1.2.0

textAlign

文本对齐方式。有效值: left, right, center

string

1.6.0

2.control

在地图上显示控件,控件不随着地图移动

属性

说明

类型

必填

备注

id

控件id

number

在控件点击事件回调会返回此id

position

控件在地图的位置

object

控件相对地图位置

iconPath

显示的图标

string

项目目录下的图片路径,支持本地路径、代码包路径

clickable

是否可点击

boolean

默认不可点击

二、小程序的定位相关api

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.stopLocationUpdate.html

三、获取设备的基本信息的api

https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfoSync.html

  • 同步
try {
    // 如果条件可以执行下去
    const res = wx.getSystemInfoSync()
    console.log(res)
} catch () {
    // 异常
}
  • 异步
 wx.getSystemInfo({
    success: (res) => {}
 })

因为设备的信息可能在多个地方使用,所以建议使用全局变量

1、设置全局的变量 app.js

globalData: {
    userInfo: null,
    deviceinfo: null
},

2.获取设备信息 app.js

App({
    onLaunch () {
        // 获取设备的信息
        this.getDeviceInfoFn()
        
    },
    getDeviceInfoFn () {
        wx.getSystemInfo({
          success: (res) => {
            console.log(res)
            // 修改全局数据
            this.globalData.deviceinfo = res
          }
        })
    }
})

3.地图页面获取全局的设备信息

// pages/map/map.js
const app = getApp();
console.log(app.globalData)
// const { screenWidth, screenHeight } = app.globalData.deviceinfo
const { globalData: { deviceinfo: { screenWidth, screenHeight }}} = app

四、处理小程序中的html标签

1.rich-text

http://ueditor.baidu.com/website/

https://www.cnblogs.com/sky903700252/p/7846240.html

var data = `<p><span style="font-size: 24px;"><strong><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">在奥运资格赛第三阶段结束后</span></strong></span><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">,国际篮联公布了世界最新排名。有趣的是,以三连胜战绩晋级东京奥运会的女篮排名竟然从第8名下滑到
了第9名!不过这并不影响仍然力压,<span style="font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255); color: rgb(255, 0, 0);"><em>居于亚洲排名的首位</em></span>。</span></p><p></p><p><strong><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">比利时队成为了最大的赢家</span></span></strong><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">,她们从
第9位连升两位,跃居至第7位,除了塞尔维亚和比利时外,世界排名前6名的位次和原先保持不变。现世界排名前10的球队分别是:1.美国、2.澳大利亚、3.西班牙、4.加拿大、5.法国、6.土耳其、7.比利时、8.塞尔维亚。</span></span></p><p><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><br/></span></span></p><ul class=" list-paddingleft-2" style="list-style-type: disc;"><li><p><span style="color:
rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">111</span></span></p></li><li><p><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">2222</span></span></p></li><li><p><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; background-color: rgb(255, 255, 255);">33333<br/></span></span></p></li></ul>`;
    // 修改状态
    this.setData({
      proid, // 不需要从 响应数据中拿取,但是可以从那拿(可以拿,但不需要)
      proname,
      proimg,
      detail: data,
      price
    })

// pages/detail/detail.wxml
<rich-text nodes="{{detail}}" ></rich-text>

2.wxparse https://github.com/icindy/wxParse

第一步下载wxParse,参考网盘链接 链接:https://pan.baidu.com/s/1bMvyar60I1BAqzr5qxHZXw 提取码:gv9w

第二步 复制文件夹wxParse至项目跟目录下

第三步 详情页面引入必要的文件

// pages/detail/detail.js
var WxParse = require('../../wxParse/wxParse.js');
// pages/detail/detail.wxss
@import "/wxParse/wxParse.wxss";

第四步 数据绑定

当数据请求成功之后,会得到一段HTML代码,形如

var detail = `<p style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; padding: 0px; color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 24px;"><strong>指出</strong></span>,总理先生是人民的老朋友,在当前人民奋力抗击新冠肺炎疫情的关键时刻,先生提出同我通电话,
体现了方对方的情谊和支持。疫情难免暂时影响正常人员往来,但动摇不了人民的深厚友谊。双方要在携手应对疫情挑战的同时,持续深化两国
关系特别是共建“<span style="color: rgb(255, 0, 0); text-decoration: underline;">一带一路</span>”合作,创造更多合作成果,造福两国和两国人民。<
/p><p style="-webkit-tap-highlight-color: transparent; box-sizing: border-box; margin-top: 16px; margin-bottom: 16px; padding: 0px; color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;,
&quot;Helvetica Neue&quot;, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><span style="font-size: 24px;"><strong>强调</strong></span>,疫情发生以来,政府高度重视,举全国之力,团结一心,采取最全面、最严格、最彻底的防控举措,取得积极成效,病亡率保持在较低水平,治疗方法不断突破,治愈率持续提升。中国政府将带领中国人民坚定信心、同舟共济、科学防治、精准施策,坚决打赢疫情防控阻击战。我们也
一定能把疫情影响降到最低,保持中国经济发展势头,努力实现今年<span style="color: rgb(255, 0, 0);"><em>发展目标任务</em></span>,同时继续朝我们的长远目标坚定迈进。</p><p><br/></p>`

给wxparse赋值

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
WxParse.wxParse('article', 'html', data, this, 5);

模版引用 pages/detail/detail.wxml

<import src="/wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

js修改窗口 https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.setNavigationBarTitle.html

五、小程序中的模板语法

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板 使用 name 属性,作为模板的名字。然后在内定义代码片段,如:

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板 使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如

wxml
<template is="msgItem" data="{{...item}}"/>
// js
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

六、小程序常用api之拍照

1.预览图片

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.html

// pages/home/home.wxml
 <image lazy-load="{{true}}" mode="widthFix" show-menu-by-longpress="{{true}}" src="{{'http://daxun.kuboy.top' + item}}" data-index="index" bindtap="previewImage"></image>
// pages/home/home.js
previewImage (event) {
   let arr = []; // 预留空数组
   let index = event.currentTarget.dataset.index // 获取当前点击的图片的索引
   this.data.bannerlist.map(item => { // 将处理的数据压入数组
    arr.push('http://daxun.kuboy.top' + item)
   })
   console.log(arr)
   wx.previewImage({ // 调用预览图片
     current: arr[index],
     urls: arr
   })
 }

2.拍照

https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照

属性

类型

默认值

必填

说明

count

number

9

最多可以选择的图片张数

sizeType

Array.<string>

['original', 'compressed']

所选的图片的尺寸

sourceType

Array.<string>

['album', 'camera']

选择图片的来源

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

object.sizeType 的合法值

说明

最低版本

original

原图

compressed

压缩图

object.sourceType 的合法值

说明

最低版本

album

从相册选图

camera

使用相机

object.success 回调函数

属性

类型

说明

最低版本

tempFilePaths

Array.<string>

图片的本地临时文件路径列表 (本地路径)

tempFiles

Array.<Object>

图片的本地临时文件列表

1.2.0

res.tempFiles 的结构

属性

类型

说明

path

string

本地临时文件路径 (本地路径)

size

number

本地临时文件大小,单位 B

<button bindtap="chooseImg">拍照</button>
<image wx:for="{{img}}" src="{{item}}"></image>
Page({

  /**
   * 页面的初始数据
   */
  data: {
    img:""
  },

  //拍照
  chooseImg(){
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success:(res)=>{
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        this.setData({img:tempFilePaths})
      }
    })
  }
})

七、wx.showActionSheet

显示操作菜单

属性

类型

默认值

必填

说明

itemList

Array.<string>

按钮的文字数组,数组长度最大为 6

itemColor

string

#000000

按钮的文字颜色

success

function

接口调用成功的回调函数

fail

function

接口调用失败的回调函数

complete

function

接口调用结束的回调函数(调用成功、失败都会执行)

// pages/user/user.wxml
<button bindtap="showActionSheet">操作表</button>
// pages/user/user.js
/**
   * 打开操作表  模拟真机的拍照
   */
  showActionSheet () {
    wx.showActionSheet({
      itemList: ['拍照', '从手机相册选取'],
      success(res) {
        console.log(res.tapIndex)
        switch (res.tapIndex) {
          case 0: 
            console.log('调用拍照')
            break;
          case 1:
            console.log('从手机相册选取')
            break;
          default: 
            console.log('选择了其中一个')
        }
      },
      fail () {
        console.log('你点击去了取消按钮')
      }
    })
  }