微信小程序|小程序开发
微信小程序
微信小程序-小程序开发
嵌入式源码,ubuntu解压源文件,爬虫中selenium作用,php weakref,seo sem教学lzw
lol无限视距易语言源码,vscode新建页面,ubuntu试用模式怎么进入,tomcat 右键复制,sqlite日期类型转换,事半功倍的插件,前端框架能做什么,爬虫中的response,php编码url,嘉兴SEO优化设计,仿土巴兔装修门户网站源码,cms 网页模板,微赞微站模板114,织梦前台页面乱码,客户关系管理系统java,苹果电影程序模板lzw
踢球吧源码,vscode c语言编写,主机scp ubuntu,jdk8 tomcat,php 做爬虫,php 代码加密 解密,seo优化制作关键词,下载网站源码怎么用,asp网页模板可以修改吗lzw
官方开发有了更新v0.10.101100，Picker的mode属性已经支持date以及time（background-image的bug也修复），于是来更新此实例。
目标：实现集成日期组件
如图
步骤，在item.wxml文件中增加一个picker组件，如下：
日期: {{date}}
如图
从图中可以看出：
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由-09-01改为{{date}}即可
吐槽一下，官方的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./debug/wxadoc/dev/api/api-login.html
App({ onLaunch: function() { wx.login({success: function(res) { if (res.code) {//发起网络请求wx.request({ url: /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以及accessToken var 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: /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面板中，检查到数据已成功存入
[-10-25]
由单机版升级为网络版
1.缓存accessToken，以后作为令牌使用，uid不必缓存，由服务端完成映射，user/login接口
先来回顾一下app.js封装的httpService的代码实现：
httpService:function(uri, param, cb) {// 分别对应相应路径，参数，回调wx.request({ url: /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){ //成功回调，本地缓存accessToken var 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){ //成功回调，本地缓存accessToken var 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": "-10-22","uid": "8" }, {"id": "20","title": "超市购物","cate": "-","account": "189.0","date": "-10-21","uid": "8" }, {"id": "12","title": "抢红包","cate": "+","account": "20.5","date": "-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 }); } ); }
布局代码：
{{item.title}} {{item.cate}} {{item.account}}{{item.cate}} {{item.account}}{{item.date}}
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页面
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方法
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值，有则在编辑按钮正文出现删除按钮
