微信小程序API

API

小程序 的API基本上都是以wx.开头的。

(1) 基础

wx.getSystemInfoSync

wx.getSystemInfo

(2) 路由

wx.switchTab

wx.reLaunch

wx.redirectTo

wx.navigateTo

wx.navigateBack

(3) 界面交互:

wx.showToast

wx.showModal

wx.showLoading

wx.showActionSheet

wx.hideToast

wx.hideLoading

(4) 导航栏:

wx.setNavigationBarTitle

(4) 网络

wx.request

(5) 数据缓存

wx.setStorageSync

wx.setStorage

wx.removeStorageSync

wx.removeStorage

wx.getStorageSync

wx.getStorage

wx.getStorageInfoSync

wx.getStorageInfo

wx.clearStorageSync

wx.clearStorage

设备相关

一、位置相关
1、打开地图选择位置

wx.chooseLocation(Object object)

Success回调函数的参数信息:

如:

Wxml文件:

<button bindtap="openLocation" >打开定位</button>

Js文件:

openLocation(){
​wx.chooseLocation({
​success: function (res) {
​console.log(res, "location")
​console.log("位置名称:"+res.name)//
​console.log("详细地址:"+res.address)//
​console.log("纬度:"+res.latitude)//
​console.log("经度:"+res.longitude)//}})
},
2、获取当前的地理位置、速度

wx.getLocation(Object object)

位置信息(success回调函数的参数的属性)

如:

Wxml文件:

<button bindtap="getLcation" >获取你的位置信息</button>

Js文件:

getLcation(){
​wx.getLocation({
​success: function (res) {
​console.log(res);
​console.log("纬度:" + res.latitude);
​console.log("经度:" + res.longitude)//},})
},
3、使用微信内置地图查看位置
wx.openLocation()
4、开启位置的实时更新
//1、小程序进入前台时,接收位置信息
startLocationUpdate
​
//2、小程序进入后台后,依然可以接收位置信息
startLocationUpdateBackground
​
需要设置权限:
1)、在app.json里增加如下配置项:
"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}
2)、在app.js的onLaunch里。授权onLaunch() {wx.authorize({scope: 'scope.userLocationBackground'});}

需求:完成实时获取用户的当前位置,并显示在地图上。

如下代码示例:

      // 开启位置更新的监听(进入后台后依然获取位置)wx.startLocationUpdateBackground({success: (res) => {// 开启成功后,绑定事件:onLocationChangewx.onLocationChange((result) => {console.log("位置变了");console.log(result.longitude,result.latitude);//打开地图查看位置wx.openLocation({latitude: result.latitude,longitude: result.longitude,})})},})
三、音频

wx.stopVoice(Object object) | 微信开放文档

1、音乐:

(1) 初始化音频对象

wx.createInnerAudioContext() 创建音频对象,即可使用音频相关方法

最新规范基础库 1.6.0 开始支持

src属性音频资源的地址

startTime开始播放的位置(单位:s),默认为 0

autoplay是否自动开始播放,默认为 false

loop是否循环播放,默认为 false

(2) 方法/与事件

play()播放 pause()暂停 stop()停止。停止后的音频再播放会从头开始播放。

2、背景音频(退出也能播放)-使用

wx.getBackgroundAudioManager()背景音频对象

(1) 、属性:

l src 音频的数据源

http://music.163.com/song/media/outer/url?id=1306400549.mp3

l title音频标题,用于原生音频播放器音频标题(必填)(必填)

l coverImgUrl 封面图 URL,用于做原生音频播放器背景图。http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000

(2) 事件和方法:

l play()播放音乐

l onPlay(function callback)监听背景音频播放事件

l pause()暂停音乐

l onPause(function callback)监听背景音频暂停事件

四、视频

wx.saveVideoToPhotosAlbum(Object object) | 微信开放文档

wx.createVideoContext(“视频组件id”)

.play()播放视频

.pause()暂停视频

五、拨打电话

wx.makePhoneCall(Object object) | 微信开放文档

wx.makePhoneCall(object)

如:

Wxml文件:

拨打电话

Js文件:

call(){wx.makePhoneCall({
​phoneNumber: '18991274261',
​success(){
​console.log("成功");}})
},
六、扫描二维码

wx.scanCode(Object object) | 微信开放文档

wx.scanCode(object)调起客户端扫码界面进行扫码

成功信息(success回调函数的参数)

如:

Wxml文件:

扫描

Js文件:

scanQR(){
​
wx.scanCode({
​onlyFromCamera:true,
​success:function(res){
​console.log(res);
​}
​})
​
},
七、手机震动:

l wx.vibrateLong(Object object)使手机发生较长时间的振动(400 ms)

l wx.vibrateShort(Object object)使手机发生较短时间的振动(15 ms)。仅在 iPhone 7 / 7 Plus 以上及 Android 机型生效

如:

Wxml文件:

让你的手机震动起来

Js文件:

zhenDong() {
​
// wx.vibrateShort();
​var i=0;
​let timer = setInterval(function(){
​i++;
​if(i>5){
​clearInterval(timer);
​}
​wx.vibrateLong();
​},400);
​
},
八、添加手机联系人:

wx.addPhoneContact(Object object) | 微信开放文档

wx.addPhoneContact(Object object)

添加手机通讯录联系人。用户可以选择将该表单以「新增联系人」或「添加到已有联系人」的方式,写入手机系统通讯录

等等,参数太多了,看官网吧……

如:

Wxml文件:

添加手机联系人

Js文件:

addConcat(){
​wx.addPhoneContact({
​firstName: '三丰',
​lastName: '张',
​mobilePhoneNumber:"110120119",
​success:function(){
​console.log("添加成功");
​}
​})
​
},

注意:小程序无法导入手机通讯录,也没有计划提供相关的能力,安卓都开始限制访问了,牵扯到隐私问题。

骨架屏

骨架屏 | 微信开放文档

小程序的框架

mpvue:美团点评团队出品的小程序开发框架:mpvue,是“基于Vue”的框架的。mpvue是从整个Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力。

wepy:WePY是在代码开发风格上借鉴了Vue,本身和Vue没有什么关系。

mpvue

介绍及其特点

1.mpvue的介绍:

mp:mini program

Vue:就是vue了

Mpvue就是用vue的技术体系开发小程序的框架。

2.mpvue框架的优点:

比起原生小程序的开发,或者说,在目前原生小程序开发的基础上,我们可以有更多地获取到这样一些能力:

· 彻底的组件化开发能力:提高代码(原生小程序没有,这个很重要,小程序把那个啥和那个啥分开了)

· 完整的 Vue.js 开发体验(学过vue后,开发小程序,so easy)

· 方便的 Vuex 数据管理方案:方便构建复杂应用(这个很重要)

· 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload(这是前端必备)

· 支持使用 npm 外部依赖(这是前端必备)

· 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

· H5 代码转换编译成小程序目标代码的能力

它的目标是:在未来最理想的状态下,可以一套代码可以直接跑在多端:WEB、微信小程序、支付宝小程序、Native(借助weex)

环境搭建和第一个程序:

1、安装nodejs,vue-cli

2、创建mpvue的项目:vue init mpvue/mpvue-quickstart 项目名称

假如,项目名称为mpvueprj。则运行如下命令,

vue init mpvue/mpvue-quickstart mpvueprj

都默认回车吧

项目建好了

3、进入项目目录,安装依赖:npm i

4、npm run dev后,进入开发模式,就会自动产生目录dist。Dist目录是编译产生的小程序的代码。以后,写vue代码就行,小程序的代码就会自动产生。

5、运行小程序。

需要打开微信开发者工具,来运行。

(1) 在微信开发者工具里,导入项目:

(2) 项目目录指向 mpvueprj(项目根目录)

(3) 填入appId

(4) 点击“导入”按钮

(5) 如下效果:

(6) 尝试修改vue组件,自动编译,小程序结果立即呈现

  • Vue组件(index/index.vue)增加“hello”文字

自动编译后,在微信开发者工具里小程序的结果立即呈现

wepy

WePY介绍

WePY 是 腾讯 参考了Vue 等框架对原生小程序进行再次封装的框架,更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。 注意:WePY 2 是基于小程序原生组件实现组件化开发。因此 WePY 2 支持的最低版本小程序基础库为 1.6.3。 官网:WePY Document

WePY 版本

WePY 2 并不是基于 WePY 1 的升级版,而是完全重新开发的全新版本

WePY 安装和创建项目

WePY的安装或更新都通过npm进行。

  • 全局安装 WePY CLI 工具

    npm install @wepy/cli -g

  • 使用 standard 模板初始化项目:

    wepy init standard 项目名

  • cd myproj

  • npm install

  • npm run dev 监听并且编译项目 微信开发者工具导入项目(项目根目录),就可以预览效果了

四、报错 1、报错

怎么办? 问题出在compiler-less的版本问题 需要把 compile-less 锁定到2.0.3,再把@wepy/cli更新到@wepy/cli@2.0.0-alpha.18

2、解决: 问题出在compiler-less的版本问题 需要把compile-less 锁定到2.0.3, 再把@wepy/cli更新到 @wepy/cli@2.0.0-alpha.18 在package.json中修改 重新cnpm install

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/648665.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一款颜值与实力并存的翻页时钟(免费)

FliTik是一款颜值与实力并存的翻页时钟&#xff0c;安卓端是完全免费的&#xff0c;无任何广告&#xff0c;极简风 &#xff0c;软件默认是12小时制&#xff0c;可以在设置中启用24小时制&#xff0c;并且还支持设置显示秒钟、日期、文案&#xff0c;滴答声和语音报时。 支持横…

数据分析的理念、流程、方法、工具(上)

一、数据的价值 1、数据驱动企业运营 从电商平台的「猜你喜欢」到音乐平台的「心动模式」&#xff0c;大数据已经渗透到了我们生活的每一个场景。不论是互联网行业&#xff0c;还是零售业、制造业等&#xff0c;各行各业都在依托互联网大数据&#xff08;数据采集、数据存储、…

C++ 设计模式之责任链模式

【声明】本题目来源于卡码网&#xff08;卡码网KamaCoder&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【设计模式大纲】 【简介】 --什么是责任链模式&#xff08;第21种设计模式&#xff09; 责任链模式是⼀种行为型设计模式&am…

ffmpeg 实用命令 -- 设置预览图

在为视频文件设置预览图&#xff08;缩略图&#xff09;之前&#xff0c;我们首先要准备这样一张图片。FFmpeg 支持用 thumbnail 过滤器自动从视频中抽取一张预览图。它会从头到尾以 thumbnailn 中的 n &#xff08;默认为 100&#xff09;数量的帧为扫描步长来抽取预览图。 #…

C语言实现希尔排序算法(附带源代码)

希尔排序 希尔排序&#xff0c;也称递减增量排序算法&#xff0c;是插入排序的一种更高效的改进版本。希尔排序是非稳定排序算法。 希尔排序是基于插入排序的以下两点性质而提出改进方法的&#xff1a; 插入排序在对几乎已经排好序的数据操作时&#xff0c;效率高&#xff0…

Java PDFBox 提取页数、PDF转图片

PDF 提取 使用Apache 的pdfbox组件对PDF文件解析读取和转图片。 Maven 依赖 导入下面的maven依赖&#xff1a; <dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.30</version> &l…

基于Docker、Minikube在PC端构建K8S试验环境

在桌面电脑上使用Docker和Minikube构建Kubernetes&#xff08;K8S&#xff09;试验环境&#xff0c;为学习和测试提供了一个理想的平台。Docker的容器化技术允许在隔离的环境中运行应用&#xff0c;而Minikube则简化了在单节点上部署和管理Kubernetes集群的过程。这种组合使得个…

数字图像处理:图像内插

图像内插 内插通常在图像放大、缩小旋转和几何校正等任务中使用。内插是用已知数据来估计未知位置的值的过程下面用—个简单的例子开始这—主题的探讨。假设大小为500500像素的—幅图像要放大1.5倍即放大到750750像素。一种简单的放大方法是&#xff0c;创建—个大小为750750像…

Apipost-cli、Jenkins持续集成配置

安装 Apipost-cli npm install -g apipost-cli 运行脚本 安装好Apipost-cli后&#xff0c;在命令行输入生成的命令&#xff0c;即可执行测试用例&#xff0c;运行完成后会展示测试进度并生成测试报告。 Jenkins配置 Apipost cli基于Node js运行 需要在jenkins上配置NodeJs依…

eNSP 实验 两台AR配置同网段

实验1&#xff1a;eNSP 两台AR配置同网段 目的&#xff1a;创建两台AR&#xff0c;配置IP互相ping通 拓扑结构&#xff1a; 首先创建一个AR3260 然后创建一个AR2220 然后同轴电缆连接一下 先配置AR2220。 1、切管理员&#xff1a;system-view 进入千兆位以太网 0/0/0 interf…

MIT_线性代数笔记:第 29 讲 奇异值分解

目录 如何实现用矩阵数学语言描述这一过程举例 本讲介绍奇异值分解&#xff08;Singular value decomposition&#xff09;&#xff0c;简称 SVD。这是矩阵最终也是最好的分解&#xff0c;任意矩阵可分解为 A U Σ V T AUΣV^T AUΣVT&#xff0c;分解结果为正交矩阵 U&#x…

2024 axios封装 包括请求拦截、错误码等

1.新建 codeMessage.ts export default {200: "服务器成功返回请求的数据。",201: "新建或修改数据成功。",202: "一个请求已经进入后台排队&#xff08;异步任务&#xff09;。",204: "删除数据成功。",400: "发出的请求有错误…

Android中C++层fstream用法详解

fstream用于读写文件内容 ifstream用于读文件内容 ofstream用于写内容到文件 读本文章前&#xff0c;请读一下C 文件和流 | 菜鸟教程 目录 1. 打开文件open 2. 返回当前指针位置tellg, tellp 3. 设置文件读位置指针seekg 4. 设置文件写位置指针seekp 5. 如何在文件…

Axios 中不同的 responseType 选项

Axios 中不同的 responseType 选项&#xff1a; json&#xff1a; 描述&#xff1a; 这是默认设置。它表示服务器响应预计是 JSON 格式的。使用示例&#xff1a; axios.get(/api/data, { responseType: json }); text&#xff1a; 描述&#xff1a; 它表示服务器响应预计是纯…

day31_HTML

今日内容 0 复习昨日 1 表格标签 2 表单标签【重要】 3 框架标签 0 复习昨日 Javaweb开发,前端,服务器,数据库 前端,要学习HTML,CSS,JavaScript,JQuery HTML是用来编写网页的一种编程语言 语法 由各种标签组成,标签是尖括号<>,一般都是成对儿出现,前面叫做开标签,后面…

时间序列(Time-Series)Crossformer_EncDec.py代码解析

import torch import torch.nn as nn from einops import rearrange, repeat from layers.SelfAttention_Family import TwoStageAttentionLayer #用于合并时间序列的不同片段 class SegMerging(nn.Module): #初始化方法&#xff0c;参数包含模型维度d_model、窗口大小win…

GO——recover

定义 panic 改变程序控制流立即停止当前函数剩余代码&#xff0c;调用defer 只会执行当前协程的defer recover 可以终止panic造成的程序崩溃只能在defer中发挥作用 package mainimport ("fmt""time" )func main() {defer func() {fmt.Println("ma…

excel中多行合并后调整行高并打印

首先参考该文&#xff0c;调整全文的行高。 几个小技巧&#xff1a; 1.转换成pdf查看文件格式 2.通过视图--》分页预览&#xff0c;来确定每页的内容&#xff08;此时页码会以水印的形式显示&#xff09; 3. 页面布局中的&#xff0c;宽度可以选为自动&#xff0c;因为已经是…

算法工程师的工作:算法范围与技巧

算法工程师&#xff0c;作为计算机科学领域中的核心角色&#xff0c;负责设计和开发高效、可靠的算法。他们的工作涉及广泛的应用领域&#xff0c;从数据结构、机器学习到人工智能等。本文将探讨算法工程师的工作中涉及的算法范围&#xff0c;以及他们所掌握的关键技巧。 一、…

Linux——系统简介

1、从UNIX到LINUX 在目前主流的服务器端操作系统中&#xff0c;UNIX诞生于20世纪60年代末&#xff0c;Windows诞生于20世纪80年代中期&#xff0c;Linux诞生于20世纪90年代初&#xff0c;可以说UNIX是操作系统中的“老大哥”。 1.1、Linux简史 Linux内核最初是由李纳斯托瓦兹…