微信小程序开发--常用组件

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

小程序官方文档

属性	类型	默认值	必填	说明	最低版本
longitude	number		是	中心经度	1.0.0
latitude	number		是	中心纬度	1.0.0
scale	number	16	否	缩放级别，取值范围为3-20	1.0.0
markers	Array.		否	标记点	1.0.0
covers	Array.		否	即将移除，请使用 markers	1.0.0
polyline	Array.		否	路线	1.0.0
circles	Array.		否	圆	1.0.0
controls	Array.		否	控件（即将废弃，建议使用 cover-view 代替）	1.0.0
include-points	Array.		否	缩放视野以包含所有给定的坐标点	1.0.0
show-location	boolean	false	否	显示带有方向的当前定位点	1.0.0
polygons	Array.		否	多边形	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

在小程序中，要想使用地图仅需要添加

<map class="map">map>

即可。如果想要设置map的长宽，那么在css样式文件中使用：

.map {
     
  width: 100%;
  height: 100%;
}

但是这样设置地图会消失。

注意，在网页开发中如果要设置元素的高为100%，同时需要设置网页根元素即html的高为100%，在小程序中，wxml中的根元素是page而并不是html，因此需要设置的是page的高为100%，如下所示：

page {
     
  height: 100%;
}
.map {
     
  width: 100%;
  height: 100%;
}

设置地图的当前地点(经纬度)：

longitude表示经度，latitude表示纬度。

1.marker标记点

标记点用于在地图上显示标记的位置。markers必须要通过js来设置。

data: {
     
    markers:[{
     
      id:1, //marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。
      longitude:"116.397469", //经度
      latitude:"39.908821", //纬度
      title:"中国的首都--北京", //点击marker后的提示信息
      iconPath:"/icons/map/flag.png", //图标路径，支持网络路径
      rotate: 10, //旋转角度
      width: 50, 
      height: 50,
      callout: {
      //自定义气泡样式
        content:"我爱北京天安门，天安门上太阳升",
        color:"#ffffff",
        borederRadius: 10, //圆角
        bgColor:"#f66",
        padding: 10,
        display: 'ALWAYS', //'BYCLICK':点击显示; 'ALWAYS':常显
        textAlign:"center"
      }
    }]
}

2.control图标

在地图上显示控件，控件不随着地图移动。controls与markers一样要通过js来设置。

属性	说明	类型	必填	备注
id	控件id	number	否	在控件点击事件回调会返回此id
position	控件在地图的位置	object	是	控件相对地图位置
iconPath	显示的图标	string	是	项目目录下的图片路径，支持本地路径、代码包路径
clickable	是否可点击	boolean	否	默认不可点击

<map 
class="map" 
longitude="116.397469" 
latitude="39.908821"
scale="20"
markers="{
      {markers}}"
controls="{
      {controls}}"
>map>

controls:[{
     
    id: 1,
    position:{
     
        left: 30, //这里用的是left和top，并不是x，y
        top: 30,
        width: 30,
        height: 30
    },
    iconPath: "/icons/map/position.png",
    clickable: true //设置图标可点击，因为默认是不可点击的
}]

3.自动定位功能的实现

在实际小程序中，会有点击定位图标实现自动定位的功能。

首先需要在图标上绑定一个点击事件：

<map 
...
bindcontroltap="contralshandler"
>map>

接着在js文件中写入方法：

contralshandler (event) {
     
    console.log(event)
    // 判断点击的是否是定位的小图标
    if(event.controlId === 1) {
     
        // 首先先要获取所在本地的经纬度---调用微信自带的定位功能
        wx.getLocation({
     
            success:(res) => {
     
                console.log(res)
                const {
      longitude,latitude } = res
                this.setData({
     
                    longitude,latitude,
                    //如果想要让红旗图标也跟随移动的话只需要把data中的markers全部复制过来并替换掉经纬度即可
                    ...
                })
            }
        })
    }
},

其中，event是默认参数，里面有图标id等信息。注意，在这里success后如果写functio会导致this指向错误，所以需要改写成箭头函数。

如果想要让红旗图标也跟随移动的话只需要把下面这段代码放到上面...的位置即可：

markers:[{
     
      id:1, //marker 点击事件回调会返回此 id。建议为每个 marker 设置上 number 类型 id，保证更新 marker 时有更好的性能。
      longitude,latitude, //替换经纬度
      title:"我的位置", //定位换了之后提示信息也要换
      iconPath:"/icons/map/flag.png", //图标路径，支持网络路径
      rotate: 10, //旋转角度
      width: 50, 
      height: 50,
      callout: {
      //自定义气泡样式
        content:"我的位置",
        color:"#ffffff",
        borederRadius: 10,
        bgColor:"#f66",
        padding: 10,
        display: 'ALWAYS', //'BYCLICK':点击显示; 'ALWAYS':常显
        textAlign:"center"
      }
}]

关于小程序定位相关的api

4.图标位置的动态设定

在设置图标的位置时，考虑到手机屏幕的尺寸有差别，我们需要动态获取当前设备的尺寸信息然后计算出合适的位置距离。

关于设备信息的api(在api文档中的基础-系统中)

获取设备信息有同步和异步两种方式：

同步方法的格式如下(要用try...catch...包裹)：

try {
     
    // 如果条件可以执行下去
    const res = wx.getSystemInfoSync()
    console.log(res)
} catch () {
     
    // 异常
}

异步的格式如下：

 wx.getSystemInfo({
     
    success: (res) => {
     }
 })

因为设备的信息可能会在小程序的多个地方用到，因此写在全局变量中比较好。

1.第一步设置全局变量

app.js：

globalData: {
     
    userInfo: null,
    deviceInfo: null //存放设备信息
},

1.第二步获取设备信息

app.js：

onLaunch: function () {
     
    // 获取设备信息
    this.getDeviceInfoFn()
  },
  getDeviceInfoFn () {
     
    wx.getSystemInfo({
     
      success: (res) => {
     
        console.log(res) //res中存放了关于设备的全部信息
        // 直接修改全局变量
        this.globalData.deviceInfo = res
      }
    })
},

3.第三步在地图页面获取到存放设备信息的全局变量

map.js：

const app = getApp();
console.log(app.globalData)
const {
      screenWidth,screenHeight } = app.globalData.deviceinfo 
Page({
     
	...
})

4.第四步动态调整图标的位置距离

controls:[{
     
      id: 1,
      position:{
     
        left: screenWidth - 80, //动态调整
        top: screenHeight - 140,
        width: 30,
        height: 30
      },
      iconPath: "/icons/map/position.png",
      clickable: true
}]

注意，top和left的值只能是number类型，百分数是无效的。

二.处理小程序中的html标签

方法一：小程序自带的方法—rich-text

var data = "<h1>
    我是HTML标签
h1>"
...
this.setData({
    proid, proname, price, proimg, desc:data
})

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

HTML代码片段示例：

习近平指出，总理先生是中国人民的老朋友，在当前中国人民奋力抗击新冠肺炎疫情的关键时刻，总理先生提出同我通电话，体现了马方对中方的情谊和支持。疫情难免暂时影响中马正常人员往来，但动摇不了两国人民的深厚友谊。中马双方要在携手应对疫情挑战的同时，持续深化两国关系特别是共建“一带一路”合作，创造更多合作成果，造福两国和两国人民。
习近平强调，疫情发生以来，中国政府高度重视，举全国之力，团结一心，采取最全面、最严格、最彻底的防控举措，取得积极成效，病亡率保持在较低水平，治疗方法不断突破，治愈率持续提升。中国政府将带领中国人民坚定信心、同舟共济、科学防治、精准施策，坚决打赢疫情防控阻击战。我们也一定能把疫情影响降到最低，保持中国经济发展势头，努力实现今年发展目标任务，同时继续朝我们的长远目标坚定迈进。

方法二：wxparse

1.第一步下载wxparse

wxparse

百度网盘：https://pan.baidu.com/s/1bMvyar60I1BAqzr5qxHZXw 提取码：gv9w

2.将下载得到的整个文件夹复制到根目录下

3.在详情页面引入必要的文件

在detail.js中引入wxParse.js：

var WxParse = require('./../../wxParse-master/wxParse/wxParse.js');

在detail.wxss中引入wxParse.wxss：

@import "/wxParse-master/wxParse/wxParse.wxss";

4.第四步数据绑定

var article = detail
/**
* 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', article, this, 5);

5.第五步模板引用

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

三.动态设置当前页面标题

动态设置当前页面标题

wx.setNavigationBarTitle({
     
  title: '当前页面'
})

四.小程序中的模板语法

首先自己新建一个模板：

<template name="test"> //name属性是必须要的
  <text>这就是一个模板text>
template>

然后在你需要的页面进行引入和调用：

<import src="./tem.wxml" />

<template is="test">template>

如果模板中需要用到数据：

<template is="test" data="{
      {a:1}}">template>
...
<template name="test">
  <text>这就是一个模板---{
    {a}}text>
template>

五.小程序常用api之拍照

1.预览图片

预览图片

首先就是在图片标签image处绑定点击事件(顺便将当前图片的索引值传过去)：

 <image src="{
      {item.img}}" mode="widthFit" data-index="index" bindtap="previewImage">image>

在js文件中编写逻辑：

// 点击轮播图全屏预览图片的操作
previewImage (event) {
    let arr = []; //预留空数组
    let index = event.currentTarget.dataset.index //获取当前点击的图片的索引
    this.data.bannerlist.map(item => { 
    console.log(item)
    arr.push(item.img) //将全部图片的地址压入数组
    })
    console.log(arr)
    wx.previewImage({ //调用预览的图片
    current: arr[index], // 当前显示图片的http链接
    urls: arr // 需要预览的图片http链接列表
    })
}

但是目前wx.previewImage方法还无法禁用用户长按保存，转发朋友等功能。

2.拍照功能

wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照

首先在页面上设置一个选择按钮：

<button bindtap="chooseImage">获取头像button>

然后编写js文件：

chooseImage () {
     
    wx.chooseImage({
     
    // count: 1,
    // sizeType: ['original', 'compressed'],
    // sourceType: ['album', 'camera'],
    success: (res) => {
     
        console.log(res)
        // tempFilePath可以作为img标签的src属性显示图片
        /**
        * tempFilePaths	Array.	图片的本地临时文件路径列表 (本地路径)	src
        * tempFiles	Array.