微擎模块开发-微擎小程序商城展示商品详细信息详解（后端篇）

当用户点击首页商品时，跳转至商品详情页。

商品详情页展示页面goods.wxml

<!--shangcheng_xk/pages/goods/goods.wxml-->
<import src="../../resource/wxParse/wxParse.wxml"/>
<view class="container"><scroll-view scroll-y="true" style="height:{{ screenHeight }}px;"><view class="goods-img"><swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000"><block wx:for="{{ goodsInfo.image }}" wx:key='id'><swiper-item><image src="{{ item }}" mode="widthFix"></image></swiper-item></block></swiper></view><view class="goods-info"><view class="price-info"><view class="price"><text>￥</text><text>{{ goodsInfo.now_price }}</text><text>{{ goodsInfo.originale_price }}</text></view><view class="sale-num"><text>已售{{ goodsInfo.sale_num }}件</text></view></view><view class="goods-title"><text>{{ goodsInfo.goods_name }}</text><text>{{ goodsInfo.goods_desc }}</text></view><view class="goods-label"><view class="label-list"><icon type="success" size="20" color="#ff6700"></icon><text>会员8.5折</text></view><view class="label-list"><icon type="success" size="20" color="#ff6700"></icon><text>假一赔十</text></view><view class="label-list"><icon type="success" size="20" color="#ff6700"></icon><text>满88包邮</text></view></view></view><view class="goods-detail"><view class="g-t-title">商品详情</view><view><template is="wxParse" data="{{wxParseData:article.nodes}}"/></view></view></scroll-view><view class="goods-operation"><view class="op-left"><view class="index"><image src="http://www.shancloudy.com/attachment/images/2/2020/07/KHzn57CCh6nUMNm6z6hbfd7awf6f57.png" mode="widthFix"></image><text>首页</text></view><view class="collect"><image src="http://www.shancloudy.com/attachment/images/2/2020/07/QxKp25u0khmO0QoxuOOp5ub1MmnMOU.png" mode="widthFix"></image><text>收藏</text></view></view><view class="op-right"><text>加入购物车</text><text>立即购买</text></view></view>
</view>

商品详情页展示页面goods.js

// shangcheng_xk/pages/goods/goods.js
var WxParse = require('../../resource/wxParse/wxParse.js');
var app = getApp()
Page({/*** 页面的初始数据*/data: {screenHeight:'',goodsInfo : ''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that = this// 获取屏幕滚动区域的高度wx.getSystemInfo({success: function(res) {var screenHeight=res.windowHeight-60that.setData({screenHeight:screenHeight})},})//获取商品详情数据var goodsid = options.goodsidapp.util.request({url: 'entry/wxapp/goodsInfo',data: {m: 'shangcheng_xk',goodsid:goodsid},success(res) {that.setData({goodsInfo : res.data.data})WxParse.wxParse('article', 'html', res.data.data.detail, that,0);}})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

商品详情页展示页面后端接口wxapp.php

// 获取商品详情数据public function doPageGoodsInfo(){global $_W,$_GPC;$errno = 0;$message = '返回信息';$data = array();$goodsImgRes = array();$id = $_GPC['goodsid'];$data = pdo_get('shangcheng_xk_goods',['id'=>$id]);$goodsImg = pdo_getall('shangcheng_xk_goodsimages',['goodsid'=>$id]);foreach ($goodsImg as $k => $v) {$goodsImgRes[] = $_W['attachurl'].$v['image'];}$data['image'] = $goodsImgRes;return $this->result($errno, $message, $data, $goodsImg);}

展示商品详情设计思路

1、本章重点就是使用了wxparse插件，将商品详情信息展示出来。
2、wxparse用法：

wxParse git地址：https://github.com/icindy/wxParse；
我们用到的就这一个文件，把这个文件复制到我们的微信前端文件中。
打开wxpars文件夹，这个是表情文件夹，没什么用途，直接删除，可以减少前端文件大小。
将wxparse引入到resource文件夹后，导入到goods的各个文件中
在goods.wxml 文件中引用 wxParse.wxml

//路径根据你实际情况修改
<import src="../../../wxParse/wxParse.wxml"/>

在goods.wxss 文件中引用 wxParse.wxss

//路径根据你实际情况修改
@import "../../../wxParse/wxParse.wxss";

在goods. js 文件中引用 wxParse.js

//路径根据你的实际情况更改
var WxParse = require('../../../wxParse/wxParse.js');

将需要解析的内容进行解析

WxParse.wxParse('article', 'html', res.data.data.detail, that,0);

在 wxml 文件中引用解析出来的数据

<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

以上就是本节课的主要内容，如果有看不懂的同学可以联系小编，还有一个好消息，就是如果文字教程大家看着比较费劲的话，可以关注小编，在8月份小编录制的视频教程就要正式上线了，到时候会对微擎框架进行更有深度的解析，与大家一起交流学习心得。

微擎模块开发-微擎小程序商城展示商品详细信息详解（后端篇）相关推荐

微信小程序授权登录获取用户信息详解
今天来说一下微信小程序的授权登录获取用户信息,首先我们看微信提供的小程序开发文档: https://blog.csdn.net/qq_41971087/article/details/82466647 ...
公众号商城开发和微信小程序商城开发有什么区别？
小程序和公众号商城都属于微商城,但是有很多朋友也不知道这两者之间有什么区别.对于选择做公众号商城还是小程序商城时,出现了选择困难症.既然微信小程序商城和微信公众号商城都是微信内的产品aigao0607 ...
都2020年，开发制作微信小程序商城，需要准备什么资料？应该不会不知道吧！
微信小程序使用越来越广泛,而还未入局的对于微信小程序开发需要什么材料甚至不清楚,其实这些材料很简单.总结就是微信支付.微信小程序注册.小程序代码,下面展开说说. 小程序红利从腾讯刚发布的财报看,微信 ...
node mysql商城开发_ＮideShop：基于Node.js+MySQL开发的微信小程序商城开源啦
NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦发布时间:2020-04-14 04:23:37 来源:51CTO 阅读:2894 作者:ch10mmt 高仿网易严选的微信 ...
使用uniapp开发字节跳动小程序的微信支付和支付宝支付（后端PHP,tp5）
使用uniapp开发字节跳动小程序的微信支付和支付宝支付(后端PHP,tp5) 准备工作微信支付配置支付宝支付配置字节跳动配置 1,微信支付配置: 开通微信支付的h5支付,关联APPID,保存k ...
微信小程序和百度的语音识别接口详解
介绍因为项目需要,使用到了微信小程序和百度的语音接口现在将项目中的一个小模块拿出来单独分享. 技术关键字微微信小程序百度语音接口 nodejs,express fluent-ffmegp 环境 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
腾讯小程序 java编写_微信小程序使用腾讯地图SDK详解及实现步骤
微信小程序使用腾讯地图SDK详解及实现步骤近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...

微擎模块开发-微擎小程序商城展示商品详细信息详解（后端篇）

商品详情页展示页面goods.wxml

商品详情页展示页面goods.js

商品详情页展示页面后端接口wxapp.php

展示商品详情设计思路

微擎模块开发-微擎小程序商城展示商品详细信息详解（后端篇）相关推荐

最新文章

热门文章