争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

微信小程序(应用号)开发实战记账软件案例

时间:2024/3/13作者:未知来源:争怎路由网人气:

''; accessToken = response.data.accessToken; wx.setStorageSync('accessToken', accessToken); } ); } }) } }) },

2.请求网络,对接获取的账目列表,item/all接口

使用onShow而不使用onLoad,是因为每次添加返回后首页需要自刷新

response是服务器返回的数据

而response.data中包含了自己的账目列表信息

{
  "code": 200,
  "msg": "加载成功",
  "data": [
    {
      "id": "21",
      "title": "工资",
      "cate": "+",
      "account": "6500.0",
      "date": "2016-10-22",
      "uid": "8"
    },
    {
      "id": "20",
      "title": "超市购物",
      "cate": "-",
      "account": "189.0",
      "date": "2016-10-21",
      "uid": "8"
    },
    {
      "id": "12",
      "title": "抢红包",
      "cate": "+",
      "account": "20.5",
      "date": "2016-10-30",
      "uid": "8"
    }
  ]
}

读取代码:

  onShow: function () {
    var that = this
    // 获取首页列表,本地storage中取出accessToken作为参数,不必带上uid;
    // 成功回调后,设置为data,渲染wxml
    app.httpService(
                    'item/all', 
                    {'accessToken': wx.getStorageSync('accessToken')}, 
                    function(response){
                        that.setData({
                          'items':response.data
                        });
                    }
    );
  }

布局代码:

<block wx:for="{{items}}">
    <view class="news-item" data-title="{{item.title}}">
      <view class="news-text">
        <text class="news-title">{{item.title}}</text>
        <view class="news-stamp">
          <text wx:if="{{item.cate == '-'}}" class="sign-green">{{item.cate}} {{item.account}}</text>
          <text wx:else class="sign-red">{{item.cate}} {{item.account}}</text>
          <text>{{item.date}}</text>
        </view>
      </view>
    </view>
  </block>

2.请求网络,对接账目,item/add接口

拿到表单组件上的各值,title,record,cate,date,而accessToken我们就在httpService方法统一注入。

  httpService:function(uri, param, cb) {
    // 如果令牌已经存在,那么提交令牌到服务端
    if (wx.getStorageSync('accessToken')) {
      param.accessToken = wx.getStorageSync('accessToken');
    }
    ...

提交到网络

    // 本条数据打包成json
    var record = {
      title: this.data.title,
      cate: this.data.cate,
      account: this.data.account,
      date: this.data.date
    }
    // accessToken放在record传入也可以,但为了更多的复用,我将它放在httpService时统一注入
    // 访问网络
    var app = getApp();
    app.httpService(
      'item/add',
      record,
      function(response) {
        // 提示框
        that.setData({
          modalHidden: false
        });
      }
    );

3.首页传id值,编辑页面访问网络并显示数据

1.从首页列表传item对象的id号到item页面

<view class="news-item" data-id="{{item.id}}" bindtap="itemTap">

2.绑定data-id到点击单元格事件itemTap

var id = parseInt(e.currentTarget.dataset.id);

3.使用navigate传值

    wx.navigateTo({
      url: '../item/item?id='+id
    })

4.item页面接收id值,并作判断有无id号

  onLoad: function (options) {
    this.setData({
      id:options.id,
    })
  }

5.读取网络返回的数据与渲染到页面

    var that = this;
    if (options.id) {
      // 访问网络
      var app = getApp();
      app.httpService(
          'item/view',
          {id: options.id},
          function(response){
            that.setData({
              id: response.data.id,
              title: response.data.title,
              cate: response.data.cate,
              account: response.data.account,
              date: response.data.date
            });
          }
        );
    }

6.并将button按钮绑定为update方法

    <button wx:if="{{id}}" class="button" type="primary" bindtap="update">编辑</button>
    <button wx:else class="button" type="primary" bindtap="save">添加</button>

7.修改账目提交到网络,item/update

客户端update方法

update: function(){
    var that = this;
    // 本条数据打包成json
    var record = {
      title: this.data.title,
      cate: this.data.cate,
      account: this.data.account,
      date: this.data.date,
      id: this.data.id
    }
    // accessToken放在record传入也可以,但为了更多的复用,我将它放在httpService时统一注入
    // 访问网络
    var app = getApp();
    app.httpService(
      'item/update',
      record,
      function(response) {
        // 提示框
        that.setData({
          modalHidden: false
        });
      }
    );
  },

8.删除账目,item/del接口

方法实现

  delete: function () {
      var that = this;
      // 访问网络,删除账目
      var app = getApp();
      app.httpService(
          'item/del',
          {id: that.data.id},
          function(response){
            // 提示框
            that.setData({
              modalTitle: '删除成功',
              modalHidden: false
            });
          }
        );
  },

布局页面

先判断是否有id值,有则在编辑按钮正文出现删除按钮

    <button wx:if="{{id}}" class="button" type="default" bindtap="delete">删除</button>

以上就是微信小程序(应用号)开发实战记账软件实例的详细内容,更多请关注php中文网其它相关文章!


小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。



关键词:微信小程序(应用号)开发实战记账软件案例




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版