蓝天资源网
当前位置:蓝天资源网 / 网站源码 / 正文

【wordpress】uni-app小程序中打开文章需要输入密码查看

作者:忆笙发布时间:2021-10-01 01:11浏览数量:668次评论数量:0次

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

接口说明:

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

【wordpress】uni-app小程序中打开文章需要输入密码查看-插图 【wordpress】uni-app小程序中打开文章需要输入密码查看  第1张

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

【wordpress】uni-app小程序中打开文章需要输入密码查看-插图 【wordpress】uni-app小程序中打开文章需要输入密码查看  第2张

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

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

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

【wordpress】uni-app小程序中打开文章需要输入密码查看-插图 【wordpress】uni-app小程序中打开文章需要输入密码查看  第3张

交互逻辑:

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

【wordpress】uni-app小程序中打开文章需要输入密码查看-插图 【wordpress】uni-app小程序中打开文章需要输入密码查看  第4张

注意:

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>


忆笙

忆笙 主页 联系他吧

人间山河远阔,只想与你同行。

欢迎 发表评论: