【wordpress】uni-app小程序中访问文章需要输入密码可阅读

【wordpress】uni-app小程序中访问文章需要输入密码可阅读

花谢了,它会让你看到唱歌的雪;雪停了,它会让你看到透明的水;冰融化了,它会让你看到微笑的云;每一种美丽,都是它在温柔地和你说,别担心,它们都在我怀里

【wordpress】uni-app小程序中访问文章需要输入密码可阅读 19

唠叨一会

让小程序在访问某个文章需要阅读密码;这是群里大佬提供的建议,星宿UI小程序可以访问文章选择激励视频阅读或者需要阅读密码,来增加与用户的互动;wordpress有自带的接口实现起来不难,难得应该是交互逻辑;案例演示

接口说明

我们在worpdress 后台新建一个文章,设置该文章需要密码阅读

【wordpress】uni-app小程序中访问文章需要输入密码可阅读 20

随后我们看接口,可以得知当我们设置密码阅读的是时候是可以使用protected来判断,此外和普通文章没有其他区别

【wordpress】uni-app小程序中访问文章需要输入密码可阅读 21

那么我们访问该文章的时候在请求添加上参数验证密码

http://wordpress:7888/wp-json/wp/v2/posts/150?password=1234

如果密码正确则显示文章内容,如果密码错误则出现403返回

【wordpress】uni-app小程序中访问文章需要输入密码可阅读 22

交互逻辑

我当时内心:因为我们在点击文章列表进入文章详情的时候没有正确的文章内容,若我们在文章详情界面让用户输入访问密码则需要在发起一次请求验证密码(总发起2次);或者首页用户点击的时候出现那弹窗或一个验证密码的页面,当用户输入密码后请求验证(只需要验证1次);最后逻辑如下

【wordpress】uni-app小程序中访问文章需要输入密码可阅读 23

注意

1.测试时请将请求中的域名换成自己的

2.该版本为uni-app框架需要hbuilder x编译,

3.请在manifest.json文件中将微信小程序运行配置添加您的小程序id

案例

首页

<template>
  <view class="content">
    <view class="text-area" v-for="(item,index) in newList" @tap="tapPost(item.id,item.content.protected)">
      文章:{{item.title.rendered}}
    </view>
  </view>
</template>
​
<script>
  export default {
    data() {
      return {
        newList: []
      }
    },
    onLoad() {
      // 小程序打开触发函数
      this.getList();
    },
    methods: {
      // 发起请求获取文章地址
      getList(){
        uni.request({
            url: 'http://wordpress:7888/wp-json/wp/v2/posts/', //仅为示例,并非真实接口地址。
            success: (res) => {
                console.log(res.data);
                this.newList = res.data;
            }
        });
      },
      // 列表点击传递文章id和protected类型
      tapPost(e,w){
        console.log(e,w)
        uni.redirectTo({
            url: '../data/data?id=' + e + '&protected=' + w
        });
      }
    }
  }
</script>
​
<style>
  .text-area {
    background-color: #DD524D;
    height: 140upx;
    margin: 30upx;
    border-radius: 20upx;
    line-height: 140upx;
    padding-left: 30upx;
  }
</style>
​

详情页

<template>
  <view>
    <view class="" v-if="isShow == true">
      <view class="uni-form-item uni-column">
        <view class="title">请输入密码阅读文章</view>
        <input class="uni-input" password type="text" placeholder="这是一个密码输入框" v-model="posWord" />
        <button type="default" @tap="inputData()">确定</button>
      </view>
    </view>
    <view class="" v-else>
      文章标题:{{ posDate.title.rendered }}
    </view>
  </view>
</template>
​
<script>
  export default {
    data() {
      return {
        postId: '',
        posDate: [],
        isShow: false,
        posWord:''
      }
    },
    onLoad(option) {
      // 小程序打开储存文章ID和protected类型,执行getList函数
      this.postId = option.id;
      this.protected = option.protected;
      this.getList();
    },
    methods: {
      // 判断protected为true需要密码,为false直接阅读文章
      getList() {
        if(this.protected == 'true'){
          this.isShow = true;
        }else{
          this.isShow = false;
          uni.request({
            url: 'http://wordpress:7888/wp-json/wp/v2/posts/' + this.postId,
            success: (res) => {
              this.posDate = res.data;
            }
          })
        }
      },
      // 点击后获取输入框的密码发起请求,密码正确显示文章标题,错误则提示
      inputData(){
        uni.request({
          url: 'http://wordpress:7888/wp-json/wp/v2/posts/' + this.postId + '?password=' + this.posWord,
          success: (res) => {
            console.log(res.statusCode)
            if(res.statusCode == 200){
              this.isShow = false;
              this.posDate = res.data;
              console.log(this.posDate)
            }else {
              uni.showToast({
                title: '密码错误',
                icon:'none',
                duration: 2000
              });
            }
          }
        })
      }
    }
  }
</script>
​
<style>
  .uni-input{
    border: #000000 1px solid;
  }
</style>
​

案例下载

链接: https://pan.baidu.com/s/1r44viOWUVHfm3NWd6NEPBA 提取码: k2b8

【wordpress】uni-app小程序中访问文章需要输入密码可阅读 24

分享到 :
相关推荐

真uni-app框架微信小程序深色模式配置教程

不要眼睛一红就觉得人间不值;散伙乃是人间常态,你我哪能例外唠叨一会大家都知道从ios...

新手uni-app纯手写微信小程序自定义标题栏适配全面/异形屏幕iphone x

爱上你这件事太妙了,三缄其口,却又四海生风,有亏盈,有枯荣唠叨一会作为一个新手我又学...

必刷题,最新开始刷题小程序源码,微信小程序功能齐全支持二开

女人心海底捞麻辣烫关东煮豆沙包肉夹馍,炸鸡翅羊肉串粉丝煲三鲜汤白切鸡卤鸭脖唠叨一会突...

星宿UI V0.1-微信小程序:wordprss开源小程序支持激励视频流量主

看清了很多人,却不能随意拆穿;讨厌着很多人,却又不能轻易翻脸。有时候,生活就是要逼自...

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论(2)

  • 跨境电商卖家 游客 05/11/2021

    前来学习,帮顶哦

  • A. 五尊®影视小程序搭建 游客 04/28/2021

    455