微信小程序(应用号)实战课程之记账软件开发
[2016-10-12] 更新
缘起:昨天官方开发有了更新v0.10.101100,Picker的mode属性已经支持date以及time(background-image的bug也修复),于是来更新此实例。
目标:实现集成日期组件
如图
官方文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html
步骤,在item.wxml文件中增加一个picker组件,如下:
<view class="section"><picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"><view class="section__title">日期: {{date}}</view></picker></view>
如图
从图中可以看出:
1.日期后面是空白的,应该默认显示今天日期;
2.点击确定也没有显示到组件上,需要实现bindDateChange方法。
于是我们需要在item.js文件中,声明一个data值date与wxml中的{{date}}绑定关联
然后在onLoad中初始化字符串格式的日期值,详细说明见注释:
// 获取当前日期var date = new Date(); // 格式化日期为"YYYY-mm-dd"var dateStr = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate(); // 存回data,以渲染到页面this.setData({date: dateStr})
经过如上处理,日期组件已经显示为当前日期
如图
处理到此,我们还需要修复一个逻辑错误,即组件的结束日期应该不超过当日,做法也很简单,只需要在wxml文件中对picker的日期属性end由2017-09-01改为{{date}}即可
<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">
吐槽一下,官方的picker的还是有bug的,完全不听start与end使唤,仍可以选任意日期,暂时不去理会,代码就这么写着,什么时候开发工具修复了自然可以了,毕竟是现在还只是内测,就将就用着。
接下来处理日期组件点击确认事件bindDateChange
回到item.js文件
声明一个bindDateChange方法,添加如下代码以写回data中的date值
// 点击日期组件确定事件bindDateChange: function(e) {this.setData({date: e.detail.value})}
至此,已经实现集成日期picker组件。剩下的就是将它同之前的标题、类型、金额字段那样存在json再本地setStorage存储即可,这里不作赘述,具体可以参考本人公众号之前发的文章《微信小程序(应用号)实战课程之记账应用开发》。
步骤
1.小程序端通过微信第三方登录,取出nickname向服务端请求登录,成功后本地并缓存uid,accessToken
接口出处:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html
App({onLaunch: function() {wx.login({success: function(res) {if (res.code) {//发起网络请求wx.request({url: 'https://test.com/onLogin',data: {code: res.code}})} else {console.log('获取用户登录态失败!' + res.errMsg)}}});} })
缓存用户的基本信息
index.js
onLoad: function(){var that = this//调用应用实例的方法获取全局数据app.getUserInfo(function(userInfo){//请求登录console.log(userInfo.nickName);app.httpService('user/login',{openid: userInfo.nickName}, function(response){//成功回调console.log(response); // 本地缓存uid以及accessTokenvar userinfo = wx.getStorageSync('userinfo') || {};userinfo['uid'] = response.data.uid;userinfo['accessToken'] = response.data.accessToken;console.log(userinfo);wx.setStorageSync('userinfo', userinfo);});})}
app.js
定义一个通用的网络访问函数:
httpService:function(uri, param, cb) { // 分别对应相应路径,参数,回调wx.request({url: 'http://financeapi.applinzi.com/index.php/' + uri,data: param,header: {'Content-Type': 'application/json'},success: function(res) {cb(res.data)},fail: function() {console.log('接口错误');}}) },
这里method默认为get,如果设置为其他,比如post,那么服务端怎么也取不到值,于是改动了服务端的取值方式,由$POST改为$GET。
在Storage面板中,检查到数据已成功存入
[2016-10-25]
由单机版升级为网络版
1.缓存accessToken,以后作为令牌使用,uid不必缓存,由服务端完成映射,user/login接口
先来回顾一下app.js封装的httpService的代码实现:
httpService:function(uri, param, cb) { // 分别对应相应路径,参数,回调wx.request({url: 'http://financeapi.applinzi.com/index.php/' + uri,data: param,header: {'Content-Type': 'application/json'},success: function(res) {cb(res.data)},fail: function() {console.log('接口错误');}}) }
调用的是wx.request接口,返回res.data即为我们服务器返回的数据,结构与wx.request返回的类似,这里多一层结构,不可混淆。
response.code,response.msg,response.data是我自己服务端定义的结构
res.statusCode,res.errMsg,res.data是微信给我们定义的结构
而我们的response又是包在res.data中的,所以正常不加封装的情况下,要取得我们自己服务端返回的目标数据应该是写成,res.data.data.accessToken;好在已经作了封装,不会那么迷惑人了,今后调用者只认response.data就可以拿到自己想要的数据了。
明白了上述关系与作了封装后,我们调用起来就方便了,index.js中onShow写上如下代码
app.httpService('user/login',{openid: userInfo.nickName}, function(response){//成功回调,本地缓存accessTokenvar accessToken = response.data.accessToken;wx.setStorageSync('accessToken', accessToken);});
app.js onLaunch调用如下代码,在程序启动就登录与缓存accessToken。
之所以不在index.js中调用登录,是因为app launch生命周期较前者更前,accessToken保证要加载item/all之前生成并缓存到本地
onLaunch: function () {//调用应用实例的方法获取全局数据var that = this//调用登录接口wx.login({success: function () {wx.getUserInfo({success: function (res) {//请求登录that.httpService('user/login',{openid: res.userInfo.nickName}, function(response){//成功回调,本地缓存accessTokenvar accessToken = wx.getStorageSync('logs') || '';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,渲染wxmlapp.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');}...
提交到网络
// 本条数据打包成jsonvar 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;// 本条数据打包成jsonvar 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>
微信小程序(应用号)实战课程之记账软件开发相关推荐
- 视频教程-微信小程序快速入门视频课程-微信开发
微信小程序快速入门视频课程 北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥168.00 立即订阅 扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 AP ...
- 【微信小程序】微信小程序入门与实战-个人笔记
微信小程序入门与实战 文章目录 微信小程序入门与实战 1 初识微信小程序 1-1 2020版重录说明 1-2 下载小程序开发工具 1-3 新建小程序项目 1-4 小程序appid的注册 1-5 新版小 ...
- 《微信小程序商城界面设计实战》--学习笔记作业
一.学习笔记 1.注释:wxml文档注释: css文档注释:/** **/ js文档注释:单行注释以"//"开头:多行注释以"/"开头,以"/&quo ...
- 开源全平台版知识付费系统源码 支持微信小程序+公众号+H5+PC端
分享一个开源全平台版知识付费系统源码,系统支持微信小程序+公众号+H5+PC端,一套系统实现全端数据及用户体系全面打通,轻松实现店铺全网一站式运营.含完整代码包和详细搭建教程. 系统支持视频课程.音频 ...
- 微信小程序电商实战—环境搭建篇
本篇文章已同步发布于个人博客 https://qiucode.cn/article/90 可体验 秋码淘好货 微信小程序哦! 1.开发工具下载 可到微信公众号-小程序 下载 https://mp.we ...
- 视频教程-微信小程序电商实战-PHP
微信小程序电商实战 多年一线互联网开发实战以及培训经验,对php开发,linux运维架构有丰富的经验,善于分析问题,解决问题. lampol ¥117.00 立即订阅 扫码下载「CSDN程序员学院AP ...
- 微信小程序“反编译”实战(一):解包
本实践教程将一步步告诉你如何"反编译"获得其它小程序的源代码,包括"解包"和"源码还原"两篇,主要参考了看雪论坛.V2EX.GitHub 等 ...
- 微信小程序入门与实战(七月)
微信小程序入门与实战(七月) 第1章 初识微信小程序 第2章 小程序的基本目录结构与文件作用剖析 2-1 小程序页面的4种基本文件类型详解 第3章 rpx响应式单位与flex布局 3-3 新建页面的技 ...
- 视频教程-uniapp开发仿阿里飞猪旅游微信小程序,vue中高级课程-Vue
uniapp开发仿阿里飞猪旅游微信小程序,vue中高级课程 五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里影业 ...
最新文章
- 关于无法创建aps.web项目的解决办法
- Android小知识-Fragment
- C++day15 学习笔记
- 一句话,讲清楚java泛型的本质(非类型擦除)
- 山东工业职业学院计算机老师田彦,学院举办2019年第二期新教师岗前培训班
- JZOJ 5401. 【NOIP2017提高A组模拟10.8】Star Way To Heaven
- 【NLP】万字梳理!BERT之后,NLP预训练模型发展史
- 【论文解读】从BERT和XLNet到MPNet
- Gartner:缺乏技术人才将影响企业数字化转型
- ROS ( C++) 订阅一个机器人的位置并发布给另外一个机器人作为目标goal
- Struts2之文件下载
- 简单的路由封装ppp
- 机器人操作系统、自动驾驶等研发工具整理
- j2ee是什么?(1)
- 计算机窗口显示不出来的,任务栏不显示打开的窗口,详细教您打开的窗口在任务栏上显示不出来...
- 《2020年国际会计事务所排名》
- 图像彩色化方法(基于颜色传递、颜色扩展)
- 在使用tr的时候经常遇到的错误1
- 智能驾驶是什么意思_智能驾驶L1L2L3L4到底是什么意思,再不知道就OUT啦
- [Unity3D]手机3D游戏开发:FPS射击游戏中瞄准镜CrossHair的制作
热门文章
- 音频电平vu显示表软件下载_正点原子开拓者 Nios II资料连载第十章MCU TFT-LCD图片显示实验...
- 车内看车头正不正技巧_科二曲线行驶技巧图解,蜀黍手把手教你过关!
- 优秀案例 | 长江鲲鹏中地数码:打造智慧城市“数字底座”
- 将音频转化为MP3格式(lame库)
- ffmpeg 视频去水印
- 【Houdini】导出FBX或OBJ模型的三种方法
- Android获取两条线之间的夹角度数
- python calu_Python学习笔记4:函数
- 中国建设银行宣布:国内第一家无人银行,在上海正式开业!
- 手机显示系统检测您正在通过代理服务器,当手机无线网出现“检测到您正在使用多个终端共享上网,网络访问被冻结15...