跟着官方文档来学小程序_day02

wgs
160 阅读4分钟

记录我学习小程序的过程，如果你也在跟着官方文档学习，无法理解某部分或许在我这里也可以看到答案。 今天开始第三章，本章回到一些坑，官方文档没有描述。现已解决。

第三章

渲染层和逻辑层

如何修改页面数据？setData()

setData方法是将数据修改后逻辑层传递到渲染层

小程序数据驱动基本原理：

  • 渲染层 -> 转换为js对象（其中{{}}自然成为对应节点获取对应js数据） -> 真正Dom树
  • setData()改变数据 -> 产生新js对象（对应节点改变）-> 对比前后js对象 -> 获取差异 -> 应用到原来的Dom树

程序与页面

程序

  • App()构造器，必须写在app.js根文件中，用来注册程序App
  • 在其他js文件中使用getApp方法获取App实例
  • 接收一个对象参数 参数：
  • onLaunch 当小程序初始化完成，触发（全局只触发一次）
  • onShow 当小程序启动，后台进入，触发
  • onHide 当小程序从前台进入后台，触发
  • onError 当小程序发生脚本错误，API调用失败，触发并带上错误
  • 以上为函数类型
  • 其他 任意类型 在App实例回调用this访问 ???（没读懂）

生命周期和打开场景

生命周期：

  • -> 进入小程序
  • -> 微信客户端初始化宿主环境（同时下载代码包，或本地缓存获取代码包）
  • -> 下载完成，注入宿主环境
  • -> onlaunch事件（App（）中的onlaunch方法被调用）
  • -> 点击关闭或home 小程序没有销毁，后台状态（onHide方法会被调用）
  • -> 再次回到微信或小程序，微信把后台小程序唤醒（即进入前台状态）(onShow方法被调用) 场景： 打开小程序有多种方式，群聊，小程序列表，扫码，一个小程序打另一个等。 不同方式，需要做不同业务处理，wx把打开方式带给onlaunch,onShow的调用参数options 最新场景值： mp.weixin.qq.com/debug/wxado…

onLaunch,onShow参数(options)：

  • path string 打开小程序的页面路径
  • query obj 打开小程序的页面参数query
  • scene num 打开小程序的场景值
  • ??? shareTicket string 见文档
  • referrerInfo obj 当场景为另一个小程序或公众号或App打开时，返回此字段
  • referrerInfo.appId string 小程序或公众号或App的appId
  • referrerInfo.extraData obj 小程序传过来的数据，scene=1037 or 1038时支持（暂忽）

全局数据：

  • 多个页面多个webview线程，而js始终只有jscore线程
  • 注意：页面到另一个页面，定时器不会自动销毁，需手动

页面：

  • app.json声明页面路径，首项默认首页
  • page()构造器，注册页面，xx.js中调用，接收obj参数：
  • data数据绑定数据
  • 5个生命周期函数，4个页面用户行为回调，见下文
  • onLoad可获取当前页所调用的打开参数options
  • onLoad加载，onShow显示，onReady页面加载完
  • onHide页面不可见，切换会触发(会比app.js的onHide早触发)
  • 使用redirectTo,navigateBack,页面会被销毁，销毁时onUnload调用
  • 页面的打开参数query上述的的options，例如打开某个商品，将其id传给其详情页

页面数据：

  • page实例原型有setData函数，setData传递数据为异步过程（因为渲染层和逻辑层两个线程导致）
  • setData参数1为data，参数2为回调在这次setData渲染完毕触发

页面用户行为：

  • 下拉刷新 onPullDownRefresh -> app.json window选项中 或 page.json中设置enaenablePullDownRefresh为 true
  • wx.stopPullDownRefresh可以停止当前页面的下拉刷新
  • 上拉触底 onReachBottom 同上 字段名为onReachBottomDistance
  • 页面滚动 onPageScroll，参数为obj
  • 用户转发 onShareAppMessage 显示转发按钮，需返回一个obj（包含title和path字段）

页面跳转和路由

  • 页面栈最高10层
  • wx.navigateTo({ url: 'pageD' }) 往页面栈加一层
  • wx.navigateBack() 减一层
  • wx.redirectTo({ url: 'pageE' }) 替换当前层
  • 到达10层没法再新增,使用redirectTo ！！！坑： 如果你跟着文档来，在敲tabBar时肯定会遇到显示不了的结果，你跟着文档写是没错的，有一点就是，你不能把index设为首页，也就是你在app.json中的页面路径，第一行默认为首页，你把它往后调就行了。

image.png

组件，API,事件

image.png

兼容

  • 针对不同手机进行程序上的兼容
  • 使用 wx.getSystemInfo 或者 wx.getSystemInfoSync 来获取手机品牌、操作系统版本号、微信版本号以及小程序基础库版本号等
  • 随着宿主环境的更新，新版本的宿主环境会提供一些新的API，你可以通过判断此API是否存在来做程序上的兼容。
  • ？？？wx.canIUse这个API，用于判断接口或者组件在当前宿主环境是否可用，其参数格式为: API.{API}.{method}.param.{param}.{options}或者component.{component}.{attribute}.${option}
  • 作用：查询该接口是否在当前环境能否使用
avatar
文章
阅读
粉丝