微信小程序 - 小程序入门，事件，生命周期 - 《网易微专业学习笔记》

注册个人小程序。

开发工具下载：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

文档：
https://developers.weixin.qq.com/miniprogram/dev/devtools/page.html#%E5%90%AF%E5%8A%A8%E9%A1%B5

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

属性data：
支持驼峰命名，如果命名为大写则全部转为小写，如果想要变大写，需要在字母前加-，注意第一个-是分隔符，不会起作用。

<button bindtap="login" data-A-AAA="11" id="login">登录</button>

Login时获取到输入数据方式1：

<view>
  <text>账号：</text>
  <input name="account" bindinput="accountInput" type="number" maxlength="11"/>
</view>
<view>
  <text>密码：</text>
  <input name="password" bindinput="passwordInput" type="password" maxlength="6"/>
</view>
<view class="buttonCon">
  <button bindtap="login" data-account="11" id="login">登录</button>
  <button bindtap="register" id="register" >注册</button>
</view>

accountInput: function (event) {
    console.log(event.detail.value);
    this.setData({
      account: event.detail.value
    });
  },
  passwordInput: function (event) {
    console.log(event.detail.value);
    this.setData({
      password: event.detail.value
    });
  },
  login: function(event){
    console.log('Login', this.data.account, this.data.password);
  },
  register: function(event){
    console.log('Register', this.data.account, this.data.password);
  }

currentTarget 和 target的区别：
如果一个view里还有另一个view，外层view称为outer view，内层称为 inner view，当点击内层view的时候也会触发外层view，可以注意到outer view的 target为inner view，而currentTarget 为outer view。
如果想要禁用掉外层的tap事件，inner view需要用 catchtap。

<form bindsubmit="submit" bindreset="reset">
  <view>
    <text>账号：</text>
    <input name="account" bindinput="accountInput" type="number"      maxlength="11"/>
  </view>
  <view>
    <text>密码：</text>
    <input name="password" bindinput="passwordInput" type="password" maxlength="6"/>
  </view>
  <view class="buttonCon">
    <button form-type="submit" id="login">登录</button>
    <button form-type="submit" id="register" >注册</button>
  </view>
</form>
<view id="outter" bindtap="outterTap">
  outter
  <view id="inner" catchtap="innerTap">inner</view>
</view>

在wxml中绑定事件时，只能写事件名称，不能带参数：

onLoad: function (options) {
    self = this;
  },
  accountInput: function (event) {
    console.log(event.detail.value);
    this.setData({
      account: event.detail.value
    });
  },
  passwordInput: function (event) {
    console.log(event.detail.value);
    this.setData({
      password: event.detail.value
    });
  },
  login: function(event){
    console.log('Login', this.data.account, this.data.password);
  },
  register: function(event){
    console.log('Register', this.data.account, this.data.password);
  },
  submit: function(event){
    console.log('submit',event);
    if (event.detail.target.id === 'register') {
      console.log('register',
        event.detail.value.account,
        event.detail.value.password);
    }
    else {
      console.log('login', 
        event.detail.value.account,
        event.detail.value.password);
    }
  },
  reset: function (event) {
    console.log('reset', event);
  },
  outterTap: function(event){
    console.log('outter', event);
  },
  innerTap: function (event) {
    console.log('inner', event);
  },

app声明周期：

//app.js
App({
  onLaunch: function (query) {
    console.log('launch', query);
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      })
    }
  },
  onShow: function(){
    console.log('show');
  },
  onHide: function(){
    console.log('hide');
  },
  onError: function(error){
    console.log('error',error);
  },
  onPageNotFound: function(){
    console.log('page not found');
  },
  globalData: {
    userInfo: 123
  }
})

在页面中获取app实例：
不要随意调用app的生命周期函数，如果想在 app.js中访问app实例，则可以直接用this。

var app = getApp();
app.globalData // 访问全局数据

onUnLoad：会在wx.redirectTo后调用（没有返回按钮了），页面被卸载。如果用wx.navigateTo，页面并不会被卸载，只是被隐藏。

下拉刷新：
需要在页面的json文件中添加：默认为true。

{
  "usingComponents": {},
  "navigationBarTitleText": "Demo1",
  "enablePullDownRefresh": true
}

设置分享：
必须要实现onShareAppMessage。如果没有实现，则可以在onload方法中，wx.showShareMenu。

pageOrientation可以让模拟器出现横竖屏切换按钮：

{
  "usingComponents": {},
  "navigationBarTitleText": "Demo1",
  "enablePullDownRefresh": true,
  "pageOrientation": "auto"
}

// pages/demo1/demo1.js
var app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("page onload");
    console.log(app.globalData);
    wx.showShareMenu({
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("page ready");
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    console.log("page show");
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("page hide");
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("page unload");
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("page PullDownRefresh");
    wx.stopPullDownRefresh();
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("page Reach Bottom");
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    console.log("page Share App Message");
  },
  onPageScroll: function(){
    console.log('page scroll');
  },
  onResixe: function(){
    console.log('page resize');
  },
  onTabItemTap: function(){
    console.log('page TabItemTap');
    // 刷新数据
    this.setData({
    });
  }
})

restartStrategy：

"window": {
    "enablePullDownRefresh": true,
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "QuickStart",
    "navigationBarTextStyle": "black",
    "restartStrategy": "homepage"
  },

{
  "usingComponents": {},
  "navigationBarTitleText": "Demo1",
  "enablePullDownRefresh": true,
  "pageOrientation": "auto",
  "restartStrategy": "homepageAndLatestPage"
}

页面的方法 onSaveExitState, 退出后可以保存数据，下次可以获取到。