微信小程序初接触（持续更新）

下载了微信开发工具，开始学习微信小程序开发了，初次接触，添加点基础知识。

1.小程序内页面跳转

使用背景：在主页添加链接，跳转至新闻页

1.直接标签内跳转	（index.wxml）
跳转新闻页
2.js跳转
(index.wxml):
跳转到新闻
(index.js)
aaa(){
	 wx.navigateTo({//wx自带跳转
      url: '../news/news',
    })
}

2.微信小程序的tabBar

tabBar
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

"tabBar":{
    "color":"#777",
    "selectedColor" : "#1AAD16",
    "backgroundColor":"red",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"首页",
        "iconPath":"images/tabBar1.png",
        "selectedIconPath":"images/tabBar1Sele.png"
      },
      {
        "pagePath": "pages/course/course",
        "text": "课堂",
        "iconPath": "images/tabBar2.png",
        "selectedIconPath": "images/tabBar2Sele.png"
      },
      {
        "pagePath": "pages/news/news",
        "text": "新闻",
       "iconPath": "images/tabBar3.png",
      "selectedIconPath": "images/tabBar3Sele.png"
      }
    ]

3.模板使用中的数据渲染

1.新建templates文件夹，存放模板，新建信息模板message文件夹下面messag.wxml,message.wxss.
2.wxml中引入模板

3.wxss引入模板

@import "../../templates/message/message.wxss";

include用法
直接按照相对路径引入即可

4.wxss中的rpx及导入样式文件

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px (屏幕宽度/750)
iPhone6	1rpx = 0.5px

使用@import语句可以导入外联样式表

@import "../../templates/message/message.wxss";

@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

5.小程序逻辑App生命周期

注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用，必须调用且只能调用一次。

//APP.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})
onLau

onLaunch(Object object)
小程序初始化完成时触发，全局只触发一次。
onShow(Object object)
小程序启动，或从后台进入前台显示时触发。
onHide()
小程序从前台进入后台时触发。
onError(String error)
小程序发生脚本错误或 API 调用报错时触发

6.page页面周期函数

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  onShareAppMessage: function () {
    // return custom share data when user share.
  },
  onPageScroll: function() {
    // Do something when page scroll
  },
  onResize: function() {
    // Do something when page resize
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  }
})

data是页面第一次渲染使用的初始数据
页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

onLoad(Object query)
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow()
页面显示/切入前台时触发。

onReady()
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

onHide()
页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload()
页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时

页面事件处理函数

onPullDownRefresh()
监听用户下拉刷新事件。
需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onReachBottom()
监听用户上拉触底事件。
可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。

onPageScroll(Object object)
监听用户滑动页面事件。
注意：请只在需要的时候才在 page 中定义此方法，不要定义空方法。以减少不必要的事件派发对渲染层-逻辑层通信的影响。 注意：请避免在 onPageScroll 中过于频繁的执行 setData 等引起逻辑层-渲染层通信的操作。尤其是每次传输大量数据，会影响通信耗时。

onShareAppMessage(Object object)
监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

参数	类型	说明
from	String	转发事件来源。 button：页面内转发按钮； menu：右上角转发菜单
target	Object	如果 from 值是 button，则 target 是触发这次转发事件的 button，否则为 undefined
webViewUrl	String	页面中包含web-view组件时，返回当前web-view的url

此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：

自定义转发内容

字段	说明	默认值
title	转发标题	当前小程序名称
path	转发路径	当前页面 path ，必须是以 / 开头的完整路径
imageUrll	String	页面中包含web-view组件时，返回当前web-view的url

示例代码

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

组件事件处理函数
Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数

 click me 

Page({
  viewTap: function() {
    console.log('view tap')
  }
})