11 2020 档案
摘要：微信小程序和服务器端的数据交互都是通过wx.request()这个API函数来完成的，这是一个异步函数，其原型如下： 1 wx.request({ 2 url: 'https://www.tm.com/api/orders', 3 data: { 4 pageIndex: 1, 5 pageSize
阅读全文
摘要：用户在“我的”页面查看不同状态的订单会跳转到订单列表页面，不同的订单状态会传递不同的参数， 订单列表页根据接收的参数到服务端抓取不同的数据显示给用户，先看页面呈现： orderList.wxml代码如下： 1 <view class="container"> 2 3 <view class="ord
阅读全文
摘要：设置功能用来保存用户的基本信息，比如电话地址等，便于用户购买商品时将这些信息保存到数据库的订单表中， 从而为发货环节提供收货信息，先看页面效果图： setting.wxml代码如下： 1 <!--pages/member/setting.wxml--> 2 <view class="containe
阅读全文
摘要：“我的”页面只实现最简单的功能，用户登录，基本信息的设置，及查看订单信息 ，页面如下 ： 先看member.wxml页面的代码： 1 <view class="container"> 2 3 <view class="imageInfo1 pad1"> 4 <image class="image1"
阅读全文
摘要：用户下订单后在数据库中生成一笔订单数据，同时跳转到订单支付页面， 用户点击支付时小程序需要去调用支付接口，完成支付后一笔订单的线上流程就结束了。 这里还需要考虑在支付的时候用户放弃支付或是支付失败后需要有相应的处理机制， 另外，用户支付成功后如果取消订单放弃购买商品还需要解决退款的问题， 针对这一点
阅读全文
摘要：总体设计 ：用户点到购物车页面后显示添加到购物车的商品清单， 用户可以删除某个商品，更改购买的商品数量，并勾选商品进行支付。 页面如下 ： 页面代码如下 ： 1 <view class="container"> 2 3 4 <checkbox-group class="cbgroup1" bindc
阅读全文
摘要：在商品详情页我们要加一个返回按钮， 一个分享按钮，首先在productDetail.wxml中添加如下代码 ： 1 <view class="container"> 2 <image class="image1" src="{{product.imageUrl}}"></image> 3 <text
阅读全文
摘要：商品列表页点击商品图片时可以查看商品详情，我们先在pages/index这个文件夹下增加一个page， 名称叫productDetail, 建好后index文件夹下的文件结构是这样的： 然后我们修改index.wxml这个文件， 在<image>这个控件上加上tap事件，代码如下 ： 1 <view
阅读全文
摘要：加入购物车功能的基本实现是这样的： 用户点击“加入购物车” ， 小程序将该商品信息发送到服务器记录下来， 同时页面上“加入购物车”的按钮变成一个输入框，用户可以增加/减少商品数量， 当用户点“购物车” Tabbar时，切换到shoppingcart/shoppingcart.wxml页面， 此页面显
阅读全文
摘要：实现查询功能先在index.wxml中加入<input>标签并给<input>绑定一个事件， 然后针对事件编码就可以了。我们先在index.wxml文件中加入<input>标签 （见红色字体的代码）： 1 <view class="container"> 2 3 <view> 4 <input cl
阅读全文
摘要：在手机上浏览商品信息的时候，刷新及分页的需求是由下拉和上拉来实现的， 如下图： 接下来就分别实现下拉刷新和上拉加载更多这两个功能，先看下拉刷新。 首先在index.json这个文件中添加配置项，代码如下 ： 1 { 2 "usingComponents": {}, 3 "enablePullDown
阅读全文
摘要：前面讲了每个微信小程序页面都包含4个文件， 以首页为例 ，分别是 index.js, index.json, index.wxml, index.wxss ， 先看编码后的页面展示效果如下 ： 按照页面编写顺序， 先从index.wxml页面布局文件开始 ，删除里面的全部内容， 加入下面的代码： <
阅读全文
