微信小程序的常用API②

embedded/2024/9/24 0:25:04/

一、动画API

（1）作用：用于在小程序>微信小程序中完成动画效果的制作

（2）使用：创建实例 wx.createAnimation()

（3）常用属性：

duration           【number型】 动画持续时间，单位毫秒，默认400毫秒

timingFunction 【string型】    动画效果 默认linear

delay                【number型】 动画延迟时间 单位毫秒，默认0

transformOrigin【string型】    设置旋转元素的基点位置，默认50% 50% 0 。这三个数字分别表示X轴、Y轴、Z轴位置

（4）timingFunction属性的属性值：

linear            匀速

ease             慢快慢

ease-in         以低速开始

ease-in-out   以低速开始和结束

ease-out       以低速结束

step-start      动画第一帧就跳至结束状态，直至结束

step-end        动画一直保持开始状态，最后一帧跳至结束状态

（5）常用方法：

rotate（number angle）                  旋转。顺时针。角度取值范围【-180,180】

export（）                                       导出动画队列。export()方法每次调用后会清掉之前的动画操作

scale（number sx，number sy）     缩放。当仅有sx参数时，表示在X轴Y轴同时缩放sx倍

translate（number tx，number ty） 平移。单位为px

skew（number ax，number ay）     倾斜。角度取值范围【-180,180】

step（object，object）                     表示一组动画完成。当调用任意多个动画方法组成一组动画时，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。

opacity（number value）                 设置透明度，范围0~1

backgroundColor（string value）    设置背景色

width（number|string value）          设置宽度

top（number|string value）             设置top值

（6）代码示例：

6-1》在index.wxml里
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 一、Animation 动画API -->
<view animation='{{move}}'>hello world</view>
<button bind:tap="play">播放动画</button>
6-2》在index.js里
Pages（{
//一、动画 Animation API 
play:function(){var animation=wx.createAnimation();animation.duration=4000;animation.timingFunction='ease';animation.translate(50,70).step();this.setData({move:animation.export()})}}）
6-3》初始页面为：

6-4》添加动画效果后，点击按钮，文字将匀速移动到相应位置：

二、map地图组件

（1）作用：map地图组件可以为用户通过地图的功能。支持移动、缩放、添加标记点...

（2）使用：直接使用map标签即可  <map></map>

（3）常用属性：

longitude              【number】 中心经度，为必填项

latitude                 【number】 中心纬度，为必填项

scale                    【number】 缩放级别，取值范围为3-20，默认为16

markers                【Array.】 标记点数组

show-location       【boolean】 是否显示带有方向的当前定位点，默认false

bindregionchange 【eventhandle】 视野发生变化时触发的事件处理函数

（4）标记点属性——marker对象属性：

markers标记点数组中的每一项为一个表示标记点的marker对象

id             【number】 标记点id

longitude 【number】 经度。取值范围 -180~180 必填项

latitude    【number】 纬度。取值范围 -90~90 必填项

iconPath 【string】     设置标记点图标路径。必填项

title         【string】     标记点名字，点击时显示

zIndex    【number】  显示层级

alpha      【number】  标记点透明度，默认1，即无透明。取值0~1

width      【number/string】 标记点图标宽度

height    【number/string】 标记点图标高度

（5）代码示例：

5-1》在我的images里面存了gps.png图片

5-2》在index.wxml里
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 二、map 地图组件 -->
<map id="myMap" scale="3" markers="{{myMarkers}}"></map>
5-3》在index.js里
Pages({
data:{myMarkers:[{ //标记点属性id:1,longitude:'112.59',latitude:'28.12',iconPath:'../../images/gps.png',width:'50px',height:'50px'}]},
})
5-4》初始页面为：

5-5》使用map地图组件的js代码后，页面为：

三、地图 API

（1）作用：地图API帮助我们实现获取地图某一位置的功能

（2）使用：地图API必须在map组件中才能使用。创建wx.createMapContext（"地图组件id"）实例

（3）常用属性：

iconPath  【string】 图标路径

success   【function】 接口调用成功的回调函数

fail           【function】 接口调用失败的回调函数

complete 【function】 接口调用结束的回调函数

（4）常用方法：

getCenterLocation（） 获取当前地图中心的经纬度。返回GCJ-02坐标系

moveToLocation（）    将地图中心移至当前定位点

（5）getCenterLocation（）常用方法的常用属性：

iconPath 【string】    图标路径

success 【function】 接口调用成功的回调函数，通过其参数可以获取longitude经度和latitude纬度

fail           【function】 接口调用失败的回调函数

complete 【function】 接口调用结束的回调函数

（6）moveToLocation（）常用方法的常用属性：

longitude  【number】 经度

latitude     【number】 纬度

success   【function】 接口调用成功的回调函数

fail            【function】 接口调用失败的回调函数

complete 【function】 接口调用结束的回调函数

（7）代码示例：

7-1》index.wxml页面：
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 二、map 地图组件 -->
<map id="myMap" scale="3" markers="{{myMarkers}}"></map>
<!-- 三、地图API -->
<button bind:tap="getCenter">获取地图中心位置的经纬度</button>
7-2》index.js页面：
Pages({
data:{myMarkers:[{ //标记点属性id:1,longitude:'112.59',latitude:'28.12',iconPath:'../../images/gps.png',width:'50px',height:'50px'}]},
getCenter:function(){var m=wx.createMapContext('myMap');m.getCenterLocation({success:res=>{console.log(res.longitude+"___"+res.latitude);}})},
})
7-3》初始页面为

7-4》点击地图API按钮后，控制台输出为

四、位置API

（1）作用：获取当前的实时位置

（2）注意：使用 wx.getLocation 需要用户的地理位置授权，如果用户未授权，可能需要先调用 wx.authorize 进行授权请求。

对于正常上线需要更改隐私权限，下列只是理论与演示

（3）使用：

在app.json里面配置：

Pages({"requiredPrivateInfos": ["getLocation"],"permission": {"scope.userLocation": {"desc": "获取用户的实时位置"}}
})

再创建wx.getLocation（）实例

（4）常用选项：

type        【string】 当前位置坐标类型。设为WGS84可返回GPS坐标，设为GCJ-02可以返回用于微信内置地图查看位置的坐标

success  【function】 接口调用成功的回调函数

fail           【function】 接口调用失败的回调函数

complete 【function】 接口调用结束的回调函数

（5）success（）的参数（对象）常用属性：

wx.getLocation（）方法的success（）回调函数的参数是一个对象，该对象属性如下：

longitude 【number】 经度，取值 -180~180

latitude    【number】 纬度，取值 -90~90

speed      【number】 速度，单位m/s

altitude    【number】 高度，单位m

（6）代码示例：

6-1》index.wxml里面
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 四、位置 API -->
<button bind:tap="getLoc">获取实时位置</button>
6-2》index.js里
Pages({
getLoc:function(){wx.getLocation({type:'gcj02',success:res=>{console.log(res);}})},
})
6-3》初始页面 

6-4》点击按钮后，获取你所在的实时位置

此处控制台输出略，可自行演示

五、路由API

（1）作用：实现页面跳转

（2）使用：

2-1》wx.navigateTo()

a跳到b，a页面还存在。在b页面按返回可回到a页面

2-2》wx.redirectTo()

a跳到b，a页面不存在

2-3》wx.switchTab(object)

跳转到tabar页面，并且关闭其他非tabar页面（也就是跳转到主页）

（3）代码示例：

3-1》前提配置：为了更清晰的显示路由API效果，此时配置一个list文件夹

list.wxml页面如下：
<navigation-bar title="另外一个页面" color="black" background="#FFF"></navigation-bar>
<view>我是路由跳转后的页面</view>

3-2》index.wxml页面
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<!-- 五、路由 API -->
<button bind:tap="goto">跳转</button>

3-3》index.js页面
Pages({
goto:function(){wx.navigateTo({// 跳转并且携带参数url: '../list/list?id=1&myname=zhangsan',})}
})

3-4》点击index.wxml跳转的按钮后，页面显示为


http://www.ppmy.cn/embedded/20358.html

相关文章

如何进行域名解析？如何清理DNS缓存？（附源码）

如何进行域名解析？如何清理DNS缓存？（附源码）

目录 1、什么是域名&#xff1f; 2、为什么使用域名&#xff1f; 3、域名解析的完整流程 4、调用gethostbyname系统接口将域名解析成IP地址 5、为什么需要清理系统DNS缓存&#xff1f; 6、使用cmd命令清理DNS缓存 7、通过代码去清除系统DNS缓存 C软件异常排查从入门到精…
阅读更多...
springbean的加载过程以及应用场景

springbean的加载过程以及应用场景

加载过程 加载配置文件 spring在启动的时候会先创建BeanFactory的示例&#xff0c;BeanFactory是一个接口具体实现主要使用的是&#xff1a;ApplicationContext。它会读取XML的bean配置或者使用注解配置的类&#xff0c;将这个bean配置为BeanDefinition对象 实例化bean 解析完…
阅读更多...
AcrelEMS-MH民航机场智慧能源管平台解决方案【可靠供电/降低能耗/高效运维】

AcrelEMS-MH民航机场智慧能源管平台解决方案【可靠供电/降低能耗/高效运维】

民航机场行业背景 自2012年以来&#xff0c;我国民航运输规模出现了显著增长&#xff0c;旅客运输量&#xff1a;从2012年的3.19亿人次上升至2019年的6.6亿人次&#xff08;注&#xff1a;为剔除疫情影响&#xff0c;此处采取疫情前2019年的数据&#xff0c;下同&#xff09;&…
阅读更多...
kotlin 编写一个简单的天气预报app （七）使用material design

kotlin 编写一个简单的天气预报app （七）使用material design

一、优化思路 对之前的天气预报的app进行了优化&#xff0c;原先的天气预报程序逻辑是这样的。 使用text和button组合了一个输入城市&#xff0c;并请求openweathermap对应数据&#xff0c;并显示的功能。 但是搜索城市的时候&#xff0c;可能会有错误&#xff0c;比如大小写…
阅读更多...
vscode 、eslint、prettier 的孽缘

vscode 、eslint、prettier 的孽缘

今天在配置一个新项目的时候&#xff0c;被一个新项目搞得头痛。 我准备配置 prettier 来格式代码&#xff0c;然后把 prettier 添加到 eslint 规则中&#xff0c;这样控制台就能很好的展示那些代码格式有问题。可是控制台的错误和 vscode 显示的错误一直不一样&#xff0c;无…
阅读更多...
创建electron,解决包清理的问题,解决镜像源卡住下载时间长

创建electron,解决包清理的问题,解决镜像源卡住下载时间长

我的电脑用户名是Anyphasy,我的node.js安装在D:\developp\nodejss18.18.0 使用npm config get prefix查看node.js安装路径 npm config get prefix 创建electron 创建package.json文件,它里面记载了你的electron版本,项目描述,以及启动命令等信息 npm init -y 先查看你自己的…
阅读更多...
文字PDF转图片PDF，适合pdf防复制

文字PDF转图片PDF，适合pdf防复制

完整代码已传至github平台&#xff1a; https://github.com/yaunsine/text_pdf_to_image_pdf 分成两步操作&#xff1a; 1、将文字pdf输出成图片 2、将所有图片合成为pdf 将PDF文件输出为图片的形式 """pdf转图片 """ def pyMuPDF_fitz(pdfPa…
阅读更多...
Unity场景光照数据Light data asset

Unity场景光照数据Light data asset

首先描述一下遇到的问题&#xff0c;游戏运行过程中切换场景之后发现模型接收的光照不对。 Unity编辑模式下正常显示&#xff1a; 运行模式下从其他场景切入之后显示异常&#xff1a; 排查了灯光参数和环境光以及着色器都没发现异常。 根据ChatGPT的回答&#xff0c;问题可能…
阅读更多...
最新文章

Copyright @ 2022~2023