微信小程序常用组件
文章目录
- 一、常用的组件地图之-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
- 同步
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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);">在奥运资格赛第三阶段结束后</span></strong></span><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);">,国际篮联公布了世界最新排名。有趣的是,以三连胜战绩晋级东京奥运会的女篮排名竟然从第8名下滑到
了第9名!不过这并不影响仍然力压,<span style="font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);">比利时队成为了最大的赢家</span></span></strong><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif; background-color: rgb(255, 255, 255);"><span style="color: rgb(34, 34, 34); font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", 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: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei",
"Helvetica Neue", 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('你点击去了取消按钮')
}
})
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- laravel5.1框架model类查询的实现方法
- laravel-admin 管理平台获取当前登陆用户信息的例子
- Yii框架Session与Cookie使用方法示例
- laravel 实现登陆后返回登陆前的页面方法
- Laravel 登录后清空COOKIE的操作方法
- 使用laravel和ajax实现整个页面无刷新的操作方法
- Laravel 读取 config 下的数据方法
- PHP实现数组根据某个字段进行水平合并,横向合并案例分析
- laravel框架上传图片实现实时预览功能
- PHP 多进程与信号中断实现多任务常驻内存管理实例方法
- Yii 框架控制器创建使用及控制器响应操作示例
- laravel-admin 实现给grid的列添加行数序号的方法
- Laravel 自动生成验证的实例讲解:login / logout
- 关于Laravel-admin的基础用法总结和自定义model详解
- 解决Laravel5.2 Auth认证退出失效的问题