微信小程序的常用API②

server/2024/9/24 21:26:28/

一、动画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/server/20320.html

相关文章

Python爬虫--Ajax异步抓取腾讯视频评论

Python爬虫--Ajax异步抓取腾讯视频评论

在某些网站 &#xff0c;当我们滑下去的时候才会显示出后面的内容 就像淘宝一样&#xff0c;滑下去才逐渐显示其他商品 这个就是采用 Ajax 做的 然后我们现在就是要编写这样的爬虫。 规律分析&#xff1a; 这个时候就要用到我们的 Fiddler 了 我们需要分析加载评论的规律 …
阅读更多...
CST Studio初级教程 三

CST Studio初级教程 三

本节教程主要讲解CST中常用的选取操作&#xff0c;CST是一款3D软件&#xff0c;一个3D模型的构成离不开点、线面、特征等&#xff0c;选取操作也就是选取这些内容。 选取快捷键 S 按下快捷键S&#xff0c;可选取点&#xff08;Points&#xff09;、棱线&#xff08;Edges&…
阅读更多...
用C实现通讯录(详细讲解+源码）

用C实现通讯录(详细讲解+源码）

前言 &#x1f4da;作者简介&#xff1a;爱编程的小马&#xff0c;正在学习C/C&#xff0c;Linux及MySQL.. &#x1f4da;以后会将数据结构收录为一个系列&#xff0c;敬请期待 ● 本期内容会给大家带来通讯录的讲解&#xff0c;主要是利用结构体来实现通讯录&#xff0c;该通讯…
阅读更多...
天星金融普及银行卡防盗刷知识，助力消费者安全用卡

天星金融普及银行卡防盗刷知识，助力消费者安全用卡

移动互联网的迅猛发展推动了手机银行等业务的广泛应用&#xff0c;然而&#xff0c;一些不法分子利用伪造银行卡、窃取持卡人身份信息等手段进行盗刷&#xff0c;严重侵犯了消费者的信息安全和财产安全&#xff0c;对金融市场的稳定和安全造成了威胁。为此&#xff0c;天星金融…
阅读更多...
mongodb替代品SequoiaDB的安装使用

mongodb替代品SequoiaDB的安装使用

前言 1、为什么不直接使用mongodb啊&#xff1f; 答&#xff1a;mongodb的使用协议是SSPL&#xff0c;一旦使用需要将你服务器程序都开源处理–或者给钱。非常不好&#xff0c;而SequoiaDB号称能够兼容mongodb协议&#xff0c;这次来安装试试。 mongodb - SSPL&#xff0c;Seq…
阅读更多...
Git 保姆级教程（一）：Git 基础

Git 保姆级教程（一）：Git 基础

一、获取 Git 仓库 通常有两种获取 Git 项目仓库的方式&#xff1a; 1. 将尚未进行版本控制的本地目录转换为 Git 仓库&#xff1b; 2. 从其它服务器克隆 一个已存在的 Git 仓库。 两种方式都会在你的本地机器上得到一个工作就绪的 Git 仓库。 1.1 git init&#xff08;本地…
阅读更多...
Python_AI库 Matplotlib的应用简例：绘制与保存折线图

Python_AI库 Matplotlib的应用简例：绘制与保存折线图

本文默认读者已具备以下技能&#xff1a; 熟悉Python基础语法&#xff0c;以自行阅读python代码块熟悉Vscode或其它编辑工具的应用 在数据可视化领域&#xff0c;Matplotlib无疑是一个强大的工具。它允许我们创建各种静态、动态、交互式的可视化图形&#xff0c;帮助我们更好…
阅读更多...
typescript：vscode的settings配置文件配置ts语法提示

typescript：vscode的settings配置文件配置ts语法提示

typescript&#xff1a;vscode的settings配置文件配置ts语法提示 1 找到vscode左下角的齿轮按钮 2 点击Settings&#xff08;或者快捷键ctrl,&#xff09;&#xff1a; 点击右上角的Open Settings(JSON)按钮打开配置文件&#xff1a; 或者ctrlshiftp&#xff0c;搜索settings&…
阅读更多...
最新文章

Copyright @ 2022~2023