微信小程序实战-商城
黄菊华老师
专注大学生计算机教育和毕业设计辅导
展开
-
25-微信小程序商城 联系客服(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
联系客服本节主要讲解会员功能中的联系客服界面的实现。效果如图15-11所示。1.布局分析结构布局分析示意如图15-12所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view> <view > <view > <image>客服图片</image> </view> <view >客服姓名</view> </view> &l原创 2020-11-18 08:58:34 · 1892 阅读 · 1 评论 -
25-微信小程序商城 我的收藏(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
我的收藏本节主要讲解我的收藏界面的实现。效果如图15-9所示。内容的布局分析可以参考12.8节“销售排行”。实现功能的.wxml文件代码示例如下:<!--收藏-1行2列:左侧图片,右侧3行文本--> <view class='text'> <view class='line_y'></view> <text>我的收藏列表</text></view><navigator url='/pages/.原创 2020-11-18 08:55:16 · 1410 阅读 · 1 评论 -
24-微信小程序商城 收货地址列表(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
收货地址列表本节主要讲解收货地址列表界面的实现。效果如图15-5所示。1.布局分析结构布局分析示意如图15-6所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view > <view > <text>测试</text> <text class='right'>18670321728</text></view> <view >原创 2020-11-17 12:44:19 · 20625 阅读 · 1 评论 -
22-微信小程序商城 我的订单(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
我的订单本节主要讲解会员功能的的我的订单界面的实现。效果如图15-3所示。1.布局分析顶部的菜单:全部订单/待支付/待收货,可以参考13.3节,沿用该节的内容,只需要改造每个菜单对应的swiper-item即可。我们接下来分析其中一个订单的布局,多个订单循环显示即可。结构布局分析示意如图15-4所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<scroll-view><view > 单号:201808081102 | 时间:2018/9/1原创 2020-11-17 12:41:46 · 8075 阅读 · 0 评论 -
21-微信小程序商城 会员首页(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
本章主要讲解会员相关功能的界面实战。包含:会员首页界面、我的订单页面,收货地址管理、新增、修改页面、我的收藏页面、常见问题页面、联系客服页面等。本章节不在分析界面的层级了,大家可以根据示意图分析,然后结合给出的示例代码对比实战。会员首页本节主要讲解会员首页界面的实现。效果如图15-1所示1.布局分析结构布局分析示意如图15-2所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view><image></image><view &g原创 2020-11-17 12:36:58 · 2606 阅读 · 1 评论 -
20-微信小程序商城 下单页面的产品列表和留言(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
下单页面的产品列表和留言本节主要讲解下单页面中的产品列表和留言界面如何实现。效果如图14-9所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view><!—第1层-开始--> <image></image><!—第2层--> <view><!—第2层--> <view>珀莱雅水动力护肤品套装</view><!—第3层--> &原创 2020-11-17 12:34:46 · 1688 阅读 · 0 评论 -
19-微信小程序商城 下单页面收货地址(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
下单页面收货地址本节主要讲解下单页面中顶部收货地址界面的实现。效果如图14-7所示。1.布局分析结构布局分析示意如图14-8所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view> <image></image> <view><radio-group> <view> <radio value="公司" checked="{{true}}" >黄菊华-原创 2020-11-17 12:33:22 · 2283 阅读 · 0 评论 -
18-微信小程序商城 下单页面底部菜单(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
下单页面底部菜单本节主要介绍下单页面的底部菜单界面如何实现。效果如图14-5所示。1.布局分析结构布局分析示意如图14-6所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view ><!--第1层-开始 -->没 <view>金额</view> <view>下单支付</view> </view><!--第1层-结束 -->根据效果图分析出框架的层级后,在原创 2020-11-17 12:28:26 · 1530 阅读 · 0 评论 -
17-微信小程序商城 购物车首页底部菜单(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
购物车产品列表本节主要讲解购物车产品列表界面的实现。效果如图14-3所示。1.布局分析根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view><!—第1层-开始--> <image></image><!—第2层--> <view><!—第2层--> <view>珀莱雅水动力护肤品套装</view><!—第3层--> <vi原创 2020-11-17 12:27:13 · 1626 阅读 · 0 评论 -
16-微信小程序商城 购物车首页底部菜单(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
本章主要讲解商城小程序购物车界面和下单界面的实现。包含:购物车顶部菜单布局、购物车产品列表布局、下单页面底部菜单布局、下单页面其他界面的布局。购物车首页底部菜单本节主要讲解购物车页面底部菜单界面的实现,效果如图14-1所示。1.布局分析结构布局分析示意如图14-2所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view> <!—第1层-开始 --><view> <!—第2层-开始 --><view> &l原创 2020-11-17 12:25:28 · 2684 阅读 · 0 评论 -
15-微信小程序商城 产品评价页布局(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
产品评价页布局本节主要讲解产品评价页的布局和实现,效果如图13-22所示。1.布局分析结构布局分析示意如图13-23所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view> <!—第1层-开始--> <view></view> <!—第2层-评论标题--><view> <!—第2层-评论输入框区块--><textarea></te原创 2020-11-16 11:24:57 · 1736 阅读 · 0 评论 -
14-微信小程序商城 产品详情页布局(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
产品详情页布局本节主要讲解产品页面详情页面的布局实现,效果如图13-20所示。1.布局分析根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view> <!—第1层-开始--> <image></image> <!—第2层-详情图片--> ……<image></image> <!—第2层-详情图片--></view> <!—第1层-结束-->根据效果原创 2020-11-16 11:23:18 · 2793 阅读 · 0 评论 -
13-微信小程序商城 产品简介布局(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
产品简介布局本节主要讲解产品简介页面的布局和实现。效果如图13-13所示。1.应用知识点分析根据“11.3.2” 布局分析的分析;我们需要将商品的简介信息,写到swiper组件里面的第一个swiper-item里;第二个swiper-item里面写产品详情,第三个swiper-item里面写产品评价。2.产品轮播图详细知识见10.2.3节介绍的swiper组件。.wxml文件代码示例如下:<swiper style='height: 600rpx' indicator-dots="{原创 2020-11-16 11:21:15 · 1577 阅读 · 0 评论 -
12-微信小程序商城 分类和产品 产品页面底部功能(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
产品页面底部功能本节主要讲解产品页面底部界面的实现。效果如图13-11所示。1.应用知识点分析底部的5个菜单:首页、收藏、购物车、加入购物车、立即购买,我们可以按一定的宽度比例来分配;通过内联样式“style=‘width:x%’”来实现。产品详细页面,我们这里首要是获取远程链接过来的产品ID参数。.js文件代码示例如下://页面的初始数据data: {cpid:"", //产品ID,初始数据为0或者空都可以}//页面加载的时候获取参数,并将获得的产品ID赋值给变量cpid,本页面原创 2020-11-16 11:16:25 · 1300 阅读 · 0 评论 -
11-微信小程序商城 分类和产品 产品页面顶部切换功能(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
产品页面顶部切换功能本节主要讲解产品详细页面中顶部切换界面和功能的实现,效果如图13-9所示。1.布局分析结构布局分析示意如图13-10所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view> <!—第1层-开始--><view>商品</view> <!—第2层--> <view>详情</view> <!—第2层--> <view>评论原创 2020-11-16 11:12:43 · 1547 阅读 · 0 评论 -
10-微信小程序商城 分类和产品 产品列表(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
产品列表本节主要讲解产品分类右侧产品列表页面界面的实现,包含顶部查询内容布局、筛选条件布局、产品列表布局。效果如图13-3所示。顶部查询本节主要讲解产品分类右侧,顶部产品列表查询布局的实现。如图13-4所示。分析结果: 第1层:整个产品列表公用的框架。 第2层:用于定义搜索总区块的背景颜色,下划线之类。 第3层:定义详细。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view> <!—第1层-开始--><view> <原创 2020-11-16 11:06:50 · 4809 阅读 · 0 评论 -
09-微信小程序商城 分类和产品 左右布局框架(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
本章主要讲解产品分类功能和产品详细页面的实现。主要涉及:如何实现左右布局的框架,如何实现产品页面顶部菜单的切换,产品的详情页面、底部菜单、评论页面的实现等。左右布局框架左右布局框架效果如图13-1所示。布局分析每一个层级使用view或者循环/链接等元素来实现,结构布局分析示意如图13-2所示。根据上面的布局分析,我们会产生基础的框架,代码示例如下:<view class="container"><!-- 左侧分类 --> <view > <bl原创 2020-11-16 11:03:35 · 3336 阅读 · 1 评论 -
08-微信小程序商城 销售排行(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
销售排行本节讲解销售排行功能的“区域标题”和“产品列表”的界面实现。效果如图12-17所示。1.应用知识点分析应用知识点包括: 一行2列的布局使用(左右两列,右侧1列3行)。 本地.js脚本数据的设置和使用。 远程数据的获取和本地显示。下面我们会分3种方式来讲最新上架产品的实现方式。第1种:纯页面布局的制作,适合纯前端人员。第2种:本地.js脚本数据来实现销售排行产品的显示,适合全栈人员。第3种:.js脚本获取远程数据来实现销售排行产品的显示,适合全栈人员。2.布局分析结构布原创 2020-11-16 11:01:02 · 1943 阅读 · 0 评论 -
07-微信小程序商城 精品推荐(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
精品推荐本节讲解精品推荐“区域标题”和“产品列表”的界面实现。效果如图12-15所示。1.应用知识点分析应用知识点包括: 一行2列的布局使用。 本地.js脚本数据的设置和使用。 远程数据的获取和本地显示。下面我们会分3种方式来讲最新上架产品的实现方式。第1种:纯页面布局的制作,适合纯前端人员。第2种:本地.js脚本数据来实现精品推荐产品的显示,适合全栈人员。第3种:.js脚本获取远程数据来实现精品推荐产品的显示,适合全栈人员。2.布局分析结构布局分析示意如图12-16所示。原创 2020-11-16 10:57:36 · 1034 阅读 · 0 评论 -
06-微信小程序商城 最新产品(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
最新产品本节讲解最新产品功能的实现,主要涉及“区域标题”的制作和“产品列表”两块内容;区块标题如图12-10所示,产品列表如图12-11所示。1.应用知识点分析应用知识点包括: 标题区域的制作,左侧彩色竖条的样式写法。 一行3列的布局使用。 远程数据的获取和本地显示。下面我们会分3种方式来讲最新上架产品的实现方式。第1种:纯页面布局的制作,适合纯前端人员。第2种:本地.js脚本数据来实现最新上架产品的显示,适合全栈人员。第3种:.js脚本获取远程数据来实现最新上架产品的显示,适合原创 2020-11-16 10:54:22 · 1061 阅读 · 0 评论 -
03-微信小程序商城 顶部轮播图片(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
顶部轮播图片本节主要讲解如何在小程序商城中轮播图片,下面主要是实现3张图片的轮换播放,效果如图12-3所示。1.应用知识点分析 Swiper组件的使用,用法见“10.2.3 滑块视图容器swiper”。 block wx:for循环语句的使用,显示多张图片,for语句用法见“9.2.2 For语句”。 变量的使用,swiper的属性设置。2.功能的实现.wxml文件代码示例如下:<swiper indicator-dots="{{indicatorDots}}" <原创 2020-11-13 09:05:01 · 1866 阅读 · 1 评论 -
02-微信小程序商城 顶部广告图片(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
顶部广告图片本节主要教大家学会图片组件image的使用,应用于小程序商城中的顶部广告图。主要实现如图12-2的效果。1.应用知识点分析用到图片组件、远程图片的调用、变量的使用等知识: 图片组件image的使用,见“10.2.6图片image”。 本地图片的调用。 最简单的变量的使用,见“9.1.1 变量”。 远程服务器图片的调用。本节讲解如何设置显示本地图片,直接引用本地项目内的图片,以及如何设置变量指向互联网的图片,如何在前端显示。提示:微信小程序整个程序包大小不能超过2M(2原创 2020-11-13 09:01:37 · 1290 阅读 · 0 评论 -
01-微信小程序商城 商城框架的制作(微信小程序商城开发、小程序毕业设计、小程序源代码)(黄菊华-微信小程序开发教程)
微信小程序商城 商城框架的制作讲解商城小程序首页模块的制作,包含商城框架的制作、顶部普通广告图片、顶部轮播广告、快捷菜单、最新通知、最新产品、精品推荐等元素的制作,最后介绍销售排行的制作。本章主要应用了CSS和Flex Box的知识、小程序前端开发的基础知识。商城框架本节开始制作整个小程序商城的框架,主要是底部5个菜单的设置,微信小程序中app.json的设置参见2.2.1节“全局配置”。准备:5个菜单的默认图片和选中菜单的显示图片,合计10个图片,位于文件夹images里面。底部菜单的设置参见2.原创 2020-11-13 08:57:03 · 3001 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-留言界面的实现
wxml代码<view class="group"> <view class="group-header">问题描述</view> <view class="group-body"> <textarea placeholder="请输入对问题的描述,可输入1000字" maxlength="1000"></texta...原创 2019-03-20 12:48:09 · 810 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-常见问题列表
wxml代码<view class='text'> <view class='line_y'></view> <text>常见问题</text></view><navigator url='/pages/tmp/yemian/01-xiangxi?id={{888}}'> <view ...原创 2019-03-20 12:16:57 · 820 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-收藏列表
wxml代码<!--收藏-1行2列:左侧图片,右侧3行文本--> <view class='text'> <view class='line_y'></view> <text>我的收藏列表</text></view><navigator url='/pages/fenlei/yemian/...原创 2019-03-20 12:15:12 · 966 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-添加地址
js代码// pages/addr/edit/edit.jsPage({ data: { addr: {}, provinces: [ "浙江", "湖南" ], citys: [ "杭州", "长沙" ], areas: [ "余杭区", "开福区" ],...原创 2019-03-20 12:13:21 · 991 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-收货地址列表
js代码// pages/addr/addr.jsPage({ data: { addrlist: [ { id: 1, name: "公司", phone: "13516821613", postNo: "41000", province: "浙江", city: "杭...原创 2019-03-20 12:10:56 · 966 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-订单列表
js代码//获取应用实例 var app = getApp() Page({ /** * 页面的初始数据 */ data: { /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, /*** 生命周期函数--监听页面加载*/...原创 2019-03-20 12:08:08 · 1150 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-商品详情页面
js代码var app = getApp() Page({ /** * 页面的初始数据 */ data: { cpid:"", /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, ads: [ '...原创 2019-03-20 12:04:05 · 1261 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-会员首页
js代码// pages/huiyuan/index2.jsPage({ /** * 页面的初始数据 */ data: { }, tuichu:function(){ wx.clearStorage() //wx.switchTab({ // url: '/pages/huiyuan/index', //}) wx.r...原创 2019-03-20 12:00:49 · 870 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-购物车
js代码Page({ /** * 页面的初始数据 */ data: { cost: 1, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, myjia: function (e) { let route = e.currentTarget.dataset...原创 2019-03-20 11:57:10 · 1300 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-商品分类
js代码//const app = getApp();Page({ /** * 页面的初始数据 */ data: { winWidth: 0, winHeight: 0, hidden: false, curNav: 1, curIndex: 0, navList: [ { id: 1, ...原创 2019-03-20 11:54:37 · 1171 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-联系客服
js代码// pages/huiyuan/qita/03-kefu.jsPage({ /** * 页面的初始数据 */ data: { }, calling: function () { wx.makePhoneCall({ phoneNumber: '4000000000', success: function () { ...原创 2019-03-20 12:18:47 · 937 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-知识点-图片轮播
两种实现方式:纯wxml和带js的实现js代码// pages/tmp/tupian/01-lunbo.jsPage({ /** * 页面的初始数据 */ data: { images: [ 'http://www.yaoyiwangluo.com/upload/ban2.jpg', 'http://www.yaoyiwangluo....原创 2019-03-20 12:24:11 · 773 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-信息列表的实现
wxml代码<view class="container2"> <view> <view class='gy1'> <image src='/img/qyln.jpg'></image> </view> <view class="node-item">...原创 2019-03-20 12:48:20 · 786 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-自定义底部菜单的实现
js代码// pages/tmp/caidan/01-dibu.jsPage({ /** * 页面的初始数据 */ data: { winWidth: 0, winHeight: 0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = t...原创 2019-03-20 12:43:12 · 851 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-tab选项卡的实现
js代码//获取应用实例 var app = getApp()Page({ /** * 页面的初始数据 */ data: { /** * 页面配置 */ winWidth: 0, winHeight: 0, // tab切换 currentTab: 0, }, /*** 生命周期函数--监听页面加载*/ ...原创 2019-03-20 12:41:14 · 773 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-知识点-1行2列(左图片右多行文字)的布局
wxml代码<!--1行2列:左图片,右文字(多行文字)--> <view class='line'> <image class="toutiao-img" src='/img/cp01.jpg' /> <view class='two-line-text'> <text class='text-center...原创 2019-03-20 12:36:20 · 1310 阅读 · 0 评论 -
微信小程序商城15天从零实战视频课程-知识点-1行3列图片的布局
wxml代码<!--最新产品-1行3列图片-不带文字--><view class="cps"> <view class="cp-item" > <image src='/img/cp01.jpg' class="cp-image"/> </view> <view class="cp-item" >...原创 2019-03-20 12:32:18 · 967 阅读 · 0 评论