导航

navigate 对应 wx.navigateTo
或 wx.navigateToMiniProgram
的功能
redirect 对应 wx.redirectTo
的功能
switchTab 对应 wx.switchTab
的功能
reLaunch 对应 wx.reLaunch
的功能
navigateBack 对应 wx.navigateBack
的功能
exit 退出小程序，target="miniProgram"
时生效

web-view

webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

预览文件

  1. wx.downloadFile({
  2.     url: 'www.file.com/file.ppt',//可以是后台传过来的路径
  3.     success: function(res) {
  4.         const filePath = res.tempFilePath
  5.         wx.openDocument({
  6.             filePath: filePath,
  7.             success: function(res) {
  8.                 //成功
  9.             }
  10.         })
  11.     }
  12. })

小程序的运行环境

微信小程序运行在多种平台上：iOS（iPhone/iPad）微信客户端、Android 微信客户端、PC 微信客户端、Mac 微信客户端和用于调试的微信开发者工具。
各平台脚本执行环境以及用于渲染非原生组件的环境是各不相同的：

  • 在 iOS 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS 12、iOS 13 等；
  • 在 Android 上，小程序逻辑层的 javascript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的；
  • 在 开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium Webview 来渲染的。
  • 在 PC 上，小程序逻辑层 javascript 和视图层 javascript 都是用 Chrome 内核

  • 在 Mac 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，与 iOS 一致

    平台差异

    尽管各运行环境是十分相似的，但是还是有些许区别：

  • JavaScript 语法和 API 支持不一致：语法上开发者可以通过开启 ES6 转 ES5 的功能来规避（详情）；此外，小程序基础库内置了必要的Polyfill，来弥补API的差异（详情)。

  • WXSS 渲染表现不一致：尽管可以通过开启样式补全来规避大部分的问题，还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

使用 Page 构造器注册页面

  1. //index.js
  2. Page({
  3.   data: {
  4.     text: "This is page data."
  5.   },
  6.   onLoad: function(options) {
  7.     // 页面创建时执行
  8.   },
  9.   onShow: function() {
  10.     // 页面出现在前台时执行
  11.   },
  12.   onReady: function() {
  13.     // 页面首次渲染完毕时执行
  14.   },
  15.   onHide: function() {
  16.     // 页面从前台变为后台时执行
  17.   },
  18.   onUnload: function() {
  19.     // 页面销毁时执行
  20.   },
  21.   onPullDownRefresh: function() {
  22.     // 触发下拉刷新时执行
  23.   },
  24.   onReachBottom: function() {
  25.     // 页面触底时执行
  26.   },
  27.   onShareAppMessage: function () {
  28.     // 页面被用户分享时执行
  29.   },
  30.   onPageScroll: function() {
  31.     // 页面滚动时执行
  32.   },
  33.   onResize: function() {
  34.     // 页面尺寸变化时执行
  35.   },
  36.   onTabItemTap(item) {
  37.     // tab 点击时执行
  38.     console.log(item.index)
  39.     console.log(item.pagePath)
  40.     console.log(item.text)
  41.   },
  42.   // 事件响应函数
  43.   viewTap: function() {
  44.     this.setData({
  45.       text: 'Set some data for updating view.'
  46.     }, function() {
  47.       // this is setData callback
  48.     })
  49.   },
  50.   // 自由数据
  51.   customData: {
  52.     hi: 'MINA'
  53.   }
  54. })

判断是否是刘海屏

  1.     // 判断ipx
  2.     isIPXType () {
  3.       let isIPX = false
  4.       let model = ['X', 'XR', 'XS', 11, 12, 13, 14]
  6.       let statusBarHeight = 0
  7.       let screenHeight = 0
  8.       let ratio = 0
  10.       uni.getSystemInfo({
  11.         success (res) {
  12.           model.forEach((e) => {
  13.             if (res.model.indexOf('iPhone') != -1 && res.model.indexOf(e) != -1) {
  14.               isIPX = true
  15.             }
  16.           })
  17.           statusBarHeight = res.statusBarHeight
  18.           screenHeight = res.screenHeight
  19.           ratio = 750 / res.windowWidth
  20.         }
  21.       })
  22.       let custom = uni.getMenuButtonBoundingClientRect()
  23.       let customBar = custom.bottom + custom.top - statusBarHeight
  25.       this.globalData.isIPX = isIPX  // 是否还是刘海屏
  26.       this.globalData.ratio = ratio // 比例
  27.       this.globalData.customBar = customBar //header高度
  28.       this.globalData.statusBar = statusBarHeight // 状态栏的高度
  29.       this.globalData.screenHeight = screenHeight // 屏幕高度
  30.       this.globalData.safeBar = statusBarHeight / ratio //底部安全区域高度
  31.     }