今天来给大家分享一个小教程,基于TinyTale小程序实现文章访问验证码功能,先上演示。

注意:版本以后更新了api,请注意同步修改,参考【plugin-tools-1.2.2 更新api,导致小程序文章验证码失败?】。

功能演示:

文章访问验证码演示1.png

文章访问验证码演示2.png

文章验证码功能演示.gif

功能实现:

一、要求:

二、代码修改

第一步,找到src/pages/about/index.vue页面,(注:这一步非必须,我们在第二步的3点中优化了代码,所以第一步可以不做)在页面中插入如下代码:

uni.setStorageSync('openid',res.openid);

如图所示:

第二步,改造文章详情页面

  1. 先找到src/utils/module/article.ts文件,直接改造getData方法,代码如下:

getData(id: string): Promise<Article> {
  return service.get(
    `/apis/api.content.halo.run/v1alpha1/posts/${id}`, 
    {
    	'Wechat-Session-Id': uni.getStorageSync('openid')
    })
},

如图所示:

  1. 然后我们找到src/pages/detail_pages/article.vue页面,插入如下代码:

扫码获取验证码