小程序项目1(小程序、vue、react的区别,数据请求)

81 阅读1分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第13天,点击查看活动详情

数据绑定

  1. 小程序
    • 定义数据:data中定义
    • 修改数据:this.setData()
    • 修改数据永远是同步修改
  2. vue
    • 定义数据:data中定义
    • 修改数据:this.key=value
    • vue也是单项数据流。Model--->view
    • v-model实现了双向数据绑定
    • vue中数据劫持是把数据放到了组件实例(this)身上
  3. react
    • 定义数据:state中定义
    • 修改数据:this.setState()或者setCount()
    • 修改数据:在组件的钩子函数中是异步修改,在非钩子函数(定时器、事件)中是同步修改。
    • react是单向数据流。Model--->view

以下是vue底层实现数据响应式原理代码。

2.png

1.png

如何获取用户信息? 只要<button>组件的open-type="getUserInfo",就会触发 bindgetuserinfo回调,用户信息就会在e.detail获取

1.png

2.png

3.png

4.png

网络请求

wx.request({}) 作用:发送https请求。

注意:

  • 协议必须是https协议
  • 一个接口最多匹配20个域名
  • 并发限制上限是10个,也就是一次最多不能超过10个请求
  • 如果没有https协议,就在开发者工具中--->右上角详情--->本地设置--->勾选"不校验合法域名" 1.png

本地存储

同步本地存储:wx.setStorageSync('key','value')

  • 同步读取本地存储:wx.getStorageSync('key')
  • 注意:存和读取的时候,都需要先对应转为JSON字符串或JSON对象
  1. 语法: wx.setStorage() || wx.setStorageSync() || .....
  2. 注意点:
    1. 建议存储的数据为json数据
    2. 单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB
    3. 属于永久存储,同H5的localStorage一样 位移>>>0会强制把数据转为number