微信小程序查看到评论

声明tp6后台

授权

页面

<view class="container"><view class="userinfo"><block wx:if="{{!hasUserInfo}}"><button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button><button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button></block><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view>
</view>

Page({data: {userInfo: {},hasUserInfo: false,canIUseGetUserProfile: false,},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {this.setData({userInfo: res.userInfo,hasUserInfo: true})wx.login({success:ret=>{wx.request({url: 'http://www.test3.com/api/login',data:{code:ret.code,nickname:res.userInfo.nickName,pic:res.userInfo.avatarUrl},success:result=>{console.log(result);if(result.data.code==200){wx.setStorageSync('token', result.data.token)}}})}})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},
})

接口

controoller

<?php
declare (strict_types = 1);namespace app\api\controller;use app\api\model\User;
use app\api\server\Token;
use think\Request;
use app\api\server\Login as LoginServer;
class Login
{public function getUser(Request $request){if (empty($request->get('code'))){return json(['code','data'=>'','msg'=>'ok']);}$url=sprintf(config('wx.url'),config('wx.appid'),config('wx.sercet'),$request->get('code'));$openid=(new LoginServer())->getLogin($url);$userDate=User::loginUser($openid,$request['nickname'],$request['pic']);
//        dd($userDate->toArray());if (!$userDate){return json(['code'=>1000,'token'=>'','msg'=>'创建失败']);}
//        dd($userDate['id']);$token=(new Token())->createToken($userDate['id']);if ($token){return json(['code'=>200,'token'=>$token,'msg'=>'ok']);}return json(['code'=>1000,'token'=>'','msg'=>'不安全']);}
}

server/login

<?php
namespace app\api\server;class Login
{public function getLogin($url){$curl = curl_init(); // 启动一个CURL会话curl_setopt($curl, CURLOPT_URL, $url);curl_setopt($curl, CURLOPT_HEADER, 0);curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);  // 从证书中检查SSL加密算法是否存在$tmpInfo = curl_exec($curl);     //返回api的json对象if (!$tmpInfo){return  false;        }//关闭URL请求curl_close($curl);$result = json_decode($tmpInfo, true);return $result['openid'];}
}

接口健全

https://blog.csdn.net/that_were_you/article/details/119112689?spm=1001.2014.3001.5501

中间件

tp6接口频繁访问

https://blog.csdn.net/that_were_you/article/details/119605417?spm=1001.2014.3001.5501

列表页前端

<!--pages/list/list.wxml-->
<navigator url="/pages/form/form">
<button>添加</button>
</navigator><block wx:for="{{list}}">
<navigator url="/pages/detail/detail?id={{item.id}}"><l-card type="avatar"l-class="card"title="{{item.title}}" describe="18个小时前"><!-- 此处为content --><view class="avter-content">{{item.text}}</view><view class="avter-share-container"></view></l-card>
</navigator>
</block>

// pages/list/list.js
Page({/*** 页面的初始数据*/data: {list:[],page:1},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.request({url: 'http://www.test3.com/api/articlelist',data:{page:this.data.page},header:{'token':wx.getStorageSync('token')},success:res=>{console.log(res);this.setData({list:res.data.data.data,page:this.data.page+1})}})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {wx.request({url: 'http://www.test3.com/api/articlelist',data:{page:this.data.page},header:{'token':wx.getStorageSync('token')},success:res=>{console.log(res.data.data.data);if(this.data.page<5){this.setData({list:this.data.list.concat(res.data.data.data),page:this.data.page+1})console.log(this.data.list);}}})}
})

接口

public function articleList(Request $request){$page=$request->get('page');$result=Articles::paginate(8);$result&&$result=$result->toArray();return json(['code'=>200,'data'=>$result,'msg'=>'ok']);}

添加

html

<!--pages/form/form.wxml-->
<l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit"><l-form-item label="标题:" name="title"><l-input id="title" bind:lininput="title" value="{{title}}" hide-label show-row="{{false}}"/></l-form-item><l-form-item label="文章:" name="text"><l-textarea id="text" bind:lininput="text" placeholder="说说你的想法吧..."  /></l-form-item><l-form-item label="地址:" name="address"><l-input id="address" bindtap="map" value="{{address}}" hide-label show-row="{{false}}"/></l-form-item><l-image-picker count="9" bind:linchange="onChangeTap" /><view slot="submit"><l-button>提交</l-button></view><view slot="reset"><l-button type="default" plain>重置</l-button></view>
</l-form>

// pages/form/form.js
Page({/*** 页面的初始数据*/data: {title:'',text:'',latitude:'',longitude:'',address:'',urls: [],},title(e){console.log(e.detail.value);this.setData({title:e.detail.value})},text(e){console.log(e.detail.value);this.setData({text:e.detail.value})},map(e){wx.chooseLocation({latitude:0,success:ret=>{console.log(ret);this.setData({latitude:ret.latitude,longitude:ret.longitude,address:ret.name})}})},submit(e){wx.request({url: 'http://www.test3.com/api/articleform',data:{title:this.data.title,text:this.data.text,latitude:this.data.latitude,longitude:this.data.longitude,address:this.data.address,pic:this.data.urls},header:{'token':wx.getStorageSync('token')},success:res=>{console.log(res);if(res.data.code==200){wx.switchTab({url: '/pages/list/list',})}}})},onChangeTap(e){// console.log(e.detail);let filePath = e.detail.current;// console.log(tempFilePaths);//定义一个空数组，进行存放上传图片urlvar urlArr = [];for( let index=0;index<filePath.length;index++){wx.uploadFile({filePath: filePath[index],name: 'file',url: 'http://www.test3.com/api/file',header:{'token':wx.getStorageSync('token')},success:res=>{// console.log(res);//json解码const data = JSON.parse(res.data);// console.log(data);//追加进data的数组中urlArr.push(data.data)this.setData({urls: urlArr})//       console.log(this.data.urls);}})}}
})

接口

public function upload(Request $request){$file=$request->file("file");$savename = \think\facade\Filesystem::putFile( 'topic', $file);//腾讯云$data=Cos::getCos($savename);return json(['code'=>200,'data'=>$data,'msg'=>'ok']);}public function articleForm(Request $request){$param=$request->param();$data=Articles::create($param);if ($data){RedisInstance::setString('article'.$data['id'],json_encode($data));return json(['code'=>200,'data'=>'','msg'=>'ok']);}return json(['code'=>10000,'data'=>'','msg'=>'no']);}

腾讯云上传

https://blog.csdn.net/that_were_you/article/details/119592766?spm=1001.2014.3001.5501

详情页

html

<!--pages/detail/detail.wxml-->
<l-card type="avatar"l-class="card"title="{{detail.title}}" describe="18个小时前"><!-- 此处为content --><view class="avter-content">{{detail.text}}</view><view class="avter-share-container"></view></l-card><view>评论</view><block wx:for="{{com}}"><view><view>{{item.user.nickname}}</view><view>{{item.text}}</view></view></block><l-form name="student" l-form-btn-class="l-form-btn-class" bind:linsubmit="submit"><l-form-item label="内容:" name="text"><l-input id="text" bind:lininput="text" value="{{text}}" hide-label show-row="{{false}}"/></l-form-item><view slot="submit"><l-button>提交</l-button></view>
</l-form>

// pages/detail/detail.js
Page({/*** 页面的初始数据*/data: {detail:'',com:[],text:''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.lin.initValidateForm(this)var id=options.idwx.request({url: 'http://www.test3.com/api/detail',data:{id:id},header:{'token':wx.getStorageSync('token')},success:res=>{console.log(res.data);this.setData({detail:res.data.data,com:res.data.com})}})},text(e){console.log(e);this.setData({text:e.detail.value})},submit(e){let id=this.data.detail.idwx.request({url: 'http://www.test3.com/api/commentorder',data:{text:this.data.text,article_id:this.data.detail.id,},header:{'token':wx.getStorageSync('token')},success:res=>{console.log(res);if(res.data.code==200){wx.navigateTo({url: "/pages/detail/detail?id="+this.data.detail.id,})}}})}
})

后台接口

public function detail(Request $request){$data=Articles::where('id',$request['id'])->find();$com=Comments::with(['user'])->where('article_id',$request['id'])->select();return json(['code'=>200,'data'=>$data,'com'=>$com,'msg'=>'ok']);}public function commentOrder(Request $request){$param=$request->param();$param['uid']=$request->uid;
//        dd($param);$result=Comments::create($param);if ($result){return json(['code'=>200,'data'=>'','msg'=>'ok']);}return json(['code'=>1000,'data'=>'','msg'=>'no']);}

基本完成样式肯定不好看主要是帮新手们看思路

需要request封装的

https://blog.csdn.net/that_were_you/article/details/118584750?spm=1001.2014.3001.5501

接下来是表结构

user

article

comment

用最low的代码实现最清晰的逻辑！！！

微信小程序查看到评论相关推荐

微信小程序的订单评论页面-仿淘宝
微信小程序的订单评论页面-仿淘宝在网上搜了下,大部分都挺麻烦的,所以自己写了个,感觉还可以先看效果图: 需要用到的图片: 上代码: wxml: <view class='contains'& ...
反编译微信小程序查看微信小程序源码
综合了一下网上所找到的各种方法及遇到的坑,经过试验,截止2020-01-30,本文所述方法可用步骤如下: 安装node.js最新版本:下载地址:https://nodejs.org/en/ 下载网上 ...
微信小程序 - 查看输入值的长度
在小程序中,input 输入手机号之后,判断是否是11位数,之前翻文档和看别人的代码,都是看下面代码,上图是粘贴参考的文档资料在2019年3月,参考的18年9月的代码, 但是这样写完之后,总是出错 ...
微信小程序——查看AppId和AppSecret
1.登录微信公众平台:https://mp.weixin.qq.com/ 2.点击开发管理-------------->开发设置:
微信小程序查看组件中的data值
小手选中组件元素,Component Data即可看到,不用采用console.log方式了,巴适的很
微信小程序--查看变量类型的方法（简易）
场景描述有bug的时候,我们可能会想起会不会是变量类型的错误呢?是的,很多时候,变量类型不仔细.不注意,很容易出错.那么怎么简单的查看变量类型呢? 方法说个最简单的方法吧,直接把鼠标移动到变量名上 ...
微信小程序查看通讯录联系人
通讯录 addressBook() {//通讯录操作 wx.chooseContact({ success: function (res) { // console.log(res, '成功回调') ...
微信小程序消息模板设计及实现
本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计. 小程序端微信用户支付成功后,微信服务通知中会收到支付成功服务提醒.见下图: 商家端用户完成评价后,商家 ...
微信小程序取本地数据库数据(实测有图)
测试效果如下: 本实验主要分为如下几个步骤: 一.安装数据库二.安装PHP+Apache 三.编辑微信小程序代码前两项的简单介绍在如下连接: PHP+Apache 四.本文主要介绍第三项的内容需 ...

微信小程序查看到评论

用最low的代码实现最清晰的逻辑！！！

微信小程序查看到评论相关推荐

最新文章

热门文章