小程序(二)

小程序的宿主环境

小程序的宿主环境就是微信客户端

小程序的部分API

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function(options) {}, // 小程序启动之后触发 
  onShow: function(options) {},  // 当小程序启动，或从后台进入前台显示，会触发 onShow
  onHide: function() {}, // 当小程序从前台进入后台，会触发 onHide
  onError: function(msg) {},
  globalData: 'I am global data'
})

整个小程序只有一个 App 实例，是全部页面共享的，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

// other.js
var appInstance = getApp()

页面里面的log.js

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

小程序里面的自带组件地图

<map longitude="广州经度" latitude="广州纬度"></map>

组件的内部行为也会通过事件的形式让开发者可以感知，例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理：

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

获取用户地理位置：

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})

调用微信扫一扫:

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

在微信客户端中打开小程序有很多途径：从群聊会话里打开，从小程序列表中打开，通过微信扫一扫二维码打开，从另外一个小程序打开当前小程序等，针对不同途径的打开方式，小程序有时需要做不同的业务处理，所以微信客户端会把打开方式带给onLaunch和onShow的调用参数options

页面构造器Page()

Page({
  data: { text: "This is page data." }, // 页面的初始数据
  onLoad: function(options) { }, // 生命周期函数--监听页面加载，触发时机早于onShow和onReady
  onReady: function() { }, // 生命周期函数--监听页面初次渲染完成
  onShow: function() { }, // 生命周期函数--监听页面显示，触发事件早于onReady
  onHide: function() { }, // 生命周期函数--监听页面隐藏
  onUnload: function() { }, // 生命周期函数--监听页面卸载
  onPullDownRefresh: function() { }, // 页面相关事件处理函数--监听用户下拉动作
  onReachBottom: function() { }, // 页面上拉触底事件的处理函数
  onShareAppMessage: function () { }, // 用户点击右上角转发
  onPageScroll: function() { }  // 页面滚动触发事件的处理函数
})

页面跳转的几种方式

//保留当前页面，跳转到应用内的某个页面
wx.navigateTo({
  url: 'log?cid=1'
})

//关闭当前页面，跳转到应用内的某个页面
wx.redirectTo({
   url: 'log?cid=1'
})

//关闭所有页面，打开到应用内的某个页面。
wx.reLaunch({
  url: 'log?cid=1'
})

//跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.switchTab({
  url: '/log'
})

跳转页面传递数组参数必须序列化

 let arr=[7, 8, 9]
 category = JSON.stringify(arr)        //取子集分类 数组传递需要序列化 wx.navigateTo({
     url: `/log?id= ${arr} `,
 })

接收页面也要序列化参数

onLoad: function (options) {
    let arr= JSON.parse(options.id);
    console.log(arr)
}

参数值过长接收时候内容不全得问题

//传参(wx.redirectTo、wx.reLaunch)
wx.navigateTo({
    url: '/log?id=' + encodeURIComponent(id)
})

// 取值
var id = decodeURIComponent(options.id);