微信小程序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) => {
          // 开启成功后，绑定事件：onLocationChange
          wx.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