微信小程序学习(二)

小程序的js有些额外的成员

  • App 方法 用于定义应用程序实例对象
  • Page 方法 用于定义页面对象
  • getApp 方法 用于获取全局应用程序对象
  • getCurrentPages 方法 用来获取当前页面的调用栈(数组,最后一个就是当前页面)
  • wx 对象 用来提供核心API的

配置小程序

全局配置

在小程序根目录下的app.json 文件用来设置全局配置,完整的配置参数参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

页面配置

在每一个page文件下都有一个.json文件,是页面的配置文件,完整的配置参数参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

sitemap 配置

小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。

场景值

场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表:https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

获取场景值

在 App 的 onLaunch 和 onShow,或wx.getLaunchOptionsSync 中获取上述场景值。

注册小程序

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例,绑定生命周期回调函数、错误监听和页面不存在监听函数等

代码示例如下:
//app.js
App({
  onLaunch (options) {
    // 小程序初始化完成时触发,全局只触发一次
  },
  onShow(options){
    // 小程序启动,或从后台进入前台显示时触发
  },
  onHide(){
    // 小程序从前台进入后台时触发
  },
  onError (msg) {
    // 小程序发生脚本错误或 API 调用报错时触发
    console.log(msg)
  },
  onPageNotFound(){
    // 小程序要打开的页面不存在时触发
  }
})

注册页面

对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等

注册页面的三种方式:

  • 使用page构造器注册页面
  • 在页面中使用behavior
  • 使用Component构造器构造页面
三者适用的场景
描述
page 简单的页面可以使用 Page() 进行构造
behavior 页面可以引用 behaviors,behaviors 可以用来让多个页面有相同的数据字段和方法
Component 复杂的页面使用 Component 构造器来构造页面。 Component 构造器的主要区别是:方法需要放在 methods: { } 里面

page构造器注册页面使用示例:

Page({
  data: {
    number: 1
  },
  onLoad: function (options) {
    // 页面创建时执行
  },
  onShow: function () {
    // 页面出现在前台时执行
  },
  onReady: function () {
    // 页面首次渲染完毕时执行
  },
  onHide: function () {
    // 页面从前台变为后台时执行
  },
  onUnload: function () {
    // 页面销毁时执行
  },
  onPullDownRefresh: function () {
    // 触发下拉刷新时执行
  },
  onReachBottom: function () {
    // 页面触底时执行
  },
  onShareAppMessage: function () {
    // 页面被用户分享时执行
  },
  onPageScroll: function () {
    // 页面滚动时执行
  },
  onResize: function () {
    // 页面尺寸变化时执行
  },
  onTabItemTap(item) {
    // tab 点击时执行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件响应函数
  viewTap: function () {
    this.setData({
      number: this.data.number + 1
    }, function () {
      // this is setData callback
    })
  },
  // 自由数据
  customData: {
    hi: 'MINA'
  }
})

页面路由

在微信小程序中,路由的跳转有五个:

  • wx.switchTab() 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面参数
  • wx.reLaunch() 关闭所有页面,打开到应用内的某个页面
  • wx.redirectTo() 关闭所有页面,打开到应用内的某个页面
  • wx.navigateTo() 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
  • wx.navigateBack() 关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层

组件

组件需要放在components 文件下

Component 创建自定义组件

组件的生命周期

created->lifetimes.attached()->pagelifetimes.show()->ready
(组件创建-》组件实例进入页面节点树时-》页面被显示-》组件布局完成后)

组件间的传值

父组件向子组件传值

通过 属性名="{{属性值}}"
在父组件.json 文件中导入子组件

 "usingComponents": {
  "child":"../components/child/index"
  }

在父组件.wxml文件中以组件名作为标签使用组件

<child childItem="{{item}}"></child>

子组件在js中通过properties接收,可以指定接收数据类型

properties: {
  childItem: {
    type: String,
    value: "测试"
  }
},

子组件向父组件传值

自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名、detail对象和事件选项

子组件用this.triggerEvent('父组件自定义事件', '要传递的参数','事件选项'),触发父组件传过来的自定义事件

this.triggerEvent('childFn',"子组件向父组件传值")

在父组件的子组件标签自定义事件,传给子组件

<child childItem="{{item}}" bind:childFn="getChildFn"></child>
或者
<child childItem="{{item}}" bindchildFn="getChildFn"></child>

执行父组件自定义事件绑定的函数就可以接受子组件传过来的数据

getChildFn:function(event){
// 获取子组件传过来的值
console.log(event.detail)
}

Behavior

behaviors 是用于组件间代码共享的特性,类似于一些编程语言中的 “mixins” 或 “traits”

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,843评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,538评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,187评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,264评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,289评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,231评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,116评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,945评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,367评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,581评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,754评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,458评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,068评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,692评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,842评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,797评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,654评论 2 354