小程序开发中的数据流向分析.pdfVIP

⼩程序开发中的数据流向分析 我们知道⽆论什么样的软件或⽹站，其根本的⽬的就是处理数据，在没有框架的基础上，我们需要⾃⼰把控数据的流向，所以我们对此⾮常 的清晰。但是在没有框架的基础上开发我们的软件是⾮常耗时的，因此明确框架的数据流向就变的异常重要。本⽚博客将介绍⼩程序中登录 功能的数据流向。掌握了基本的数据流向 其他的功能肯定不在话下 拿⼩程序官⽅提供的登录功能作为实例分析。 1. 刚开始的界⾯ 需要点击 获取头像昵称 信息 2. 点击之后会触发⼩程序⼩程序⾃定义的属性 bindgetuserinfo属性值（getUserInfo 这⾥的是函数名字下⾯的open-type对应的是数 据类型）所对应的函数进⽽向本地获取⽤户的头像昵称等⾮隐私信息，且必须写open-type其属性值是getUserInfo 3. index.wxml 从其中我们可以看出我们需要以下的数据 4. index.js中的getUserInfo函数 getUserInfo: function(e) { console.log(e) console.log(sofency) app.globalData.userInfo = e .detail.userInfo this.setData({ userInfo : e .detail.userInfo, hasUserInfo: true }) } 解释： e:该参数是携带返回值的对象，很神奇的 该功能掩盖了如何获取的过程 我们只需要调⽤就可以。 e.detail.UserInfo e 输出的数据如下，⽽我们需要的数据在detail下的UserInfo中 app.globalData.userinfo 将⾸次登陆的数据存放在全局数据中该数据存储app.js中 这⾥说⼀下为什么要设置全局数据，在没有全局数据时，进⾏页⾯的跳转时，再返回到当前页⾯时，index.wxml就要重新从⽹络中加载 index.js中data⾥⾯的数据，这是肯定不⾏，⾮常的耗时间。那么就有了全局数据的概念，我们第⼀次获取数据后存储到全局数据中，那么 我们下次再获取数据的时候先看看全局数据⾥⾯有⽊有，没有的话再从⽹络中进⾏加载。 就好⽐之前买⼀个东西要跑100公⾥去买，现在有⼀个⼈在你家门⼝开了⼀个超市，你买东西就很⽅便了 this.setData({ userInfo: e.detail.userInfo, 将数据给本页⾯⾥⾯的userinfo属性值 hasUserInfo: true 设置为有数据 }) index.js中的数据 将上⾯将数据传送过来 那么此时的hasUserInfo就有了数据 页⾯数据的加载函数onload: ⽽不是针对点击获取头像的响应函数 最后的那个原因写错了 只针对 之前的版本可能没有open-type属性 即根据按钮判断是否允许获取数据 5. 你可能会对onload下⾯的这个函数有疑问都是获取信息感觉重复 实际上并没有，关于 我测试了他们执⾏的顺序 先执⾏页⾯的onload函数 再执⾏login 最后执⾏getSetting 那么getSetting是⼲什么的，getSetting是申请授权的，即我们想要获取⽤户的信息我们就要将获取⽤户信息的设置打开（在⼩程序 官⽅⽂档中介绍说获取⽤户的头像信息或⾃动授权 不再弹出授权信息，除⾮需要打开其他需要的设置时才会弹出授权界⾯）