前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序入门教程之四:API 使用

微信小程序入门教程之四:API 使用

作者头像
ruanyf
发布2020-11-04 10:26:55
3.1K0
发布2020-11-04 10:26:55
举报
文章被收录于专栏:阮一峰的网络日志

今天是这个系列教程的最后一篇。

上一篇教程介绍了,小程序页面如何使用 JavaScript 脚本。有了脚本以后,就可以调用微信提供的各种能力(即微信 API),从而做出千变万化的页面。本篇就介绍怎么使用 API。

所有示例的完整代码,都可以从 GitHub 的代码仓库下载。

一、WXML 渲染语法

前面说过,小程序的页面结构使用 WXML 语言进行描述。

WXML 的全称是微信页面标签语言(Weixin Markup Language),它不仅提供了许多功能标签,还有一套自己的语法,可以设置页面渲染的生效条件,以及进行循环处理。

微信 API 提供的数据,就通过 WXML 的渲染语法展现在页面上。比如,home.js里面的数据源是一个数组。

代码语言:javascript
复制
Page({
  data: {
    items: ['事项 A', '事项 B', '事项 C']
  }
});

上面代码中,Page()的参数配置对象的data.items属性是一个数组。通过数据绑定机制,页面可以读取全局变量items,拿到这个数组。

拿到数组以后,怎样将每一个数组成员展现在页面上呢?WXML 的数组循环语法,就是一个很简便的方法。

打开home.wxml,改成下面的代码。

代码语言:javascript
复制
<view>
  <text class="title" wx:for="{{items}}">
    {{index}}、 {{item}}
   </text>
</view>

上面代码中,<text>标签的wx:for属性,表示当前标签(<text>)启用数组循环,处理items数组。数组有多少个成员,就会生成多少个<text>。渲染后的页面结构如下。

代码语言:javascript
复制
<view>
  <text>...</text>
  <text>...</text>
  <text>...</text>
</view>

在循环体内,当前数组成员的位置序号(从0开始)绑定变量index,成员的值绑定变量item

开发者工具导入项目代码,页面渲染结果如下。

这个示例的完整代码,可以参考代码仓库

WXML 的其他渲染语法(主要是条件判断和对象处理),请查看官方文档

二、客户端数据储存

页面渲染用到的外部数据,如果每次都从服务器或 API 获取,有时可能会比较慢,用户体验不好。

小程序允许将一部分数据保存在客户端(即微信 App)的本地储存里面(其实就是自定义的缓存)。下次需要用到这些数据的时候,就直接从本地读取,这样就大大加快了渲染。本节介绍怎么使用客户端数据储存。

打开home.wxml,改成下面的代码。

代码语言:javascript
复制
<view>
  <text class="title" wx:for="{{items}}">
    {{index}}、 {{item}}
   </text>
   <input placeholder="输入新增事项" bind:input="inputHandler"/>
   <button bind:tap="buttonHandler">确定</button>
</view>

上面代码除了展示数组items,还新增了一个输入框和一个按钮,用来接受用户的输入。背后的意图是,用户通过输入框,为items数组加入新成员。

开发者工具导入项目代码,页面渲染结果如下。

注意,输入框有一个input事件的监听函数inputHandler(输入内容改变时触发),按钮有一个tap事件的监听函数buttonHandler(点击按钮时触发)。这两个监听函数负责处理用户的输入。

然后,打开home.js,代码修改如下。

代码语言:javascript
复制
Page({
  data: {
    items: [],
    inputValue: ''
  },
  inputHandler(event) {
    this.setData({
      inputValue: event.detail.value || ''
    });
  },
  buttonHandler(event) {
    const newItem = this.data.inputValue.trim();
    if (!newItem) return;
    const itemArr = [...this.data.items, newItem];
    wx.setStorageSync('items', itemArr);
    this.setData({ items: itemArr });
  },
  onLoad() {
    const itemArr = wx.getStorageSync('items') || []; 
    this.setData({ items: itemArr });
  }
});

上面代码中,输入框监听函数inputHandler()只做了一件事,就是每当用户的输入发生变化时,先从事件对象eventdetail.value属性上拿到输入的内容,然后将其写入全局变量inputValue。如果用户删除了输入框里面的内容,inputValue就设为空字符串。

按钮监听函数buttonHandler()是每当用户点击提交按钮,就会执行。它先从inputValue拿到用户输入的内容,确定非空以后,就将其加入items数组。然后,使用微信提供的wx.setStorageSync()方法,将items数组存储在客户端。最后使用this.setData()方法更新一下全局变量items,进而触发页面的重新渲染。

wx.setStorageSync()方法属于小程序的客户端数据储存 API,用于将数据写入客户端储存。它接受两个参数,分别是键名和键值。与之配套的,还有一个wx.getStorageSync()方法,用于读取客户端储存的数据。它只有一个参数,就是键名。这两个方法都是同步的,小程序也提供异步版本,请参考官方文档

最后,上面代码中,Page()的参数配置对象还有一个onLoad()方法。该方法属于页面的生命周期方法,页面加载后会自动执行该方法。它只执行一次,用于页面初始化,这里的意图是每次用户打开页面,都通过wx.getStorageSync()方法,从客户端取出以前存储的数据,显示在页面上。

这个示例的完整代码,可以参考代码仓库

必须牢记的是,客户端储存是不可靠的,随时可能消失(比如用户清理缓存)。用户换了一台手机,或者本机重装微信,原来的数据就丢失了。所以,它只适合保存一些不重要的临时数据,最常见的用途一般就是作为缓存,加快页面显示。

三、远程数据请求

小程序可以从外部服务器读取数据,也可以向服务器发送数据。本节就来看看怎么使用小程序的网络能力。

微信规定,只有后台登记过的服务器域名,才可以进行通信。不过,开发者工具允许开发时放松这个限制。

按照上图,点击开发者工具右上角的三条横线("详情"),选中"不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书" 。这样的话,小程序在开发时,就可以跟服务器进行通信了。

下面,我们在本地启动一个开发服务器。为了简单起见,我选用了 json-server 作为本地服务器,它的好处是只要有一个 JSON 数据文件,就能自动生成 RESTful 接口。

首先,新建一个数据文件db.json,内容如下。

代码语言:javascript
复制
{
  "items": ["事项 A", "事项 B", "事项 C"]
}

然后,确认本机安装了 Node.js 以后,进入db.json所在的目录,在命令行执行下面命令,启动服务器。

代码语言:javascript
复制
npx json-server db.json

正常情况下,这时你打开浏览器访问localhost:3000/items这个网址,就能看到返回了一个数组["事项 A", "事项 B", "事项 C"]

接着,打开home.js,代码修改如下。

代码语言:javascript
复制
Page({
  data: { items: [] },
  onLoad() {
    const that = this;
    wx.request({
      url: 'http://localhost:3000/items',
      success(res) {
        that.setData({ items: res.data });
      }
    });
  }
});

上面代码中,生命周期方法onLoad()会在页面加载后自动执行,这时就会执行wx.request()方法去请求远程数据。如果请求成功,就会执行回调函数succcess(),更新页面全局变量items,从而让远程数据显示在页面上。

wx.request()方法就是小程序的网络请求 API,通过它可以发送 HTTP 请求。它的参数配置对象最少需要指定url属性(请求的网址)和succcess()方法(服务器返回数据的处理函数)。其他参数请参考官方文档

开发者工具导入项目代码,页面渲染结果如下。它的初始数据是从服务器拿到的。

这个示例的完整代码,可以参考代码仓库

这个例子只实现了远程数据获取,json-server 实际上还支持数据的新增和删改,大家可以作为练习,自己来实现。

四、<open-data>组件

如果要在页面上展示当前用户的身份信息,可以使用小程序提供的<open-data>组件

打开home.wxml文件,代码修改如下。

代码语言:javascript
复制
<view>
  <open-data type="userAvatarUrl"></open-data>
  <open-data type="userNickName"></open-data>
</view>

上面代码中,<open-data>组件的type属性指定所要展示的信息类型,userAvatarUrl表示展示用户头像,userNickName表示用户昵称。

开发者工具导入项目代码,页面渲染结果如下,显示你的头像和用户昵称。

<open-data>支持的用户信息如下。

  • userNickName:用户昵称
  • userAvatarUrl:用户头像
  • userGender:用户性别
  • userCity:用户所在城市
  • userProvince:用户所在省份
  • userCountry:用户所在国家
  • userLanguage:用户的语言

这个示例的完整代码,可以参考代码仓库

<open-data>不需要用户授权,也不需要登录,所以用起来很方便。但也是因为这个原因,小程序不允许用户脚本读取<open-data>返回的信息。

五、获取用户个人信息

如果想拿到用户的个人信息,必须得到授权。官方建议,通过按钮方式获取授权。

打开home.wxml文件,代码修改如下。

代码语言:javascript
复制
<view>
  <text class="title">hello {{name}}</text>
  <button open-type="getUserInfo" bind:getuserinfo="buttonHandler">
    授权获取用户个人信息
  </button>
</view>

上面代码中,<button>标签的open-type属性,指定按钮用于获取用户信息,bind:getuserinfo属性表示点击按钮会触发getuserinfo事件,即跳出对话框,询问用户是否同意授权。

用户点击"允许",脚本就可以得到用户信息。

home.js文件的脚本代码如下。

代码语言:javascript
复制
Page({
  data: { name: '' },
  buttonHandler(event) {
    if (!event.detail.userInfo) return;
    this.setData({
      name: event.detail.userInfo.nickName
    });
  }
});

上面代码中,buttonHandler()是按钮点击的监听函数,不管用户点击"拒绝"或"允许",都会执行这个函数。我们可以通过事件对象event有没有detail.userInfo属性,来判断用户点击了哪个按钮。如果能拿到event.detail.userInfo属性,就表示用户允许读取个人信息。这个属性是一个对象,里面就是各种用户信息,比如头像、昵称等等。

这个示例的完整代码,可以参考代码仓库

实际开发中,可以先用wx.getSetting()方法判断一下,用户是否已经授权过。如果已经授权过,就不用再次请求授权,而是直接用wx.getUserInfo()方法获取用户信息。

注意,这种方法返回的用户信息之中,不包括能够真正识别唯一用户的openid属性。这个属性需要用到保密的小程序密钥去请求,所以不能放在前端获取,而要放在后端。这里就不涉及了。

六、多页面的跳转

真正的小程序不会只有一个页面,而是多个页面,所以必须能在页面之间实现跳转。

app.json配置文件的pages属性就用来指定小程序有多少个页面。

代码语言:javascript
复制
{
  "pages": [
    "pages/home/home",
    "pages/second/second"
  ],
  "window": ...
}

上面代码中,pages数组包含两个页面。以后每新增一个页面,都必须把页面路径写在pages数组里面,否则就是无效页面。排在第一位的页面,就是小程序打开时,默认展示的页面。

新建第二个页面的步骤如下。

第一步,新建pages/second目录。

第二步,在该目录里面,新建文件second.js,代码如下。

代码语言:javascript
复制
Page({});

第三步,新建第二页的页面文件second.wxml,代码如下。

代码语言:javascript
复制
<view>
  <text class="title">这是第二页</text>
  <navigator url="../home/home">前往首页</navigator>
</view>

上面代码中,<navigator>就是链接标签,相当于网页标签<a>,只要用户点击就可以跳转到url属性指定的页面(这里是第一页的位置)。

第四步,修改第一页的页面文件home.wxml,让用户能够点击进入第二页。

代码语言:javascript
复制
<view>
  <text class="title">这是首页</text>
  <navigator url="../second/second">前往第二页</navigator>
</view>

开发者工具导入项目代码,页面渲染结果如下。

用户点击"前往第二页",就会看到第二个页面。

这个示例的完整代码,可以参考代码仓库

七、wx.navigateTo()

除了使用<navigator>组件进行页面跳转,小程序也提供了页面跳转的脚本方法wx.navigateTo()

首先,打开home.wxml文件,代码修改如下。

代码语言:javascript
复制
<view>
  <text class="title">这是首页</text>
  <button bind:tap="buttonHandler">前往第二页</button>
</view>

开发者工具导入项目代码,页面渲染结果如下。

然后,打开home.js文件,代码修改如下。

代码语言:javascript
复制
Page({
  buttonHandler(event) {
    wx.navigateTo({
      url: '../second/second'
    });
  }
});

上面代码中,buttonHandler()是按钮点击的监听函数,只要用户点击按钮,就会调用wx.navigateTo()方法。该方法的参数是一个配置对象,该对象的url属性指定了跳转目标的位置,自动跳转到那个页面。

这个示例的完整代码,可以参考代码仓库

写到这里,这个小程序入门教程就告一段落了,入门知识基本上都涉及了。下一步,大家可以阅读小程序的官方教程使用文档,争取对小程序 API 有一个整体的把握,然后再去看看各种实际项目的源码,应该就可以动手开发了。以后,我还会写小程序的进阶教程,包括云开发,介绍如何写小程序的后端,下次再见。

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020年11月 2日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、WXML 渲染语法
  • 二、客户端数据储存
  • 三、远程数据请求
  • 四、<open-data>组件
  • 五、获取用户个人信息
  • 六、多页面的跳转
  • 七、wx.navigateTo()
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档