微信小程序开发之OFO共享单车,微信小程序钱包与充值页面制作
本文摘要
replyreload += ',' + 348719;上一节我们完成了登录页面的实现，这一节让我们完成登录后的钱包页面和充值页面 页面分析
上一节我们完成了登录页面的实现，这一节让我们完成登录后的钱包页面和充值页面
页面分析
页面结构
复制代码
页面样式
复制代码
页面数据逻辑
复制代码
我们将金额信息也使用wx.setStorage({})和wx.getStorage({})这两个API来设置和获取本地存储，用于模拟充值，便于做加减
点击登录按钮，跳转到充值页面：
页面分析
页面结构
复制代码
页面样式
复制代码
页面数据逻辑
复制代码
充值页面关闭时更新本地金额数据，所以需要在unLoad事件里执行
到这里，ofo小程序的制作就到了尾声了。我们创建了多个页面，然后一个一个页面从页面分析，到完成数据逻辑，分别响应着不同的业务逻辑，有的页面与页面之间有数据往来，我们就通过跳转页面传参或设置本地存储来将它们建立起联系，环环相扣，构建起了整个小程序的基本功能。
通过这个小程序，我们发现文档提供的API在不知不觉中已经失去了它的神秘感，它们就是不同的工具，为小程序实现业务请求搭建肢体骨架。其实小程序的处理简单的业务逻辑很简单，只要用心去思考，边实现边查文档就能体会到它的精悍之处，本小程序还存在诸多不足，不过对于初学者熟悉小程序的页面跳转，api等或许有些帮助。
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
页面分析
- 需要获取钱包余额数据并显示在页面上，充值后数据会自动更新
- 其他可点击按钮分别显示对应的模态框，因为微信只允许五个页面层级，避免过多页面层级造成用户迷失。
页面结构
-
-
-
-
我的余额（元） -
-
{{overage}} -
-
余额说明 -
-
我的用车券 -
{{ticket}}张 > -
-
我的押金 -
99元，押金退款 > -
-
关于ofo -
>
页面样式
- /* pages/wallet/index.wxss */
- .overage{
- background-color: #fff;
- padding: 40rpx 0;
- text-align: center;
- }
- .overage-header{
- font-size: 24rpx;
- }
- .overage-amount{
- display: inline-block;
- padding: 20rpx 0;
- font-size: 100rpx;
- font-weight: 700;
- }
- .overage-desc{
- padding: 10rpx 30rpx;
- font-size: 24rpx;
- border-radius: 40rpx;
- border: 1px solid #666;
- }
- .my-deposit{
- margin-top: 2rpx;
- }
- .my-invcode{
- margin-top: 40rpx;
- }
- .c-y{
- color: #b9dd08;
- padding-top: -5rpx;
- padding-right: 10rpx;
- }
- .c-g{
- padding-top: -5rpx;
- padding-right: 10rpx;
- }
页面数据逻辑
- // pages/wallet/index.js
- Page({
- data:{
- overage: 0,
- ticket: 0
- },
- // 页面加载
- onLoad:function(options){
- wx.setNavigationBarTitle({
- title: '我的钱包'
- })
- },
- // 页面加载完成，更新本地存储的overage
- onReady:function(){
- wx.getStorage({
- key: 'overage',
- success: (res) => {
- tShopfas.setData({
- overage: res.data.overage
- })
- }
- })
- },
- // 页面显示完成，获取本地存储的overage
- onShow:function(){
- wx.getStorage({
- key: 'overage',
- success: (res) => {
- tShopfas.setData({
- overage: res.data.overage
- })
- }
- })
- },
- // 余额说明
- overageDesc: function(){
- wx.showModal({
- title: "",
- content: "充值余额0.00元+活动赠送余额0.00元",
- showCancel: false,
- confirmText: "我知道了",
- })
- },
- // 跳转到充值页面
- movetoCharge: function(){
- // 关闭当前页面，跳转到指定页面，返回时将不会回到当前页面
- wx.redirectTo({
- url: '../charge/index'
- })
- },
- // 用车券
- showTicket: function(){
- wx.showModal({
- title: "",
- content: "你没有用车券了",
- showCancel: false,
- confirmText: "好吧",
- })
- },
- // 押金退还
- showDeposit: function(){
- wx.showModal({
- title: "",
- content: "押金会立即退回，退款后，您将不能使用ofo共享单车确认要进行此退款吗？",
- cancelText: "继续使用",
- cancelColor: "#b9dd08",
- confirmText: "押金退款",
- confirmColor: "#ccc",
- success: (res) => {
- if(res.confirm){
- wx.showToast({
- title: "退款成功",
- icon: "success",
- duration: 2000
- })
- }
- }
- })
- },
- // 关于ofo
- showInvcode: function(){
- wx.showModal({
- title: "ofo共享单车",
- content: "微信服务号：ofobike,网址：m.ofo.so",
- showCancel: false,
- confirmText: "玩的6"
- })
- }
- })
我们将金额信息也使用wx.setStorage({})和wx.getStorage({})这两个API来设置和获取本地存储，用于模拟充值，便于做加减
点击登录按钮，跳转到充值页面：
页面分析
- 输入金额，存储在data对象里，点击充值后，设置本地金额数据
- 点击充值按钮后自动跳转到钱包页
页面结构
-
-
请输入充值金额 -
页面样式
- /* pages/charge/index.wxss */
- .input-box{
- background-color: #fff;
- margin: 0 auto;
- padding: 20rpx 0;
- border-radius: 10rpx;
- width: 90%;
- }
- .input-box input{
- width: 100%;
- height: 100%;
- text-align: center;
- }
页面数据逻辑
- // pages/charge/index.js
- Page({
- data:{
- inputValue: 0
- },
- // 页面加载
- onLoad:function(options){
- wx.setNavigationBarTitle({
- title: '充值'
- })
- },
- // 存储输入的充值金额
- bindInput: function(res){
- tShopfas.setData({
- inputValue: res.detail.value
- })
- },
- // 充值
- charge: function(){
- // 必须输入大于0的数字
- if(parseInt(tShopfas.data.inputValue)
- wx.showModal({
- title: "警告",
- content: "咱是不是还得给你钱？！！",
- showCancel: false,
- confirmText: "不不不不"
- })
- }else{
- wx.redirectTo({
- url: '../wallet/index',
- success: function(res){
- wx.showToast({
- title: "充值成功",
- icon: "success",
- duration: 2000
- })
- }
- })
- }
- },
- // 页面销毁，更新本地金额，（累加）
- onUnload:function(){
- wx.getStorage({
- key: 'overage',
- success: (res) => {
- wx.setStorage({
- key: 'overage',
- data: {
- overage: parseInt(tShopfas.data.inputValue) + parseInt(res.data.overage)
- }
- })
- },
- // 如果没有本地金额，则设置本地金额
- fail: (res) => {
- wx.setStorage({
- key: 'overage',
- data: {
- overage: parseInt(tShopfas.data.inputValue)
- },
- })
- }
- })
- }
- })
充值页面关闭时更新本地金额数据，所以需要在unLoad事件里执行
扩展：
- 使用easy-mock伪造数据小程序多次请求了服务器“发送/接受”数据，其实这里使用了easy-mock这个网站伪造的数据。
- easy-mock可以作为前端开发的伪后端，自己构造数据来测试前端代码。方便又快捷。
-
比如我们这个小程序用到了后端api接口
- 提交报障信息的反馈
- 单车编号和解锁密码
- 单车经纬度
结语:
到这里，ofo小程序的制作就到了尾声了。我们创建了多个页面，然后一个一个页面从页面分析，到完成数据逻辑，分别响应着不同的业务逻辑，有的页面与页面之间有数据往来，我们就通过跳转页面传参或设置本地存储来将它们建立起联系，环环相扣，构建起了整个小程序的基本功能。
通过这个小程序，我们发现文档提供的API在不知不觉中已经失去了它的神秘感，它们就是不同的工具，为小程序实现业务请求搭建肢体骨架。其实小程序的处理简单的业务逻辑很简单，只要用心去思考，边实现边查文档就能体会到它的精悍之处，本小程序还存在诸多不足，不过对于初学者熟悉小程序的页面跳转，api等或许有些帮助。
其他章节
微信小程序开发之OFO共享单车——扫码
微信小程序开发之OFO共享单车——单车报障页
微信小程序开发之OFO共享单车——个人中心页
微信小程序开发之OFO共享单车——钱包与充值
第二部分：如何开通一个小商店
相关文章
****更多行业产品开发方案，请关注 加速度JSUDO***
<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>
加速度JSUDO是一家企业级数字化解决方案提供商，专注于软件开发、网络营销、数字化转型咨询及云计算服务。核心业务包括定制化ERP/CRM系统、快速应用开发、大数据分析及物联网（IoT）解决方案，助力企业提升效率与智能化水平。服务覆盖制造业、零售、物流等多行业，致力于通过技术创新推动客户数字化转型。
添加客服微信获取更多内容
