随笔分类 - 微信小程序系列
摘要：微信小程序和服务器端的数据交互都是通过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页面布局文件开始 ，删除里面的全部内容， 加入下面的代码： <
阅读全文
摘要：上一篇文章讲了用户登录小程序后是如何通过wx.login()函数拿到code之后作为参数传递到Web服务器， Web服务器又以code为参数调用微信接口拿到openid和session_key，并将openid和session_key保存到数据库， 最后Web服务器将用户信息Response到小程序
阅读全文
摘要：一个商城系统必定涉及到用户身份识别的问题，用户进入小程序后用什么来标记他的身份？ 对于一个web应用来说， 典型的设计是这样的 ： 用户打开注册页面-->填写“账号、密码等基本信息”-->点击“注册” , 然后， 系统将这些信息存储到数据库中，同时在web服务器上生成一个session ， resp
阅读全文
摘要：通过前面一些基本的设置，我们不需要编写一行代码，就可以在开发工具的模拟器中看到如下的页面： 接下来，我们要编写代码完成首页中商品列表的展示 ，如下图 ： 在开始正式的编码前，我们要先简单了解小程序开发前的基础知识，这是开发的前提 。 1 . 每个小程序页面对应4个文件 ， 以首页为例 ， 分别是 i
阅读全文
摘要：根据前面的设计， 小程序底部有三个tabbar项， 分别是“首页” ， “购物车” ， “我的”，为了美观， 我们还要给每一项配二张图片， 分别对应该项选中/未选中时的状态，所以三项要准备6张图片， 图片的大小微信官方推荐为 81px * 81px , 准备好后在小程序的“miniprogram”目
阅读全文
摘要：微信小程序开发工具可以到腾讯网站上下载 ，官方网址如下 ： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 此页面还可以看到指南 、组件 、API等 , 如下图 ： 安装完成后就可以新建小程序项目了，如下
阅读全文
摘要：一、 Tabbar页面概览：有三个tabbar菜单，分别是 “首页” ， “购物车” ， “我的”，如下图 ： 二 、 Tabbar功能及相关页面 各tabbar菜单页面及功能如下表 ： 1. “首页” 包含如下功能 ： 2. “购物车” 包含如下功能 ： 3. “我的” 包含如下功能 ： 1.1
阅读全文
摘要：准备在博客园写一个微信小程序的实战项目demo，项目名称就叫 "万利商城"吧， 本demo分两部分： 第一部分介绍微信小程序的开发， 从设计-->开发-->测试-->上线到运营。 第二部分介绍Web API的开发， 采用微软的.net core3.1版本开发Web API ， 并部署到Web服务器上
阅读全文
