微信小程序列表展示+详情

首先你需要去微信开发者官网注册一个小程序，每个邮箱只能申请一个，申请过程很简单我就不细说了。

申请成功之后你拿到你的AppID，并且去下载小程序开发者工具。

列表展示代码

//商品列表public function GoodsIndex(){$data=GoodBlog::all();if($data){return ['code'=>200,'msg'=>'查询成功','result'=>$data];}}//详情列表public function GoodsList(Request $request){$id=$request['id'];$data=GoodBlog::where('id',$id)->first();if($data){return ['code'=>200,'msg'=>'查询成功','result'=>$data];}}

小程序端 js

//商品列表public function GoodsIndex(){$data=GoodBlog::all();if($data){return ['code'=>200,'msg'=>'查询成功','result'=>$data];}}//详情列表public function GoodsList(Request $request){$id=$request['id'];$data=GoodBlog::where('id',$id)->first();if($data){return ['code'=>200,'msg'=>'查询成功','result'=>$data];}}

使用lin-ui插件

<block wx:for="{{ test}}" wx:key="unique"><l-card type="primary" full="{{true}}" image="{{item.goods_image}}" title="{{ item.name}}"><view>价格：{{ item.price}}</view><view><navigator url="/pages/goods_detail/goods_detail?id={{ item.id }}">  <l-button type="error">立即抢购</l-button></navigator></view>
</l-card>
</block>

{"usingComponents": {"l-card":"/miniprogram_npm/lin-ui/card","l-button":"/miniprogram_npm/lin-ui/button"}
}

详情页面

<view>商品秒杀页面</view>
<l-countdown time-type="second" time="{{expire_time}}"  />
<l-card type="primary" full="{{true}}" image="" title=""><view>价格：</view><view><l-button disabled="{{ btn_disable }}" bind:lintap="buyGoods" type="error" data-id="{{ goods.id }}">点我秒杀</l-button></view></l-card>

js代码

 onLoad: function (options) {//商品idlet id =options.id;// console.log(id)this.getGoodsDetail(id)},//商品详情获取getGoodsDetail(id){wx.request({url: 'http://www.zf.com/api/goods_list?id='+id,success: res => { let now_time = Math.round(new Date().getTime() / 1000).toString();// console.log(now_time)let expire_time = res.data.result.start_time-now_time;// console.log(expire_time)// console.log(res.data.result)this.setData({goods:res.data.result,expire_time})if(expire_time > 0){this.setData({btn_disable:true})}}})},

页面的防抖 js中引入

import {debounce
} from "../../utils/util"

微信小程序列表展示+详情相关推荐

微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮针对这个功能,产品的需求如下由于我们项目是教育类产品所以这里这个功能会用在发动态这里,就像微信朋友圈那样,我们叫班级圈. 用户发班级圈时,可以 ...
微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
微信小程序商品详情html,微信小程序关于商品详情类的富文本解析器
微信小程序关于商品详情类的富文本解析器 2020年08月10日 | 萬仟网IT编程 | 我要评论微信小程序关于商品详情类的富文本解析器富文本的解析,在vue中有v-html解析富文本的方法,但是在微 ...
微信小程序入门四详情页面
前三章基本完成文章列表页面的UI界面和数据加载,这章介绍内容详情页面的加载和布局.有了之前的知识储蓄,这章就容易多了.废话不多说. 首先是服务端代码,通过id查询数据:接口 https://www.i ...
微信小程序列表页分页加载功能
微信小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面. 代码如下: wxml代码 ...
微信小程序|列表渲染-for循环
欢迎点击「算法与编程之美」↑关注我们! 本文首发于微信公众号:"算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述大家学习程序设计都知道for循环,而且很多编程都需要 ...
微信小程序--字体展示
以下为微信小程序font-family中提供的十四种字体如果同时设置font-size,有时会对font-family的效果产生干扰,导致字体设置无效,需注意字体大小问题. 字体一 font-fam ...
微信小程序map展示
今天对微信小程序进行了运用,对于移动端自己做的比较少,现在大多数的项目就是百度,也就是CV工程师微信小程序的代码 wxml <view class="" hover-cla ...
通俗易懂的五星评价代码——微信小程序如何展示像淘宝天猫那样五星好评？
项目背景 2020年起始,微信官方宣布支持小程序直播.陆续有很多的商家与开发者参与到这场微信生态直播大潮中,作为电商小程序评价内容必不可少的,官方没有提供评价组件只能自己动手丰衣足食.网上看了很多资料 ...

微信小程序列表展示+详情

微信小程序列表展示+详情相关推荐

最新文章

热门文章

微信小程序 列表展示+详情

微信小程序 列表展示+详情相关推荐

最新文章

热门文章

微信小程序列表展示+详情

微信小程序列表展示+详情相关推荐