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

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

商品详情页展示页面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-60
			that.setData({
			  screenHeight:screenHeight
			})
		  },
		})

		//获取商品详情数据
		var goodsid = options.goodsid
		app.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月份小编录制的视频教程就要正式上线了，到时候会对微擎框架进行更有深度的解析，与大家一起交流学习心得。